Javascript arrow function vs function

개요

• method decorator를 작성하면서 arrow function에 대해서 파악할 일이 생겼다.
• 해당 부분을 찾아보면서 정리해보자.
• 몇가지 사전지식을 위해서 앞에 this, bind(), call(), apply()에 대해서 따로 설명하고 있다.

this란?

해당 부분은 execution context를 이해해야 하는데, 그 부분은
해당 Blog 글에 설명된 내용을 참고하면 좋을 것 같다.

bind(), call(), apply()

• javascript에서 몇 가지 글들을 찾아보면 bind(), call(), apply()를 많이 찾아보게 될 것이다.
• 해당 부분을 설명하는 이유는 arrow function의 몇 가지 특성과 연관이 되기 때문에 따로 설명한다.

bind()

bind의 경우에는 this를 bind한 새로운 함수를 생성한다.
따라서 실행 context를 제어할 수 있다.
아래는 mdn에서 나오는 예제를 조금 변형을 해보았다.

const x = 2;

const getX = function (a,b,c,d,e,f) {
  console.log('getX params', a,b,c,d,e,f);
  console.log('getX x:', x, ' this.x: ', this.x, ' this:', this);
};

const module = {
    x: 3,
    getX: getX
};

getX(1,2,3);
module.getX(1,2,3);
getX.bind({ x: 4 }, 1,2,3)(4,5,6);
module.getX.bind({x:5}, 1,2,3)(4,5,6);

위의 테스트를 실행해보고 결과를 각각 살펴보자.

1. params에서 bind에서 넘긴 값이 나온다?
   • 해당 부분은 bind함수의 spec이다. this 뒤에 나오는 argument들을 앞 쪽에 인수로 넘길 수 있다.
2. bind 하지 않은 경우 this.x를 확인했더니 undefined가 나온다.
   • this는 현재 해당하는 context를 의미한다. 하지만 해당하는 context가 global이기 때문에 window로 잡힌다.
3. arrow function으로 실행할 경우 bind를 해도 this.x가 잡히지 않는다.
   • arrow function의 경우에는 따로 this를 가지지 않는다. 따라서 bind를 하게 되어도 this가 undefined로 나누게 된다.

call(), apply()

bind()는 새롭게 this를 binding한 함수를 생성해준다면,
call(), apply()의 경우에는 this를 받아서 바로 함수를 실행하는 형태이다.
call은 parameter를 분리해서 넣어주지만 apply()의 경우에는 array 형태로 넣어주는 차이만 존재한다.

const x = 3;

const getX = function (a,b,c,d,e,f) {
  console.log('getX params', a,b,c,d,e,f);
  console.log('getX x:', x, ' this.x: ', this.x, ' this:', this);
};

getX.call({x: 3}, 1,2,3,4,5,6)
getX.apply({x: 3}, [1,2,3,4,5,6])

function vs arrow function

위의 bind 예제 및 this를 통해서 해당 context를 알았을 것이다.
그렇다면 위와 똑같지만 함수를 arrow function으로 지정해서 결과를 보자.

const x = 2;

const getX = (a,b,c,d,e,f) => {
  console.log('getX params', a,b,c,d,e,f);
  console.log('getX x:', x, ' this.x: ', this.x, ' this:', this);
};

const module = {
    x: 3,
    getX: getX
};

getX(1,2,3);
module.getX(1,2,3);
getX.bind({ x: 4 }, 1,2,3)(4,5,6);
module.getX.bind({x:5}, 1,2,3)(4,5,6);

차이가 바로 보이는가?
bind를 해주고 module을 통해서 context를 선언해줘도, this.x가 잡히지 않는다.
arrow function의 경우에는 this가 따로 잡히지 않기 때문이다.

즉, arrow function은 bind을 해주어도 execution context를 찾을 수 없는 형태라고 보면 된다.

결론

• arrow function은 this context를 가지지 않는다. ( 간단.. )

출처

• execution context
• bind
• call
• apply
• medium blog
• MDN arrow function