만족

[JavaScript] Arrow Function vs Declare Function 본문

[JavaScript] Arrow Function vs Declare Function

Nodejs Satisfaction 2018. 12. 28. 02:41

()=> {...} 과 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를 만들어 사용한다면... 버그를 잡는건 거의 불가능할 것이다...



Comments