ES6(2015)에서의 변화 2

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

위 코드의 status과 geCandy를 별도의 변수로 가져오고 싶다면

 

const getCandy = candyMachine.getCandy
const status = candyMachine.status

이러한 코드를 작성할 것이다. 특히나 객체 리터럴내 속성과 이름이 같은 변수를 만들어 담는다면

이를 한번에 한줄로 손쉽게 가져올 수 있는 문법이 생겼다.

 

const { status, getCandy } = candyMachine

destructuring이라 불리는 문법인데 c++의 소멸자도 아니고 허헛.

ZeroCho 님의 비구조적 할당이라는 적절한 번역이 마음에 든다.

 

---

 

getCandy()

어쨋든 별도의 변수에 할당받았을 때(비구조적할당이 아니더라도)

getCandy() 로 호출하면 undefined라고 나오는데 도대체 이것은 왜 이런 걸까?

 

candyMachine.getCandy()

메서드 앞에 .이 찍힌 형태로 메서드를 호출 하면 . 앞의 것을 this로 보게 된다.(즉 candyMachine을 찾게된다.)

 

 

getCandy.call(candyMachine)

그냥 getCandy()는 찾을 것을 인식하지 못한다. 정상적으로 수행할 수 없다.

bind나 call, apply처럼 this를 변경해주는 함수를 사용해서 candyMachine을 지정해 줘야만 정상적으로 가능해진다.

 

---

비구조적 할당은 객체 뿐만 아니라 배열에도 적용된다.

 

var array = ['nodejs', {}, 10, true];

var node = array[0];
var obj = array[1];
var bool = array[array.length - 1];

오히려 객체 보다 배열에서 마지막 값을 값을 가져오는 것처럼 배열에서 더 많이 쓰였던것 같다.

 

const [node, obj, ,bool] = array

이를 한문장으로 아주 간편하게 할 수 있다.

공백으로 두면 건너뛴다. 따라서 10에 해당 하는 부분은 비구조적 할당에서 제외된다.

 

const [node, obj, ...bool] = array

...변수명으로 하면 나머지 부분을 변수에 통째로 배열형태로 담게 된다. 이를 rest문법이라고 부른다.

 

콘솔에 bool을 찍어보면 [10, true]라고 나온다.

 

 

 

점점점은 화살표 함수에서의 응용된 예도 있다.

const n = (x, ...y) => console.log(x,y)
n(5, 6, 7, 8, 9, 10, 11)

결과는 5 ▶(6) [6, 7, 8, 9, 10, 11] 이다

 

 

---

출처, 참조: https://www.zerocho.com