ES6 구조 분해 할당 - Expressions Destructuring assignment

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식

 

기본 구문

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}

실무에서는

 

배열 구조 분해 : 거의 static한 용도로 많이 사용했다

 

기본 변수 할당

var foo = ["one", "two", "three"];

var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

선언 분리 할당

var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

기본값

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

변수 값 교환

장점 : 구조 분해 할당으로 값을 교환하면 임시 변수가 필요없다

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

 

객체 구조 분해

 

기본 할당

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

 

선언 없는 할당

var a, b;

({a, b} = {a: 1, b: 2});

 

새로운 변수 이름으로 할당하기

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

 

중첩된 객체 및 배열의 구조분해 예제

실무에서는 대략 아래와 같은 케이스를 많이 접했던 것 같다.

 

CASE1) 객체 중첩

// 중첩된 객체 및 배열의 구조분해
var o = {p:42, q:true, data:{serpiko:"hjj"}};

var {p: foo, q: bar, data:{serpiko: name}} = o;

console.log(foo, bar, name); // 42, true, "hjj"

CASE2) 객체 안 배열 중첩

// 중첩된 객체 및 배열의 구조분해
var a = {p:42, q:true, data:[{
    serpiko: "hjj",
    age: "10", 
  }]
};

var {p: foo, q: bar, data:[{serpiko: name, age: age}]} = a;

console.log(foo, bar, name, age); // 42, true, "hjj"

CASE3) 객체 안 객체의 배열 중첩

var {is_required:{data:[is_required1]}} = {"is_required":{"type":"Buffer","data":[1]}}
var {is_required:{data:[is_required2]}} = {"is_required":{"type":"Buffer","data":[0]}}

console.log(is_required1); // 1
console.log(is_required2); // 0