[2019.04.17] ES6 문법 - arrow Function과 일반 function의 차이

S6에서 arrowFunction 방식으로 함수를 선언할 수 있다고, 그냥 쓰게 되면 된 통 당한다...

똑같이 함수를 선언하는 방식이긴 하지만 동작하는 기능이 다른 한가지가 있다.

그렇게 공부해도 이해하기 어려운....엄청나게 동적으로 움직이는 그것...

이 빌어먹을 녀석..this

arrow function과 function의 차이는 this의 움직임이 다르다..

# ES5 에서의 this의 움직임

function callFunc(){
  return {
    foo : 25,
    bar : function(){
      console.log(this.foo);
    }
  }
}

callFunc.call({foo:100}).bar(); // 25

위 코드에서 ,callFunc를 {foo:100} 으로 바인딩을 해주고 호출을 하였다. bar 함수 실행으로 콘솔로그를 찍으니 값이 25가 나온다.

왜 그럴까? ES5 function 안의 this는 자신을 가장 마지막으로 품고 있는 scope로 항상 변한다. 

# Arrow Function에서의 this의 움직임

function callFunc(){
  return {
    foo : 25,
    bar : () => {
      console.log(this.foo);
    }
  }
}

callFunc.call({foo:100}).bar(); // 100

그러나 arrow Function은, 처음 바인딩 된 스코프 안에서 가리키는 this가 절대 변하지 않는다.

 

리액트에서 많이 조심해야 한다...