본문으로 바로가기

구조분해 할당

category Node JS/ES2015+ 2021. 11. 27. 20:01
var candyMachine = {
  status: {
    name: 'node',
    count: 5,
  },
  getCandy: function () {
    this.status.count--;               
    return this.status.count;
  },
};
var getCandy = candyMachine.getCandy;   
var count = candyMachine.status.count;

코드설명

 

 

객체의 속성을 같은 이름의 변수에 대입하는 코드 따라서 var getCandy = candyMachine.getCandy; 이 부분은 속성을 가져온 것임으로 문제가 되지 않는다.

 

 

추가공부

더보기

갈색 박스안을 보면 속성은 가져왔지만

빨간 박스처럼 함수의 역할은 하지 못한다.

 

⇒속성 그자체만 가져온다

 

const candyMachine = {
  status: {
    name: 'node',
    count: 5,
  },
  getCandy() {
    this.status.count--;
    return this.status.count;
  },
};
const { getCandy, status: { count } } = candyMachine;

 

candyMachine 객체안의 속성을 찾아서 변수와 매칭한다.

count 처럼 여러단계안의 속성도 찾을 수 있는데

 

다만 구조분해 할당을 사용하면 함수의 this가 달라질 수 있다.

이떄는 bind함수로 따로 사용해야한다.

 

추가공부

더보기

 

 

코드 이해가 잘안되었는데 다음 예시를 통해 같은 이름을 가진 함수로 속성을 가져오는 함수라는것을 알았다.

 


배열에 대한 구조분해 할당

 

 

var array = ['nodejs', {}, 10, true];
var node = array[0];
var obj = array[1];
var bool = array[3];

=

const array = ['nodejs', {}, 10, true];
const [node, obj, , bool] = array;

위 두 코드는 같으며 obj 과 bool 사이의 10은 변수명을 지어주지 않았으므로 무시한다.

 

 

'Node JS > ES2015+' 카테고리의 다른 글

클래스  (0) 2022.04.24
ES2015+ 란??  (0) 2022.04.24
화살표 함수  (0) 2021.11.27
템플릿 문자열  (0) 2021.11.27
const,let  (0) 2021.11.27