구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

자바스크립트에서 가장 유용하고도 많이 쓰이는 문법, 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해준다.

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);

배열(array)에서의 구조 분해 할당

let [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

구조 분해 할당이라고 해서 특별한 문법적 형태가 다른 것이 아니라, 위처럼 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 된다.

배열 [10, 20] 이 분해되어 각각 a, b에 담긴 것입니다.

여기서 활용되는 것이 ... 표현(스프레드)이다.

let array = [1, 2, 3, 4, 5];
let [a, b, ...rest] = array;
console.log(rest); // [3, 4, 5];

구조 분해 할당에서는 a, b 까지 1과 2가 대입이 되고, 나머지 3, 4, 5는 ...rest 로 받아서 [3, 4, 5] 와 같이 rest 변수에 배열로 저장해준다.

... 문법의 역할이 Rest 일 때, 파라미터에서 쓰이면 Rest 파라미터, 위처럼 배열의 구조분해 할당에 쓰일 경우 Rest elements가 되는 것이겠네요!

객체(object)에서의 구조 분해 할당

객체에서의 구조 분해 할당 또한 많이 쓰이는 문법이다. 객체 내부의 프로퍼티 값을 간편하게 분해해서 변수에 저장할 수 있게 해 줍니다.

배열에서의 구조 분해 할당과 쓰이는 의미는 동일함.
단, 분해되는 대상이 배열은 array의 value(element) 였다면, 객체는 분해되는 대상이 객체의 property 인 차이가 있다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name); // "John"
console.log(age); // 18
console.log(memo); // "Hello"

// 만약 구조 분해 할당을 사용하지 않는다면?
// 아래와 같이 직접 대입해 주어야 한다...
const name = obj.name;
const age = obj.age;
const memo = obj.memo;

이처럼 obj 내부의 name, age, memo 프로퍼티들을 각각 프로퍼티명과 이름이 동일한 name, age, memo 변수에 알아서 분해하여 할당해 주고 있다

물론 객체의 프로퍼티명과 다른 변수명으로 새롭게 지정해 줄 수도 있다. obj로부터 분해된 name 프로퍼티의 값을 새롭게 이름지은 YourName 변수에 할당하고 있다.

...연산자

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
// memo, name, age 순으로 작성해도 상관이 없다. 알아서 해당 프로퍼티명에 해당하는 값을 저장한다.
const { memo, name, age } = obj;
console.log(name); // 'John'
console.log(age); // 18
console.log(memo); // 'Hello'

// 배열 구조 분해 할당의 경우 작성된 순서대로 배열의 값을 넣어준다.
const [a, b, c] = [10, 20, 30];
console.log(a, b, c); // 10 20 30

이렇게 길었던 코드를

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name, ...rest } = obj;
console.log(name); // "John"
console.log(rest); // { age : 18, memo: 'Hello' }

이렇게 짧게 적을 수 있다....

참고: [https://chanhuiseok.github.io/posts/js-10/]