ES6 - 비구조화 할당

Destructing Assignment

객체

const objectEx = {b: 10, c: 100, d: 1000};
const {a, b, c} = objectEx; // 객체 해체 할당시 변수들도 객체 { }로 감싸야 한다.

a; // undefined
b; // 10
c; // 100
d; // ReferenceError

ES6부터 객체나 배열의 원하는 부분만 분해해서 따로 할당하는 비구조화 할당(해체 할당)이 추가되었다.

미리 선언된 객체의 key와 해체 할당에서 선언한 변수명은 정확히 일치해야 하는 관계에 있다. 위 예시에서 a 변수는 objectEx 객체에 선언되지 않았는데 해체 할당에서 쓰였기 때문에 'undefined'를 출력한다.

const objectEx = {b: 10, c: 100, d: 1000};
const a, b, c;

({a, b, c} = objectEx); // 정상 작동
{a, b, c} = objectEx; // 잘못 사용한 케이스

비구조화 할당과 선언을 분리하려면 할당시에 반드시 전체를 ()로 감싸야 한다.

배열

const li = [{name: 'kim', age: 100}, 20, 'korea'];
let [x, y, z, a] = li; // 배열 해체 할당시 변수들도 배열로 감싸야 한다.

x; // {name: 'kim', age: 100}
y; // 20
z; // 'korea'
a; // undefined

기존 배열의 값을 해체 할당할 때는 사용할 변수의 이름은 재량으로 결정할 수 있다. 단 선언된 배열의 앞의 값부터 순차적으로 해체할당 배열에 맵핑된다.

전개연산자를 통한 비구조화 할당

const li = [10, 20, 30, 40, 50]
let [a, b, ...rest] = li;
a; // 10
b; // 20
rest; // [30, 40, 50]

배열 해체할당시 선언할 마지막 변수에 전개연산자를 쓰면 이전까지 할당되고 남은 나머지 값들이 배열로 묶여서 리턴된다.

변수값 Switching

let a= 5;
let b = 10;
[a, b] = [b, a]
a; // 10 
b; // 5

// 변수 하나를 더 써서 값을 서로 스위칭할 때
let a = 5
let b = 10
let tmp;

tmp = a;
a = b;
b = tmp;
console.log(a, b) // 10, 5

다른 변수를 쓰지 않아도 해체 할당으로 값을 서로 교체할 수 있다.

---

참고)
https://learnjs.vlpt.us/useful/06-destructuring.html
https://poiemaweb.com/js-object