ES6: 구조분해 할당(Destructuring)

https://ko.javascript.info/destructuring-assignment#ref-70

구조 분해 할당

  const candyMachine = {

      status: {

          name: "none",

          count: 5,

         },

      getCandy(){

          this.status.count--;

          return this.status.count;

         }

[객체 분해하기]

1. 기본 문법

let { var1, var2}  = { var1 : …, var2 : … }

 

예시#1:

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

→ ① let { title, width, height } = options;

또는 ② let { width : w, height : h, title } = options; (console.log(w) // 100)

[TIP] 기본값을 설정 할 수 있다. let { width : w, height : h, title, color="red" } = options; 

[TIP] 콜론(:)과 할당연산자(=)를 동시에 사용할 수 있다. let { width : w = 100, height : h = 200, title } = options; 

[TIP] 프로퍼티가 많은 복잡한 객체에서 원하는 정보만 뽑아오는 것도 가능합니다. let { title }= options;

[TIP] 변수를(let, const) 선언하지 않고 사용할 수 있다. 아래와 같이 (statement) 묶으면 된다.

( { title, width, height } = { title : "Menu", width : 200, height : 100 } );

[중첩 구조 분해(nested destructuring)]

객체 안에 객체

let options = { 

  size : {

    width : 100,

    height : 200

  },

  items: [ "Cake", "Donut" ],

  extra : true

};

※ options. size. width; (점. 으로 객체에 접근)

※ 접근방식: options → size → width;

 

let {

  size : { ← size는 여기,

    width, height

  },

  items : [ item1, item2 ], ← items는 여기에 할당함

  title = "Menu" ← 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함

} = options;

※ 오른쪽의 형태가 완성된다. { size : { width } }

(객체 안에 객체가 더 존재할 경우: { size : { width : { data } } } 즉, 객체 단위를 { }를 계속 감싸줌으로써 표기할 수 있다.

[배열 분해하기]

#1 배열에 값이 정의되어 있어야 한다.

const arry = ["nodejs", {}, 10, true]

**배열에 들어있는 정보를  변수에 할당.

 

#2 배열안의 값을 변수로써 아래와 같이 각각 사용할 수 있다.

const node = array[0];

const obj = array[1];

const bool = array[array.length -1];

다음과 같이 표기할 수 있다. const [node, obj, , bool] = array