JS ES6 - Arrow Function (2)

ES6에 추가된 화살표 함수를 이용하면 기존의 함수보다 훨씬 간결하고 깔끔하게 함수를 표현할 수 있다.

지난 포스트에서 화살표 함수의 대략적인 특징을 알아보았다.

하지만 화살표 함수를 사용함에 있어서 가장 주의해야 할 점이 남았다.

화살표 함수를 사용하지 못하는 경우

다음의 경우에는 화살표 함수를 사용하지 못한다.

• 객체의 메소드 정의

• prototype에 메소드 할당

• 생성자 함수

  

'이전 포스트만 보면 화살표 함수가 간결하고 좋아보였는데 왜 사용하지 말라는거지?'

그 이유는 아래와 같다.

화살표 함수와 this 바인딩

화살표 함수에는 this가 애초에 존재하지 않는다.
아래의 코드를 살펴보자.

// function
const obj1 = {
  temp:'this is object!',
  displayName: function() {
    console.log(this.temp);
  }
}
obj1.displayName();  // this is object!


// arrow function
const obj2 = {
  temp:'this is object!',
  displayName: () => {
    console.log(this.temp);
  }
}
obj2.displayName();  // undefined

일반적인 함수는 this 키워드를 인식하여 객체 내부의 temp를 찾아 출력하였다.
하지만 화살표 함수는 this를 인식하지 못해 객체 내부의temp를 찾지 못하고 undefined를 출력하였다.

그럼 화살표 함수에서 this를 사용하면 아무것도 찾지 못하는 것일까?

window.temp = 'this is global!'

const obj = {
  temp:'this is object!',
  displayName: () => {
    console.log(this.temp);
  }
}

obj.displayName();  // this is global!

displayName은 스코프 체인을 통해 window 객체(클라이언트 측 전역 객체)의 temp에 할당된 문자열을 콘솔에 출력하게 된다.

위 예시들을 통해 화살표 함수의 스코프는 기존 함수에서의 this 바인딩과는 다르게 호출이 아닌 선언할 때 결정되는 정적 스코핑의 그것과 비슷하게 동작함을 알 수 있다.

즉, 화살표 함수의 this는 언제나 상위 스코프의 변수를 가르키게 된다.