Array Destructing, Object Destructing

 

 

let state = {
  items: ['item1', 'item2', 'item3', 'item4']
}

const { items } = state; // ['item1', 'item2', 'item3', 'item4']

할당받는 변수에 왠 객체가 있지 ? 어떻게 동작하지 궁금했는데, value값이 할당됨을 확인할 수 있었다.

let options = {
  title: "MVC",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // MVC
alert(width);  // 100
alert(height); // 200

왼쪽에 기재한 title, width, height 순서대로 options 객체의 value가 할당이 된다. 물론 키와 변수이름이 같아서가 아니라 순서대로이다.

 

 

let options = {
  title: "MVC",
  height: 200,
  width: 100
};

let {title, ...rest} = options;
// title="Menu", rest={height: 200, width: 100}가 할당.

이를 확장해서 ...array 가있다. 뒤에 것들은 특정 변수가 아니라 여러개 저장하고 싶을 때, ...을 사용해서 여러가지를 저장한다.

 

이는 배열에서도 마찬가지이다.

const [main, ...sub] = ['김두한', '구마적', '신마적', '쌍칼', '하야시']
console.log(sub); // [ '구마적', '신마적', '쌍칼', '하야시' ]

const [main, sub] = ['두한', '개코']
console.log(sub); // 개코