목차

1. 애로우 함수 소개
2. 애로우 함수에서의 this 바인딩
3. 정리

1. 애로우 함수 소개

애로우 함수는 함수를 간결하게 작성할 수 있는 화살표(=>) 문법을 사용한 함수 선언 방식입니다. 예를 들어, 기존의 함수 선언 방식이 아래와 같이 작성되는 것에 비해

function add(a, b) {
  return a + b;
}

애로우 함수는 아래처럼 작성됩니다.

const add = (a, b) => a + b;

매개변수가 하나뿐이거나, 함수 본문이 단일 표현식인 경우 괄호와 return 문을 생략할 수 있어 코드가 간단해집니다.

2. 애로우 함수에서의 this 바인딩

일반 함수에서의 this는 함수를 호출한 객체에 바인딩되지만, 애로우 함수에서의 this는 함수가 정의된 곳의 this에 바인딩됩니다. 이것을 활용하여 this를 유지하고 싶을 때 유용하게 쓰일 수 있습니다. 예를 들어,

function Counter() {
  this.count = 0; // this는 Counter에 바인딩됨
  setInterval(function() {
    this.count++; // this는 window에 바인딩됨 (브라우저 환경 기준)
  }, 1000);
}

위와 같은 경우, 일반 함수 내부의 this는 원하는 대로 동작하지 않습니다. 하지만, 애로우 함수를 사용하면 this가 바인딩되는 위치가 달라져 의도한 바와 일치하게 됩니다.

function Counter() {
  this.count = 0; // this는 Counter에 바인딩됨
  setInterval(() => {
    this.count++; // this는 Counter에 바인딩됨
  }, 1000);
}

3. 정리

애로우 함수에서의 this 바인딩은 일반 함수와 다르게 작동하며, 함수가 정의된 곳의 this에 바인딩됩니다. 이러한 특성을 활용하면 함수 내부에서의 this 관련 문제를 간단히 해결할 수 있으므로, 적재적소에 활용하면 유용하게 사용할 수 있습니다.

이상으로 애로우 함수에서의 this 바인딩에 대한 내용을 알아보았습니다. 이 특성을 잘 활용하여 다양한 상황에 유용하게 활용해 보시기 바랍니다.