[JavaScript] 화살표 함수(Arrow Function)와 this 바인딩

화살표 함수(Arrow Function)

화살표 함수는 변수에 함수를 저장하여 함수처럼 사용할 수 있는 방법이다.

function sayHi(){
    console.log("Hi");
}

 

위와 같은 형태의 함수를 화살표 함수로 바꾸면,

const sayHi = ()=>{
    console.log("Hi");
}

 

위처럼 변한다.

 

화살표 함수도 "함수" 라는 명칭을 가지고 있기 때문에 그냥 함수처럼 사용하면 된다고 생각하는 사람이 많을 거 같다.

하지만 함수처럼 모든 곳에 사용할 수 있는 건 아니다.

 

그 이유는 화살표 함수(Arrow Function)의 this 바인딩과 관련있다.

 

일반적인 함수는 this를 기본적으로 가지고 있다.

따라서 이 this를 함수에서 출력한다면 아래처럼 나타날 것이다.

function a(){
    console.log(this);
}


a();

 

결과

 

위처럼 함수 자신에 대한 내용들이 출력된다.

 

하지만, 위 함수를 똑같이 화살표 함수(Arrow Function)을 사용하여 작성해보면 결과는 달라진다.

const b = ()=>{
    console.log(this);
}

b();

 

결과

분명 위의 일반적인 함수처럼 관련된 내용이 출력되어야 하는데, 화살표 함수(Arrow Function)을 사용한 경우에는 this가 아무것도 적혀있지 않다.

 

그 이유는 화살표 함수(Arrow Function)이 this를 가지고 있지 않기 때문이다.

 

일반적인 함수와 화살표 함수의 this 바인딩의 차이점은 아래와 같다.

 

 

일반적인 함수

• 동적 바인딩
• this가 존재하지만 상황에 따라 this 값이 다름
• 메소드로 호출되는 경우와 함수 자체로 호출되는 경우의 this 값이 다름

 

화살표 함수

• 정적 바인딩
• 기본적으로 this가 존재하지 않기 때문에 상위 환경에서의 this를 참조

 

 

화살표 함수를 사용하면 안되는 경우는 아래와 같다.

 

화살표 함수를 메소드로 사용하는 경우

const Love = {
    say : "I love you!",
    sayIt:()=>{
        console.log(this.say);
    }
}

Love.sayIt();

 

객체 내부의 함수로 화살표 함수를 사용한다면 this는 그 객체 내부함수 자신을 가리키는 것이 아닌 상위 환경의 this를 참조하기 때문에 멤버변수의 값을 불러오지 못한다.

 

결과로 I love you! 가 아닌 undefined가 출력된 모습을 확인할 수 있다.

 

화살표 함수를 생성자 함수로 사용하는 경우

const Love = ()=>{};
const love = new Love();

 

생성자 함수로 화살표 함수를 사용한다면 에러가 발생한다.

 

 

 

 

 

위의 내용들만 본다면 화살표 함수를 사용하면 안된다는 이야기 같다.

하지만 요점은 화살표 함수를 사용해야한다는 것이다.

 

일반적인 함수를 사용하면 동적으로 this를 바인딩하기 때문에 오류가 발생할 가능성이 높아지는 반면,

화살표 함수를 사용한다면 정적 바인딩으로 우리가 원하는 값에 보다 간편하게 접근할 수 있다.

 

결론적으로, 메소드, 생성자 함수, 콜백함수 이 세가지를 제외한 상황에서는 화살표 함수를 사용하는 것을 권장한다.