Javascript {...} [...] destructuring assignment : 구조 분해 할당

 

 

# 'Destructuring assignment' 구문은 배열이나 객체의 속성을 해체하여

그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 expression 입니다.

 

1. Try

//간단한 예제
let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// Expected output: 10

console.log(b);
// Expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// Expected output: Array [30, 40, 50]


//더 많은 예제
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

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

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


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

 

 

 

2. 설명

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

객체 및 배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있습니다.

구조 분해 할당의 구문은 위와 비슷하지만,

대신 할당문의 좌변에서 사용하여,

원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.

구조 분해 할당은 Perl이나 Python 등 다른 언어가 가지고 있는 기능이에요.

 

 

 

3. 배열 구조 분해

sample...

 

 

 

4. 객체 구조 분해

sample...

 

 

 

Reference site: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment