function vs ()=>{}

일반 함수 vs 화살표 함수.

일반 함수의 경우 this 바인딩이 함수 호출 시점에서 결정된다.

화살표 함수는 Lexical Scope ( 상위 스코프 ) 의 this를 따른다.

아래 코드를 보자

let babo={
  name:'babo',
  say:function(){
    console.log(this.name);
  },
  say2:()=>{
    console.log(this.name);
  }
}

babo.say();
babo.say2();

say는 일반 함수, say2는 화살표 함수이다.

say 일반함수는 객체 babo에 의해서 호출되었기 때문에 babo가 this에 바인딩 된다.

say2의 경우 say2가 선언된 시점의 lexicalScope 즉, window가 this에 바인딩 되어 name을 찾을 수 없다고 나올 것이다.

다음 아래 예시 코드를 보자

let babo = {
  name:'babo',
  say:function(){
    setTimeout(function(){
      console.log(this.name);
    },1000);
  },
  say2:function(){
    setTimeout(()=>{
      console.log(this.name);
    },1000);
  }
}

위 코드의 경우 say 함수의 경우 function이 호출되는 시점은

JS의 비동기 큐에서 대기후, window에 의해 호출되는 시점일것이다. 따라서 this에 babo가 아닌 , window가 바인딩되어있다.

반대로 say2의 경우

화살표 함수가 setTimeout에 바인딩 되어있는데, 이 스코프의 한단계 위 스코프인 say2 function()
의 this를 화살표 함수가 상속받아 정상적으로 babo를 출력하게 된다.

정리

function(){} : this가 호출시 정해짐
()=>{} : this는 자기 자신보다 한단계 위의 스코프 , lexical Scope를 따라감

메소드는 , 객체 리터럴 패턴 , prototype에서 this를 사용하는 메소드는 function(){}을 사용하고

function(){} 내부에서 콜백용도로 사용되는 함수는 화살표 함수를 쓰는게 좋다.