[ JavaScript ] Arrow Function ( 화살표 함수 )

화살표 함수 ( Arrow Function )

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function) 의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

화살표 함수란 ES6 에서 처음 생긴 문법으로, 함수를 정의하는 방식 중 하나이다.

화살표를 선언해서 함수를 표현하는 방식이라 화살표 함수라는 이름이 붙여졌다.

// Function Expression
const add = function (a, b) {
  return a + b;
};
// Arrow Function
const add = (a, b) => a + b;

함수 표현식 보다 간단하게 함수를 나타낼 수 있습니다.

이렇게 간단하고 간결하게 표현되는데 어디서나 사용가능한 것은 아닙니다.

화살표 함수를 사용할 수 없는 경우

화살표 함수는 일반 함수와 다르게 익명성을 가지고 있기 때문에, 일부 함수에 대해 제한점이 생기게 됩니다.

어떤 상황에서 사용할 수 없는지 알아봅시다.

메소드를 정의할 때 ( This )

const obj = {
  name: "Lee",
  // 메소드를 정의할 때는 화살표 함수를 사용할 수 없습니다.
  sayHi: () => console.log(`Hi ${this.name}`),
};
obj.sayHi(); // Hi undefined

메소드로 정의한 화살표 함수 내부의 this 는 메소드를 호출한 객체를 가리키지 않고, 상위 컨텍스트인 전역 객체 window 를 가리키기 때문에, undefined 가 출력됩니다.

new 생성자

const Person = (name) => {
  this.name = name;
};
const me = new Person("Lee"); // TypeError: Person is not a constructor

화살표 함수는 생성자 함수로 사용할 수 없습니다.

call, apply, bind 메소드와 함께 함수를 호출할 때

const add = (a, b) => a + b;
// 화살표 함수는 call, apply, bind 메소드와 함께 호출할 수 없습니다.
add.call(null, 1, 2); // TypeError: add.call is not a function
add.apply(null, [1, 2]); // TypeError: add.apply is not a function
add.bind(null, 1, 2)(); // TypeError: add.bind is not a function

화살표 함수는 this 를 바인딩하지 않기 때문에, call, apply, bind 메소드와 함께 호출할 수 없습니다.

Prototype 메소드

const Person = (name) => {
  this.name = name;
};
Person.prototype.sayHi = function () {
  console.log(`Hi ${this.name}`);
};
const me = new Person("Lee"); // TypeError: Person is not a constructor

화살표 함수는 Prototype 메소드로도 지정할 수 없습니다.

Reference

• [MDN] 화살표 함수
• [Tistory] 자바스크립트 화살표 함수 완벽 정리
• [javascript.Info] 화살표 함수 다시 살펴보기