자바스크립트에서 화살표 함수와 익명 함수는 서로 다른 실행 컨텍스트를 갖고 있습니다. 이러한 차이를 이해하면 함수를 사용할 때 발생할 수 있는 문제를 방지하고 더 나은 코드를 작성하는 데 도움이 됩니다.

화살표 함수와 익명 함수의 정의

익명 함수

익명 함수는 함수 표현식을 사용하여 이름을 붙이지 않고 정의되는 함수입니다. 예를 들어, 다음과 같이 사용될 수 있습니다.

let myFunction = function() {
  // 함수 내용
};

화살표 함수

화살표 함수는 => 연산자를 사용하여 정의되는 익명 함수의 형태 중 하나입니다. 간단한 문법으로 함수를 정의할 수 있어 다음과 같이 사용됩니다.

let myArrowFunction = () => {
  // 함수 내용
};

실행 컨텍스트의 차이

익명 함수의 실행 컨텍스트

익명 함수는 호출될 때마다 새로운 실행 컨텍스트를 생성합니다. 이로 인해 매번 새로운 변수 환경과 this 값을 갖게 됩니다.

화살표 함수의 실행 컨텍스트

화살표 함수는 자신의 this 값을 갖지 않고, 자신을 감싸는 함수의 this 값을 물려받습니다. 또한 화살표 함수는 자신의 실행 컨텍스트를 생성하지 않고 외부에서 변수 환경을 그대로 사용합니다.

예제

다음은 실행 컨텍스트 차이를 보여주는 예제 코드입니다.

class ContextExample {
  constructor() {
    this.name = "Context Example";
  }

  regularFunction() {
    setTimeout(function() {
      console.log(this.name); // this가 ContextExample 객체를 가리키지 않음
    }, 1000);
  }

  arrowFunction() {
    setTimeout(() => {
      console.log(this.name); // this가 ContextExample 객체를 가리킴
    }, 1000);
  }
}

let example = new ContextExample();
example.regularFunction(); // 출력: undefined
example.arrowFunction(); // 출력: Context Example

이 예제에서 regularFunction은 익명 함수를 사용했기 때문에 this가 ContextExample 객체를 가리키지 않습니다. 반면에 arrowFunction은 화살표 함수를 사용했기 때문에 this가 올바르게 동작합니다.

이처럼 화살표 함수와 익명 함수는 실행 컨텍스트 측면에서 중요한 차이를 가지고 있으며, 상황에 맞게 적절히 사용해야 합니다.

참고자료:

• MDN Web Docs - 화살표 함수
• MDN Web Docs - 함수 표현식

위와 같이, 자바스크립트에서 화살표 함수와 익명 함수는 서로 다른 실행 컨텍스트를 갖고 있습니다. 이를 이해하면 함수를 사용할 때 발생할 수 있는 문제를 방지하고 더 나은 코드를 작성하는 데 도움이 됩니다. 만약 화살표 함수와 익명 함수의 실행 컨텍스트 차이를 자세히 이해하고 싶다면, 위의 내용을 참고해보세요.