ES6 디스트럭쳐링(Destructuring)

디스트럭쳐링(Destructuring) 이란?

구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것입니다.

배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용합니다.

배열 디스트럭쳐링 (Array Destructuring)

// ES5
var arr = [1, 2, 3];

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

// ES6
// 배열의 인덱스를 기준으로 값이 저장됩니다.
const arr = [1, 2, 3];

const [one, two, three] = arr;

객체 디스트럭쳐링 (Object Destructuring)

// ES5
var obj = { firstName: 'john', lastName: 'smith' };

var firstName = obj.firstName;
var lastName  = obj.lastName;

// ES6
// 주의! 가져오려는 값의 프로퍼티명과 저장하려는 변수명이 같아야 합니다.
// 즉, 프로퍼티명을 기준으로 값을 불러오고 저장합니다.
const obj = { firstName: 'Ungmo', lastName: 'Lee' };

const { lastName, firstName } = obj;

 디스트럭쳐링 응용 (JSON)

const arr = [
    { name: "sally", gender: "female", age: 23 },
    { name: "john", gender: "male", age: 22 }
];

// sally의 name과 age만 가져오기
let [{ name, age }] = arr;

// john의 gender만 가져오기
let [, { gender }] = arr;

console.log(name, age, gender);
// sally, 23, male