ES6 Distructuring

Distructuring?

  -배열 또는 객체에서 데이터를 별개로 추출하여 할당해 줍니다.

분리하여 할당 하는 방법

• 값이 모자라면 undefind로 기본값이 설정 됩니다.

let a,b,c, rest; [a, b, c] = [1, 2, 3]; 
console.log(a); // 1 
console.log(b); // 2 
console.log(c); // 3
console.log(rest); // undefined

[a, b, c, ...rest] = [1, 2, 3, 4, 5]; 
console.log(a); // 1 
console.log(b); // 2 
console.log(c); // 3 
console.log(rest); // [4, 5]

변수 값 교환하기

var a = 1; var b = 3; 
[a, b] = [b, a]; // 두 값의 값을 바꿉니다. 
console.log(a); // 3 
console.log(b); // 1

값을 연산 하여 담기

var a = 2; var b = 6; 
[a, b] = [b+a, b/a ]; // 값을 연산히여 담습니다. 
console.log(a); // 8 
console.log(b); // 3

함수 return 값 나누어 담기

• Array 형식으로 return 되었을때 각 값을 나누어 담을 수 있습니다.

function get(){ return ['hello', 'world']; } 
let [a,b] = get(); 
console.log(a); // hello
console.log(b); // world

선언 없이 할당

let {a, b} = {a:1,b:2}; console.log(a); // 1 console.log(b); // 2

let {a, b} = {a:1,b:2}; 
console.log(a); // 1
console.log(b); // 2

변수값을 이용한 Distructuring

• 변수의 값을 이용하여 디스트럭쳐링 할수 있습니다.

let a = 'abc'; let { [a]:b } = { abc: 'DEF' }; console.log(b); // DEF

let a = 'abc'; 
let { [a]:b } = { abc: 'DEF' }; 
console.log(b); // DEF

Operation

• 문자열과 변수를 조합하여 프로퍼티 이름으로 사용할 수 있다.

let a = 'abc', name = { [a + '123'] : 'bb' }; 
console.log(name);// { abc123 : 'bb’}