(ES6) - 06 디스트럭처링SUNGMIN SHIN10 Minutes2017년 9월 27일

[ ECMA Script6 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=11556385)

6.1 개요

---

let one, two;
[one, two] = [1, 2];
이 코드를 실행하면 one 변수는 1이 two 변수는 2가 할당되는 데 위와 같은 형태를 디스트럭처링(분할할당)이라 합니다.

6.2 Array 분할 할당

---

오른쪽 배열의 엘리먼트를 분할하여 왼쪽 변수에 엘리먼트 값을 할당합니다.

[ 소스 dest-1 ]

let one, two, three, four;
const values = [1, 2, 3];

// values의 구조와 동일하게 사용
[one, two, three] = values;
console.log('a:', one,  two,  three);

// values중 일부 값만 사용
[one,  two] = values;
console.log('b:', one,  two);

// values에 없는 값을 할당
[one,  two,  three,  four] = values;
console.log('c:', one,  two,  three,  four);

// 구조가 동일하다면 어떤 형태여도 문제 X
[one,  two, [three,  four]] = [1, 2, [73, 74]];
console.log('d:', one,  two,  three,  four);

위의 예제처럼왼쪽과 오른쪽의 형태를 맞다면 어떤 형태로도 값을 할당할 수 있으며 그렇지 않은 경우 에러가 발생합니다.

[ 소스 dest-2 ]

let one, two, three, four, other;
// 변수 이름을 작성하지 않고 콤마를 작성하면 해당하는 인덱스를 건너뛰고 다음 변수로 이동
[one, , ,four] = [1, 2, 3, 4];
console.log(one, four);
// speead 연산자를 사용하여 1을 제외한 모든 값을 할당
[one, ...other] = [1, 2, 3, 4];
console.log(other);

위 예제처럼 Array에 변수 이름을 작성하지 않고 콤마를 작성하면 해당 인덱스는 생략하고 다음 변수로 이동하게 됩니다.

6.3 Object 분할 할당

---

오른쪽의 Object 오브젝트를 프로퍼티 단위로 분할하고 프로퍼티 키와 이름이 같은 왼쪽 변수에 값을 할당합니다.

[ 소스 dest-3 ]

// one에는 1이 nine에는 9가 할당됩니다.
let {one, two} = {one:1, nine:9}
console.log(one, nine);

let three, four;
({three, four} = {three:3, four:4});
console.log(three, four);

위 예제처럼 오른 쪽이 object라면 왼쪽도 동일하게 Object여야 합니다. 변수 one과 two에는 각각 1과 9가 할당됩니다.
변수 three와 four와 같이 사전에 선언된 변수를 사용하려면 소괄호 안에 할당 코드를 작성합니다.

[ 소스 dest-4 ]

let five, six;
({one: five, two: six} = {one: 5, two: 6});
console.log('five: ',five);
console.log('six: ',six);

let {nine, plus: {ten}} = {nine:9, plus: {ten: 10}};
console.log('nine: ',nine);
console.log('ten: ',ten);

위 예제 역시 조금 더 깊은 Object일 뿐 동일하다.(Object의 형태와 프로퍼티의 값을 눈여겨보면 이해가 쉬울 듯)

6.4 파라미터 분할 할당

---

호출하는 함수의 파라미터에 Object를 작성할 수 있습니다. 이때 호출 받는 함수의 파라미터를 오브젝트 분할 할당 형태로 작성하면 함수 블록에서 직접 프로퍼티 이름을 사용할 수 있습니다.

[ 소스 dest-5 ]

function total({one, plus: {two, five}}) {
  console.log(one + two + five);
}
total({one: 1, plus: {two:2, five:5}});

total({
  one: 1,
  plus: {
    two:2,
    five:5
  }
});