JavaScript - 비구조화 할당/구조분해 할당

비구조화 할당/ 구조분해 할당이란?

배열이나 객체의 속성을 바로 개별 변수에 할당하는 JavaScript의 표현식입니다.

 

구문

1.  배열

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

 

2.  오브젝트

const { a, b } = { a: 10, b: 20 };
console.log(a); // 10
console.log(b); // 20

 

 

예제

1. 배열 / 오브젝트의 나머지 값 할당

cosnt arr = [10, 20, 30, 40, 50];
const [a, b, ...rest] = arr;
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

const obj = { a: 10, b: 20, c: 30, d: 40, e: 50 };
const { a, b, ...rest } = obj 
console.log(a); // 10
console.log(b); // 20
console.log(rest); // { c: 30, d: 40, e: 50 }

 

2. 배열의 일부 값 무시하여 할당

const arr = [10, 20, 30, 40, 50];

const [start, , , , end] = arr;

console.log(start); // 10
console.log(end);   // 50

 

3. 오브젝트 새로운 변수이름으로 할당

const obj = { a: 3, b: 5 };
const { a: aa = 10, b: bb = 5 } = obj;

console.log(aa); // 3
console.log(bb); // 5