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

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 배열 및 객체 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있다. 구조 분해 할당 구문은 이와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

 

 

배열 구조 분해

var [a, b, c] = [1, 2, 3];
var d, e;
[d, e] = [4, 5]; // 선언이 분리되어도 구조 분해 할당 가능

var [a, b, c] = [2, 3]; // c = undefined
var [a, b, c = 5] = [2, 3]; // default 값 설정 가능, 분해한 값이 undefined일 때 대신 사용

var [a, b, ...rest] = [10, 20, 30, 40, 50]; // 변수에 배열의 나머지 할당 가능
// a = 10, b = 20, rest = [30, 40, 50]

[a, b] = [b, a]; // 값 교환

 

함수가 반환한 배열도 구조 분해 및 분석이 가능하다.

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f(); // a = 1, b = 2

 

일부 필요없는 값은 무시할 수 있다.

function f() {
  return [1, 2, 3];
}

var [a, , b] = f(); // a = 1, b = 3

 

 

 

 

객체 구조 분해

var { a, b } = { a: 10, b: 20 };
// a = 10, b = 20

var a, b;
({a, b} = {a: 1, b: 2}); // 선언과 분리한 할당. '()'를 사용해야 한다. 

var { a : x, b : y } = { a : 'mmm', b : 10 }; // 새로운 변수 이름으로 할당
// x = 'mmm', y = 30

var {a = 10, b = 5} = {a: 3}; // default 값 설정 가능
// a = 3, b = 5

 

rest를 이용하여 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모을 수 있다.

var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; 
// a = 10, b = 20, rest = {c: 30, d: 40}

 

중첩된 객체 구조 분해

var user1 = {
    name: "Kim",
    post: [
       {
        id: "axf2df5",
        title: "Destructuring",
        content: "JavaScript....",
        date: "2023-02-13"
       }
    ],
    age: 20
};

var { name: userName, post: [{ title: postTitle }] } = user1;

console.log(userName); // Kim
console.log(postTitle);  // Destructuring