[자바스크립트] 구조 분해/비구조화 할당(Destructuring assignment)

구조 분해/비구조화 할당(Destructuring assignment)은 객체나 배열의 내용을 개별 변수로 간편하게 할당하는 방법입니다.

 

배열의 구조 분해 할당

// 배열 생성
let arr = [ 1, 2, 3 ];

// a, b, c 변수에 각각 할당합니다.
let [ a, b, c ] = arr;

// 결과 - 1:2:3
console.log(a + ":" + b ":" + c);

// 기본 값 지정하기(기본 값이 없으면 undefined이다)
let arr = [1];
let [ a=3, b=4 ] = arr;

// 결과 - 1:4
console.log(a + ":" + b);

// 변수값 교환하기
let a = 1;
let b = 2;
[a, b] = [b, a];

// 결과 - 2:1
console.log(a + ":" + b);

// 일부 값 무시하기
var [ a, ,b ] = [1, 2, 3];

// 결과 - 1:3
console.log(a + ":" + b);

// 나머지는 배열에 할당하기
let [ a, ...b ] = [ 1, 2, 3 ];

// 결과 - 1:2, 3
console.log( a + ":" b);

 

객체의 구조 분해 할당

// 객체의 속성을 변수에 할당
let obj = { kind: "pear", price: 10 };

// 선언과 동시에 할당.
let { kind, price } = obj;

// 선언과 별도의 할당.
let kind, price;
{ kind, price } = obj;

// 다른 이름의 변수에 할당
let { kind: fruitKind, price: fruitPrice } = obj;

// 기본 값 지정하기 (속성이 없으면 undefinded )
let { kind: fruitkind, price: fruitPrice = 20} = obj;