[JS] 구조분해할당 (Destructuring Assignment)

구조 분해 할당

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

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

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

할당받을 변수를 왼쪽에 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면된다.

= 배열 [10, 20] 이 분해되어 각각 a, b에 담긴 것

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

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

객체 내부의 프로퍼티 값을 간편하게 분해해서 변수에 저장할 수 있게 해준다.
배열에서의 구조 분해 할당과 쓰이는 의미는 동일하되, 쓰이는 대상이 객체로 바뀐 것 뿐!

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;

객체의 프로퍼티명과 다른 변수명으로 새롭게 지정해 줄 수도 있다.

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