Arrow function 과 일반 function 의 this

Es6가 나오면서 새로운 함수형이 나오게 되었는데 바로 Arrow function 즉 화살표 함수가 새로 등장하게 되었다. 

 

기존 함수의 역할을 기본적으로 대체할 수 있으며 가독성과 작성하기도 편해서 주로 많이들 사용하곤 한다. 

 

근데 화살표 함수가 일반함수의 모든것을 대체할 수는 없다. 

 

특히나 this를 사용하게 되었을 때 화살표함수와 일반 함수가 가리키는 this가 다르다 

 

아래 예제를 한번 보자.

 

function BlackDog(){
this.name = "흰둥이";
return {
name : "검둥이",
bark : function(){
console.log(this.name + " : 멍멍");
}
}
}

const blackDog = new BlackDog();
blackDog.bark();

위의 함수는 일반 함수로 bark라는 함수를 호출했다 결과는 어떻게 될까? 

 

결과는 검둥이 : 멍멍 을 호출하게 된다. 

 

그럼 다음 예제를 보자

 

function BlackDog(){
this.name = "흰둥이";
return {
name : "검둥이",
bark : () => {
console.log(this.name ": 멍멍")
}
}
}

const blackDog = new BlackDog();
blackDog.bark();

위의 예제의 결과는 

 

흰둥이 : 멍멍 이 나오게 된다. 

 

즉 일반 함수와 화살표함수에서의 this가 가리키는 값들이 서로 다르다는 것을 알수있다.

 

정리를 하자면 일반함수의 this는 자신이 종속된 객체에 접근하게되고

화살표함수의 this는 자신이 종속된 인스턴스를 가리키게 된다. 

 

컴포넌트를 형성함에 있어서는 두개의 형태가 큰 차이점은 없지만 일반 함수로서의 역할에서 두개가 서로 용도가 다르게 사용된다라는 것을 알 수있다.