ES6: Destructuring (구조분해 할당)

이번 스프린트부터 리액트를 다루게 되는데, ES6 문법을 잘 알고 있어야 리액트를 활용한 과제를 진행할 수 있다고 한다. 그중 Destructuring이 익숙지 않아 블로그에 정리해 본다.

---

Destructuring assignment란?

배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 JS 표현식인다. 간단히는 배열과 객체를 좀 더 편하게 다루기 위해 ES6에서 추가된 방법이다. 해체라는 단어가 모호하기 때문에 이전 문법과 비교해서 예시를 보는 게 이해하기 쉬웠다.

 

Array destructuring

이전 문법에서 우리가 배열에서 어떤 값을 추출하기 위해서는 아래와 같이 변수들 각각의 인덱스를 지정해 주어야만 했다.

var number = [1, 2, 3, 4, 5];
var a = number[0]
var b = number[1]

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

하지만 ES6 부터는 각각을 지정하는 대신 한 번에 할당을 할 수 있다. 

var number = [1, 2, 3, 4, 5];
var [a, b] = number

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

위와 같은 코드로 배열을 한번에 대입하는 것 도 가능하다. 3줄의 코드를 한 줄로 줄일 수 있게 됐다.

var [a, b] = [1, 2, 3, 4, 5];

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

 

콤마를 활용하면 더 다양한 할당도 가능하다. 

var [a,,,,b] = [1, 2, 3, 4, 5, 6, 7];

console.log(a) //1
console.log(b) //5

var [,a,,b] = [1, 2, 3, 4, 5, 6, 7];

console.log(a) //2
console.log(b) //4

rest parameter도 이 형식으로 사용할 수 있다. 지정 선언된 요소를 제외한 나머지 인자들은 ...rest 에 할당된다.

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

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

var a, b;
[a, ...b] = [10, 20, 30, 40, 50, [60, 70]];

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

 

함수가 반환한 배열에 대한 작업도 더 간편해졌다.

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

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

 

Object destructuring

객체는 어떤 식으로 다룰까? 마찬가지로 같은 형식으로 작동한다.

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

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

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

 

중첩된 객체에서의 destructuring

아래의 객체에서 각각의 title 값을 밖으로 꺼내고 싶다면 어떻게 해야 할까?

다소 복잡해 보이지만, 아래와 같이 선언하면 깊이 들어있는 값들도 추출할 수 있다.

var data = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        title: 
            { 
              A: "title A",
              B: "title B"
            }
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: { A : localeTitle} }] } = data;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "title A"