[JS]디스트럭처링 할당(구조분해 할당)

디스트럭처링 할당(구조분해 할당)이란🤔

구조화된 배열과 같은 이터러블 또는 객체를
디스트럭처링(비구조화, 구조 파괴)하여
1개 이상의 변수에 개별적으로 할당하는 것

 

• 객체나 배열을 변수로 분해 하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식
• 배열의 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 함
  👉이때 변수를 배열 리터럴 형태로 선언 

let x, y, z;
[x, y, z] = [1, 2, 3];

// 위의 구문과 동치이다.
let [x, y, z] = [1, 2, 3];

• 왼쪽의 변수 리스트와 오른쪽의 배열은 배열의 인덱스를 기준으로 할당

let x, y, z;

[x, y] = [1, 2];
console.log(x, y); // 1 2

[x, y] = [1];
console.log(x, y); // 1 undefined

[x, y] = [1, 2, 3];
console.log(x, y); // 1 2

[x, , z] = [1, 2, 3];
console.log(x, z); // 1 3

// 기본값
[x, y, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

// spread 문법
[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

• 중첩 객체의 경우는 아래와 같이 사용함

const person = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

const { address: { city } } = person;
console.log(city); // 'Seoul'

 

 

[mdn 공식문서]

구조 분해 할당 - JavaScript | MDN