모던 JS 토크: 화살표 함수

Source: Dev.to

개요

• ES2015에서 도입된 새로운 문법
• 일반 함수 표현식보다 짧음
• this 값을 렉시컬하게 바인딩하여 컨텍스트 이해가 쉬워짐
• 항상 익명 함수를 생성함

=> 로 작성되는 화살표 함수 표현식의 핵심 특징은 this 값을 렉시컬하게 바인딩한다는 점입니다.

기본 문법

전통적인 함수 표현식

const foo = function() {
  console.log(this);
};

foo();

화살표 함수 등가 표현

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

foo();

매개변수 규칙

• 인수가 없을 때 – 괄호가 필요합니다.
• 인수가 하나일 때 – 괄호는 선택 사항입니다.

// 인수가 없음
const foo = () => {
  console.log(this);
};

foo();

// 인수가 하나 (괄호 선택적)
const foo = value => {
  console.log(value);
};

foo('Hello!');

즉시 실행 화살표 함수

(() => {
  console.log('Hello!');
})();

주의: this 바인딩

화살표 함수는 주변 렉시컬 스코프에서 this를 상속받습니다. 객체 메서드로 사용할 경우 예상치 못한 결과가 발생할 수 있습니다.

const objA = {
  value: 'foo! foo!',
  sayHi: function() {
    console.log(this.value);
  }
};

objA.sayHi(); // → 'foo! foo!'

const objB = {
  value: 'bar! bar!',
  sayHi: () => {
    console.log(this.value);
  }
};

objB.sayHi(); // → undefined (또는 전역 객체의 값)

objA에서는 this가 객체 자체를 가리키지만, objB에서는 화살표 함수가 외부 this(대개 전역 객체)를 캡처하므로 this.value가 objB.value를 가리키지 않습니다.

Vue.js나 React와 같은 프레임워크를 사용할 때 this가 어떻게 바인딩되는지 이해하면 코드를 더 명확하고 유지보수하기 쉬워집니다.

참고 자료

• MDN – this
• MDN – Arrow Functions