JavaScript - 중첩 구조 분해

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 중첩 구조 분해라는 흥미로운 세계로의 여정을 시작할 것입니다. 이게 약간 두려워 보일 수 있지만, 이 수업이 끝나면 당신은 프로처럼 중첩 구조를 분해할 수 있을 것을 약속합니다!

중첩 구조 분해

depth에 빠지기 전에, 먼저 분해(destructuring)에 대해 간단히 돌아보겠습니다. 상자(객체나 배열) 안에 가득 찬 좋은 것들이 있고, 특정 아이템을 꺼내고 싶다면 어떨까요? 분해는 그 상자에 손을 넣고 필요한 것을 한 번에 집어들이는 것과 같습니다. 멋지지 않나요?

그런데 중첩 구조 분해는 상자 안에 또 다른 상자들이 있고, 그 내부 상자들에서도 아이템을 꺼내고 싶을 때입니다. 데이터의 러시아 인형처럼입니다!

이제 몇 가지 간단한 예제로 시작해 보겠습니다.

중첩 객체 분해

상상해 보세요, 비디오 게임을 만들고 있고, 플레이어 객체에 중첩된 정보가 있습니다. 이렇게 분해할 수 있습니다:

const player = {
name: "Mario",
game: "Super Mario Bros",
details: {
age: 35,
occupation: "Plumber"
}
};

const { name, details: { age } } = player;

console.log(name);  // 출력: Mario
console.log(age);   // 출력: 35

이 예제에서 우리는 player 객체에 손을 대어 최상위 수준의 name을 집어들고, 그런 다음 details 객체로 들어가 age를 집어듭니다. "이름을 주세요, 그리고 디테일즈 안의 나이도 가져다 주세요"라고 말하는 것과 같습니다.

이제 좀 더 복잡한 것을 시도해 보겠습니다:

const game = {
title: "Final Fantasy VII",
platform: "PlayStation",
characters: {
protagonist: {
name: "Cloud Strife",
weapon: "Buster Sword"
},
antagonist: {
name: "Sephiroth",
weapon: "Masamune"
}
}
};

const { title, characters: { protagonist: { name: heroName, weapon: heroWeapon } } } = game;

console.log(title);       // 출력: Final Fantasy VII
console.log(heroName);    // 출력: Cloud Strife
console.log(heroWeapon);  // 출력: Buster Sword

여기서 우리는 두 단계 깊이 들어갑니다! 최상위 수준의 title을 집어들고, 그런 다음 characters로 들어가 protagonist로 들어가서 name과 weapon을 집어듭니다. 또한, heroName과 heroWeapon으로 이름을 다시 지정하여 명확성을 높입니다.

중첩 배열 분해

배열도 중첩될 수 있습니다! 예제를 보겠습니다:

const coordinates = [10, 20, [30, 40]];

const [x, y, [z, w]] = coordinates;

console.log(x);  // 출력: 10
console.log(y);  // 출력: 20
console.log(z);  // 출력: 30
console.log(w);  // 출력: 40

이 경우 우리는 중첩된 배열을 분해하고 있습니다. coordinates 배열의 세 번째 요소는 또 다른 배열이므로, 다른 쌍의 꺼리를 사용하여 분해합니다.

이제 좀 더 복잡한 것을 시도해 보겠습니다:

const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

const [[a, b, c], [d, e, f], [g, h, i]] = matrix;

console.log(a, e, i);  // 출력: 1 5 9

여기서 우리는 3x3 매트릭스를 분해하고 있습니다. 각 중첩된 배열은 분해 패턴에서의 각 행에 해당합니다.

배열 내 객체 - 중첩 구조 분해

이제 것을 섞어보겠습니다. 배열 안에 객체가 있을 수도 있습니다:

const student = {
name: "Alice",
age: 20,
grades: [85, 90, 92]
};

const { name, grades: [firstGrade, ...otherGrades] } = student;

console.log(name);         // 출력: Alice
console.log(firstGrade);   // 출력: 85
console.log(otherGrades);  // 출력: [90, 92]

이 예제에서 우리는 객체에서 name을 집어들고, 그런 다음 grades 배열을 분해합니다. 첫 번째 점수를 별도로 집어들고, 나머지 점수는 rest 연산자(...)를 사용하여 새로운 배열로 모읍니다.

배열 내 객체 - 중첩 구조 분해

마지막으로, 배열 내 객체를 분해하는 것을 보겠습니다:

const team = [
{ name: "John", role: "Developer" },
{ name: "Jane", role: "Designer" },
{ name: "Jack", role: "Manager" }
];

const [{ name: firstName }, , { role }] = team;

console.log(firstName);  // 출력: John
console.log(role);       // 출력: Manager

여기서 우리는 배열의 첫 번째와 세 번째 객체를 분해하고 있습니다. 첫 번째 객체에서 name을 firstName으로 이름을 다시 지정하고, 두 번째 객체를 건너뛰고, 세 번째 객체에서 role을 집어듭니다.

메서드 표

다음은 우리가 다루었던 메서드를 요약한 표입니다:

메서드	설명	예제
객체 분해	객체에서 값 추출	const { name, age } = person;
배열 분해	배열에서 값 추출	const [x, y] = coordinates;
중첩 객체 분해	중첩된 객체에서 값 추출	const { details: { age } } = player;
중첩 배열 분해	중첩된 배열에서 값 추출	const [x, [y, z]] = nestedArray;
혼합 분해	객체와 배열 분해 결합	const { grades: [firstGrade] } = student;
이름 지정	분해된 값에 다른 이름 지정	const { name: firstName } = person;
Rest 연산자	나머지 값으로 배열 모으기	const [first, ...rest] = numbers;

그렇습니다, 여러분! 중첩 구조 분해로 JavaScript 기술을 한 단계 업그레이드했습니다. 연습이 완벽을 만드는 법을 기억하세요, 그러니 이 개념들을 자신의 코드에서 실험해 보지 마세요. 행복한 코딩을 기원합니다!

Credits: Image by storyset