ES6의 화살표 함수와 익명 함수의 차이점

웹 개발을 배우는 여러분, ES6에서 소개된 화살표 함수(arrow functions)는 자바스크립트에서 함수를 더 간결하게 작성할 수 있게 해줍니다. 하지만, 이 화살표 함수가 기존의 익명 함수(anonymous functions)와 어떻게 다른지 궁금해하시는 분들이 많을 것 같아요. 오늘은 그 차이점을 명확하게 설명해 드리겠습니다.

익명 함수

익명 함수는 이름이 없는 함수입니다. 주로 이벤트 핸들러나 콜백 함수로 사용됩니다. 다음은 익명 함수의 예시입니다:

const sum = function(a, b) {
  return a + b;
};
console.log(sum(5, 10)); // 출력: 15

화살표 함수

ES6에서 도입된 화살표 함수는 더 간결한 문법으로 함수를 선언할 수 있습니다. 화살표(=>)를 사용해 표현합니다. 위의 익명 함수 예시를 화살표 함수로 바꾸면 다음과 같습니다:

const sum = (a, b) => a + b;
console.log(sum(5, 10)); // 출력: 15

화살표 함수는 몇 가지 중요한 차이점이 있습니다:

1. 문법의 간결성: 화살표 함수는 function 키워드 없이도 함수를 선언할 수 있어 코드가 더 간결해집니다.
2. this 바인딩: 화살표 함수는 자신만의 this를 생성하지 않습니다. 대신, 화살표 함수가 선언된 스코프의 this 값을 사용합니다. 이는 특히 콜백 함수에서 유용하게 사용됩니다.

this 바인딩 예시

익명 함수에서는 this가 예상과 다르게 작동할 수 있습니다:

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    this.age++;
  }, 1000);
}

위 코드에서 this.age++는 Person 객체의 age 속성을 증가시키지 않습니다. 왜냐하면 growUp 함수 내의 this는 Person 객체가 아닌 전역 객체를 가리키기 때문입니다.

화살표 함수를 사용하면 이 문제를 해결할 수 있습니다:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++;
  }, 1000);
}

이제 this.age++는 예상대로 Person 객체의 age 속성을 증가시킵니다. 화살표 함수는 자신이 선언된 함수의 this 값을 상속받기 때문입니다.

화살표 함수와 익명 함수의 차이점을 이해하면, 여러분의 코드를 더 간결하고 효율적으로 만들 수 있습니다. 웹 개발을 배우는 과정에서 이러한 차이점을 기억하고 적절히 활용해보세요!