Arrow Function(화살표 함수) Node.js

정하람·2025년 1월 18일

Node.js (TS)

목록 보기
2/3

함수 선언 방식과 화살표 함수의 차이점

자바스크립트에서 함수를 작성하는 방법은 크게 두 가지로 나뉩니다.

전통적인 함수 선언 방식화살표 함수(Arrow Function) 입니다.

이 두 가지 방식은 기능적으로 유사하지만, 문법적 차이와 동작 방식의 차이로 인해 사용 목적과 상황에 따라 적합성이 다릅니다.

성능적인 측면에서 미세한 차이가 존재할 수는 있다. 이 두 가지 방식의 차이점을 비교해 보겠습니다.


1. 함수 선언 방식 (Function Declaration)

function add(a, b) {
  return a + b;
}

특징

  • 호이스팅(Hoisting): 함수 선언 방식은 호이스팅이 발생합니다. 이는 함수 정의가 코드 작성 위치에 상관없이 스코프의 최상단으로 끌어올려지기 때문에, 함수 선언 이전에도 호출할 수 있습니다.
    console.log(add(3, 4)); // 7
    function add(a, b) {
      return a + b;
    }
  • this 바인딩: 함수 선언 방식에서 this는 호출 컨텍스트에 따라 동적으로 바인딩됩니다. 이는 객체 메서드나 일반 함수로 호출될 때 동작이 달라질 수 있음을 의미합니다.
    function test() {
      console.log(this); // 호출 문맥에 따라 달라짐. 클래스 메소드라면 객체 반환
    }
    test(); // 전역 객체를 참조

2. 화살표 함수 (Arrow Function)

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

특징

  • 호이스팅 없음: 화살표 함수는 변수에 할당되는 형태로 정의되므로, 호이스팅되지 않습니다. 함수 선언 이전에 호출하려고 하면 오류가 발생합니다.
    console.log(add(3, 4)); // ReferenceError: Cannot access 'add' before initialization
    const add = (a, b) => {
      return a + b;
    };
  • this 바인딩: 화살표 함수는 this를 바인딩하지 않습니다. 따라서 화살표 함수 내부의 this는 외부 컨텍스트의 this와 동일한 값을 유지합니다. 이로 인해 객체 메서드에서 화살표 함수를 사용할 경우, 의도한 동작을 하지 않을 수 있습니다.
    const obj = {
      value: 10,
      regularFunction: function () {
        console.log(this.value); // 10
      },
      arrowFunction: () => {
        console.log(this.value); // undefined (외부 컨텍스트의 this 사용)
      },
    };
    
    obj.regularFunction(); // 10
    obj.arrowFunction();   // undefined

3. 성능 비교

  • 호이스팅 차이: 함수 선언 방식은 초기화 시점에 미리 로드되기 때문에 함수 호출 위치에 영향을 받지 않습니다. 반면, 화살표 함수는 선언 이후에만 호출이 가능하므로 실행 흐름에 약간의 차이가 있을 수 있습니다.
  • 최적화: 최신 자바스크립트 엔진에서는 두 방식 모두 최적화가 잘 되어 있어, 일반적인 사용에서는 성능 차이가 거의 없습니다. 다만, 함수 선언 방식은 오래된 문법으로 엔진이 더 오랜 시간 최적화를 진행해 왔기 때문에 특정 상황에서 미세한 차이가 있을 수 있습니다.
  • 사용 목적: 성능보다 더 중요한 점은 문법적 간결함과 적합성입니다. 화살표 함수는 간결한 문법과 외부 컨텍스트의 this를 유지하는 특성 덕분에 클로저 기반의 콜백 함수나 간단한 연산에 적합합니다.

4. 결론

  • 함수 선언 방식:
    • 호이스팅이 필요한 경우.
    • 동적으로 바인딩된 this가 필요한 경우.
    • 객체 메서드나 클래스 메서드에 적합.
  • 화살표 함수:
    • 간결한 문법이 필요한 경우.
    • this가 외부 컨텍스트에 고정되어야 하는 경우.
    • 콜백 함수 또는 간단한 연산에 적합.

0개의 댓글