[JavaScript] Arrow Function vs Declare Function

()=> {...} 과 function foo(){...} 은 단순히 텍스트의 길이의 차이만 있는 것은 아니다.

해당 함수를 instance 로써 사용할 때 차이점이 드러나게 된다.

this pointer의 가리키는 위치가 서로 다른데

()=>{...} 에서 this는 자신이 속한 instance를 pointing한다.

그러나 function foo(){...} 에서는 자신이 속한 object를 pointing한다

function foo1(){

this.val= 1;

return {

val: 2,

func: function (){

console.log(this.val);

}

};

}

function foo2(){

this.val= 1;

return{

val: 2,

func: ()=>{

console.log(this.val);

}

};

}

let decFunc= new foo1();

let arrowFunc= new foo2();

//2

decFunc.func();

//1

arrowFunc.func();

이것을 모르는 상태에서 다음과 같은 구조의 instance를 만들어 사용한다면... 버그를 잡는건 거의 불가능할 것이다...