화살표 함수의 특징과 사용을 피해야 할 때

 

화살표 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 표현식이다.

 

기존의 함수 선언문과 함수 표현식에 비해 간결하고 몇 가지 특징이 있다.

 

const add = (a, b) => {
  return a + b;
};

 

 

특징

 

1) 간결한 문법
화살표 함수는 함수 표현식을 간결하게 작성할 수 있도록 한다. 함수가 간단한 경우 중괄호와 return 키워드를 생략할 수 있다.

// 일반 함수 표현식
const multiply = function(a, b) {
  return a * b;
};

// 화살표 함수
const multiplyArrow = (a, b) => a * b;

 

 

2) this 바인딩

화살표 함수는 자신만의 'this'를 생성하지 않고 외부 스코프의 'this'를 그대로 사용한다. 이로 인해 화살표 내부에서 'this'가 동적으로 바뀌지 않는다.

function Counter() {
  this.value = 0;

  setInterval(() => {
    this.value++;
    console.log(this.value);
  }, 1000);
}

const counter = new Counter();

 

 

3) 단일 표현식 축약

함수 몸체가 단일 표현식인 경우, 중괄호와 'return'을 생략할 수 있다.

// 일반 함수 표현식
const square = function(x) {
  return x * x;
};

// 화살표 함수 축약
const squareArrow = x => x * x;

 

 

4) 매개변수가 하나인 경우 괄호 생략

매개변수가 하나인 경우 괄호를 생략할 수 있다.

// 일반 함수 표현식
const logMessage = function(message) {
  console.log(message);
};

// 화살표 함수 축약
const logMessageArrow = message => console.log(message);

 

 

5) arguments 객체의 부재

화살표 함수는 자체의 arguments객체를 가지고 있지 않아 화살표 함수 내부에서 arguments를 사용할 수 없다.

 

 

화살표 함수는 콜백 함수나 간단한 익명 함수 등 간결한 함수 표현에 적합하다. 

 

 

 

화살표 함수 사용을 피해야 하는 경우들

 

1) 메소드 함수로의 사용

화살표 함수는 외부 스코프의 this를 사용하기 때문에 객체의 메소드로 사용될 때 외부 스코프에 바인딩 된다.

const obj = {
  value: 42,
  getValue: () => {
    console.log(this.value); // 'this'는 obj가 아닌 외부 스코프에 바인딩됨
  }
};

obj.getValue(); // 출력: undefined (또는 외부 스코프의 value 값)

 

- 메소드 함수에서 객체 내의 속성이나 다른 메소드에 접근해야 하는 경우, 일반 함수 표현식이나 메소드 축약 표현이 더 적절하다.

 

 

2) 생성자 함수로의 사용

생성자 함수는 new 키워드와 호출되어 새로운 객체를 생성하는 목적으로 사용되는데 화살표 함수는 자체의 this를 가지지 않기 때문에 생성자 함수로 사용하면 안된다.

const Example = () => {
  this.value = 42; // 에러: 화살표 함수는 'this'를 가지지 않음
};

const instance = new Example(); // TypeError: Example is not a constructor