[JS] 구조 분해 할당을 알아보자

구조 분해 할당(Destructuring Assignment)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는 표현식

구조 분해 할당은 코드를 간결하게 만들어주며 배열이나 객체에서 필요한 값을 쉽게 가져올 수 있다.

 

예시

1. 배열 분해 할당

배열에서 값을 추출해 변수에 할당할 때는 배열의 각 요소를 대상으로 할당 연산자(=)를 사용한다.

할당 연산자 왼쪽은 추출하려는 값을 받을 변수들의 리스트, 오른쪽은 배열을 지정한다.

const numbers = [1, 2, 3, 4, 5];

// 배열 분해할당을 사용하여 배열의 요소들을 변수에 할당
const [a, b, c, d, e] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5

numbers의 요소들을 [a, b, c, d, e] 변수에 할당했다.

a는 배열의 첫 번째 요소인 1을 가지고 있고, e는 5를 갖게 됐다.

 

이 때 할당할 변수 중 일부를 생략할 수도 있다.

const numbers = [1, 2, 3, 4, 5];

// 배열 분해할당을 사용하여 일부 요소를 생략
const [, b, , d, e] = numbers;

console.log(b); // 2
console.log(d); // 4
console.log(e); // 5

이런 식으로 배열의 첫 번째, 세 번째 요소를 생략하고 할당한다.

 

비슷하게 아래와 같이 ...rest를 사용할 수도 있다.

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// Expected output: 10

console.log(b);
// Expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// Expected output: Array [30, 40, 50]

[a, b] = [10, 20]은 제일 처음 했던 예시와 동일하다.

 

[a, b, ...rest]를 보자.

...rest 와 같이 작성한 걸 전개 구문이라고 하는데, a, b 외에 나머지 요소들을 배열로 할당한 형태다.

따라서 a, b 가 각각 10, 20이기에 rest에는 30, 40, 50이 담긴다.

 

2. 객체 분해 할당

객체에서 값을 추출해 변수에 할당할 때는 객체의 속성 이름을 사용한다.

따라서 속성 이름과 일치하는 변수에 값을 할당한다.

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

// 객체 분해할당을 사용하여 객체의 속성들을 변수에 할당
const { name, age, gender } = person;

console.log(name);   // 'John'
console.log(age);    // 30
console.log(gender); // 'male'

객체 person의 name, age, gender 속성의 값을 추출해 각각의 변수에 할당했다.

속성 이름과 일치하는 변수에 값을 할당했으니 뭔가 크게 달라진 게 없어 보인다.

 

그렇다면 아래와 같이 변수의 이름과 다른 이름으로 속성 값을 할당해보자.

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

// 객체 분해할당을 사용하여 객체의 속성들을 변수에 할당 (다른 변수 이름 사용)
const { name: personName, age: personAge, gender: personGender } = person;

console.log(personName);   // 'John'
console.log(personAge);    // 30
console.log(personGender); // 'male'

객체 person의 name 속성 값을 변수 personName에 할당했다.

 

for of 구문

const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");

console.log(myMap)
// Map(2) {'0' => 'foo', 1 => 'bar'}

for (const entry of myMap) {
  console.log(entry);
}
// ["0", "foo"]
// [1, "bar"]

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}
// 0: foo
// 1: bar

myMap에는 키로 '0'과 1이 들어 있고, 그 키의 값으로 'foo'와 'bar'가 들어 있다.

 

for... of 구문을 써서 myMap을 순회하면, [키, 밸류] 쌍으로 배열과 유사한 형태를 반환한다.

이 부분은 배열이 아니라 Map 객체의 내부 동작을 나타내기 위한 표현으로, 인덱스로 접근할 수도 없고 직접 접근할 수 있는 방법 또한 없다.

 

아무튼 이 부분은 넘어가고, 구조 분해 할당으로 for of 루프를 돌면 어떻게 될까?

Map(2) {'0' => 'foo', 1 => 'bar'} 이 부분의 키가 [key]가 되고, 밸류 부분이 [value]가 되는 것이다.

객체 구조 분해 할당과 유사하게 진행된다고 볼 수 있다.