arrow function과 function 차이

ES5에서 this의 움직임

    function test(){
      return {
        rs : 25,
        bar : function(){
          console.log(this.rs);
        }
      }
    }
    
    test.call({rs:100}).bar(); // 25

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

 

Arrow Function에서의 this의 움직임

 

    function test(){
      return {
        rs : 25,
        bar : () => {
          console.log(this.rs);
        }
      }
    }
    
    test.call({rs:100}).bar(); // 100

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

 

차이점

 

1.

화살표 함수와 기존의 일반함수는 this가 다른 곳을 가리킵니다.
화살표 함수의 this는 바로 상위 스코프의 this와 같습니다. 하지만 기존의 일반함수는 this가 동적으로 바인딩됩니다.

 

2.

일반함수는 생성자 함수로 사용할 수 있지만, 화살표 함수는 생성자 함수로 사용할 수 없습니다.
화살표 함수는 prototype 프로퍼티를 가지고 있지 않기 때문입니다.

 

3.

일반함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용할 수 있었지만, 화살표 함수에서는 arguments 변수가 전달되지 않습니다.