객체 디스트럭처링 (Object destructuring)

ES5 way

// 
var fullName = { firstName: 'NOH', lastName: 'SANGWOO' };

var firstName = fullName.firstName;
var lastName  = fullName.lastName;

console.log(firstName, lastName); // NOH SANGWOO

ES6 Destructuring

const fullName = { firstName: 'NOH', lastName: 'SANGWOO' };

// const lastName = fullName.lastName;
// const firstName = fullName.firstName;
// 위와 동일한의미
const { lastName, firstName } = fullName;  // 추출한다 생각하면 된다

console.log(firstName, lastName); // NOH SANGWOO

별명

const { firstName: fName, lastName: lName } = { firstName: 'NOH', lastName: 'SANGWOO' };
console.log(fName, lName); // NOH SANGWOO
console.log({ firstN: fName, lastN: lName }); // { firstN: 'NOH', lastN: 'SANGWOO' }

추출 후 객체 합치기

const { firstName, lastName } = { firstName: 'NOH', lastName: 'SANGWOO' };
console.log({ firstName, lastName }); // { firstName: 'NOH', lastName: 'SANGWOO' }

값이 없을때 기본값 지정 - default value

(값이 존재하면 무시됨)

const { firstName, lastName="SANGSOON", age = 31 } = { firstName: 'NOH', lastName: 'SANGWOO' };
console.log({ firstName, lastName, age }); 
// { firstName: 'NOH', lastName: 'SANGWOO', age: 31 }