자바스크립트에서 유용하고도 많이 쓰이는 문법이라 하면 구조 분해 할당을 빼놓을 수 없습니다.

구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해 줍니다.

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

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

구조 분해 할당이라고 해서 특별한 문법적 형태가 다른 것이 아니라, 위처럼 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 됩니다.
여기서 또 활용되는 것이 ... 스프레드 표현입니다.

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 변수에 배열로 저장해 줍니다.

배열 구조 분해 할당을 활용하여 배열의 첫 번째 요소를 가져와서 변수에 담고 싶을 때

const array = [1, 2, 3];
const [first] = array;
console.log(first); // 1

array 배열에 담긴 것을 구조 분해 할당으로 first 라는 변수에 담고자 합니다. 단, first 에는 array의 element 중 맨 첫번째 1 만 담기게 됩니다.

배열의 첫 번째 요소와 두 번째 요소를 각각 변수에 담고 싶을 경우

const array = [1, 2, 3];
const [first, second] = array;
console.log(first, second); // 1 2

객체(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",
};
const { name: YourName, age, memo } = obj;
console.log(YourName); // 'John'

객체 구조 분해 할당은 프로퍼티를 기준으로 하기 때문에, 배열 구조 분해 할당과 달리 그 순서가 뒤바뀌어도 전혀 문제없이 해당 프로퍼티의 값을 가져올 수 있습니다.

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' }

객체에 담긴 프로퍼티 중, 특정 프로퍼티만 제외한 나머지 프로퍼티들로 이루어진 객체를 만들고 싶을 경우

const price = {
  apple: 1000,
  banana: 500,
  orange: 600,
  grape: 700,
};
const { apple, ...otherPrice } = price;
console.log(otherPrice); // { banana: 500, orange: 600, grape: 700 }

객체 구조 분해 할당으로 otherPrice 객체에 apple을 제외한 나머지 프로퍼티들이 모여서 저장되므로, 특정 프로퍼티만 제외한 새로운 객체를 만들어 낼 수 있습니다.

REFERENCE

https://chanhuiseok.github.io/posts/js-10/