[js] Destructuring assignment (해체할당)

1. 배열의 해체 할당

var colors = ['red', 'blue','white'];
var first = colors[0];
var second = colors[1];
var third = colors[2];

colors 배열의 요소들을 전부 펼쳐서

var [first, second, third] = colors;

위와 같이 배열 안에 1:1 순서대로 변수를 선언하는 것과 같다.

 

 

2. 객체의 해체 할당

const iu = {
  name : '아이유',
  age : 25,
  gender : 'female'
}
const {
  name,
  age,
  gender
} = iu

console.log(name, age, gender) // '아이유', 25, 'female

const loginInfo = {
  device: {
    createdAt: '2017-12-06T00:14:04+0000',
    deviceId: '0000000000004Vx',
    deviceType: 'desktop'
  },
  user: {
    createdAt: '2017-03-08T18:00:28+0000',
    email: 'power4ce@gmail.com',
    name: '정재남',
    nickname: 'gomugom',
    phoneNumber: '010-9185-9155'
  }
}

const {
  device,
  user: {
    name,
    nickname,
    phoneNumber: phone
  }
} = loginInfo

 

배열의 해체 할당보다 더 쉽게 객체의 원하는 변수만 추출하여 사용할 수 있다.

 

 

2-1. default parameter와의 연동

const phone = {
  name : 'iPhone',
  color : undefined
}

const {
  name: n,
  version: v = '6+',
  color: c = 'silver'
} = phone
console.log(n, v, c)

n값은 폰의 네임이고

v값은 폰에 없으면 디폴트로 '6+'를 넣어준다.

 

2-2. 또 다른 사용 예

const deliveryProduct = {
  orderedDate: '2018-01-15',
  estimatedDate: '2018-01-20',
  status: '배송중',
  items: [
    {name: '사과', price: 1000, quantity: 3},
    {name: '배', price: 1500, quantity: 2},
    {name: '딸기', price: 2000, quantity: 4}
  ]
}

const {
  estimatedDate: esti,
  status,
  items: [ , ...products]
} = deliveryProduct
console.log(esti, status, products)

estimatedDate 변수를 esti 로 간략하게 변경하여 사용가능.

items 배열을 가져오는데 앞에 거 하나 빼고 나머지만 가져오도록 간단하게 추출 가능.