지난 몇 년 동안, 자바스크립트에서 함수를 정의하는 데에 있어 화살표 함수가 많이 사용되고 있습니다. 화살표 함수는 ES6(ES2015)에서 도입되었으며, 일반 함수와는 몇 가지 중요한 차이점이 있습니다. 이번 포스트에서는 화살표 함수와 일반 함수의 주요 차이점을 살펴보겠습니다.

1. 문법적 차이점

일반 함수

function regularFunction(param1, param2) {
  // 함수 본문
  console.log(param1 + param2);
}

화살표 함수

const arrowFunction = (param1, param2) => {
  // 함수 본문
  console.log(param1 + param2);
}

일반 함수를 정의할 때에는 function 키워드를 사용하지만, 화살표 함수는 => 기호를 사용하여 정의됩니다. 또한, 화살표 함수는 function 키워드 대신 =>를 사용하기 때문에 더 간결한 문법을 갖고 있습니다.

2. this 바인딩

일반 함수

일반 함수는 호출될 때마다 동적으로 this 값을 바인딩합니다. 함수가 어떻게 호출되었느냐에 따라 this의 값이 달라질 수 있습니다.

화살표 함수

화살표 함수는 자신만의 this 바인딩을 가지지 않고, 주변 범위의 this를 상속받습니다. 따라서, 화살표 함수 내에서 this를 사용할 때에는 함수를 감싸고 있는 범위의 this를 참조하게 됩니다.

const obj = {
  name: 'John',
  sayHello: function() {
    setTimeout(function() {
      console.log('Hello ' + this.name); // 일반 함수 내에서의 this
    }, 1000);

    setTimeout(() => {
      console.log('Hello ' + this.name); // 화살표 함수 내에서의 this
    }, 1000);
  }
};

obj.sayHello();

위 예제에서 첫 번째 setTimeout 함수는 일반 함수를 사용하고 있기 때문에 setTimeout 함수의 내부에서의 this는 window 객체를 가리킵니다. 하지만 두 번째 setTimeout 함수는 화살표 함수를 사용하고 있기 때문에 obj 객체를 가리킵니다.

3. arguments 객체

일반 함수

일반 함수는 arguments 객체를 사용하여 함수에 전달된 인자들에 접근할 수 있습니다.

화살표 함수

화살표 함수는 arguments 객체를 가지고 있지 않습니다. 화살표 함수 내에서 arguments를 사용하면 주변 범위의 arguments를 참조하게 됩니다.

function regularFunction() {
  console.log(arguments);
}

const arrowFunction = () => {
  console.log(arguments); // ReferenceError: arguments is not defined
}

regularFunction(1, 2, 3);
arrowFunction(1, 2, 3);

위 예제에서 regularFunction은 일반 함수이기 때문에 arguments 객체에 접근할 수 있습니다. 하지만 arrowFunction은 화살표 함수이기 때문에 arguments 객체를 참조할 수 없습니다.

결론

화살표 함수와 일반 함수는 몇 가지 중요한 차이점을 가지고 있습니다. 화살표 함수는 더 간결한 문법을 제공하고, this와 arguments 바인딩이 다르게 동작하는 등의 차이점이 있습니다. 어떤 함수를 사용할지는 개발자의 판단에 따라 달라질 수 있으며, 상황에 맞게 적절히 선택하는 것이 중요합니다.