ES 6 - destructuring assignment (구조분해할당)

destructuring assignment

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 (mdn)

 

 

배열을 해체한 경우

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]

 

객체를 해체한 경우

({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}

 

 

기본 변수 할당

아래는 ES6 버전

var foo = [1, 2, 3];

var [one, two, three] = foo;

console.log(1); //1
console.log(one); //1
console.log(foo); // [1, 2, 3]

 

아래는 같은 코드를 변환한 ES5 버전이다.

var foo = [1, 2, 3];

var one = foo[0];
var two = foo[1];
var three = foo[2];

console.log(1); //1
console.log(one); //1
console.log(foo); //[1, 2, 3]

 

여기서 이해가 안됐었는데

ES6에서 좌항에 적어준 값이 선언, 우항에 적어준 값이 할당이라고 생각하면 된다!

 

 

선언에서 분리한 할당

변수의 선언이 분리되어도 구조분해를 통해 값을 할당할 수 있다.

var a, b;

[a, b] = [1, 2];

console.log(a); // 1
console.log(b); // 2

 

기본값 할당

변수에 기본값을 할당하면 분해한 값이 undefined일 때, 기본값을 대신 사용한다.

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

 

함수가 리턴한 배열 분석

함수는 원래 리턴값으로 배열을 가질 수 있다.

구조 분해를 사용하면 반환된 배열에 대한 작업을 더 간결하게 수행할 수 있다.

아래 예제에서 f()는 출력으로 배열 [1, 2]을 반환하는데, 하나의 구조 분해만으로 값을 분석할 수 있다.

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();

console.log(a); // 1
console.log(b); // 2

 

일부 반환값 무시하기

필요하지 않은 반환값을 건너뛸 수 있다.

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();

console.log(a); // 1
console.log(b); // 3

 

 

 

 

연습문제

(출처 : zerocho youtube)

const candyMachine = {
	status: {
    	name: 'node',
        count: 5,
    },
    getCandy() {
    	this.status.count--;
        return this.status.count;
    }
}

참고: 여기서 getCandy() { ... } 는 getCandy: function () { ... } 와 동일!! 

 

라는 코드가 있을 때, 이 키 값들을 하나의 변수로 만들어 정의해주고 싶다면?

 

ES5에서는 아래와 같이 정의할 수 있다.

const status = candyMachine.status;
const getCandy = candyMachine.getCandy;

 

그런데 똑같은 status와 getCandy를 객체의 키값, 변수의 이름으로 두 번 해주는 것이 명확하지 않아보여서 고쳐주고 싶다.

이럴 때, ES6의 구조분해할당을 이용할 수 있다.

const { status, getCandy } = candyMachine;

이렇게 끝내버릴 수 있는 것!

candyMachine에는 콤마로 구분된 객체가 두개 들어있기 때문이다.