JavaScript - ES6 디스트럭처링(Destructuring)

디스트럭처링(Destructuring)
- 객체(배열, 객체)에 입력된 값을 개별적인 변수에 핼당하는 간편 방식 제공
- 배열이나 객체에서 필요한 값을 추출해서 변수에 할당하거나 반환할 때 유용하게 사용함
- 배열일경우 [] = [], 객체일경우 {} = {}

소스

"use strict";

var arr1 = [1, 2, 3];
var a = arr1[0];
var b = arr1[1];
var c = arr1[2];

console.log(a, b, c);

var arr2 = [10, 20, 30];
// arr2 배열의 요소들을 순서대로 대입
[a, b, c] = arr2;
console.log(a, b, c); // 10, 20, 30

// 값을 대입받는 선언식이 있으나, 받을 값이 없을 경우 undefined 대입됨
[a, b, c] = [1, 2];
console.log(a, b, c); // 10, 20, undefined

// 배열길이보다 변수가 적을경우 변수만큼만 들어감
[a, b] = arr2;
console.log(a, b); // 10, 20

// c에 300을 넣고 싶을때
[a, , c] = [100, 200, 300];
// b는 기존값을 유지
console.log(a, b, c); // 100, 20, 300

// 대입할 값이 없을때 기본 0을 할당
[a = 0, b = 0, c = 0] = [1000, 2000];
console.log(a, b, c);

var member = { id: "hong", name: "홍길동", email: "email@a.com" };
var id = member.id;
var name = member.name;
var email = member.email;

console.log(id, name, email);

// 객체의 값을 매핑해서 대입
var { id, name, email } = member;
// 기본값 설정 가능, 대입할 값 없을 경우 undefined 대입됨
var { id, name = "김..", email = "e@e.com" } = member;

결과

1 2 3
10 20 30
1 2 undefined
10 20
100 20 300
1000 2000 0
hong 홍길동 email@a.com