자바 스크립트(java script)/개념 조각

✨ 화살표 함수와 일반 함수의 변환

lamarcK 2025. 3. 29. 17:40

const set = (id, od) => {}와 같은 **화살표 함수(Arrow Function)**는 일반 함수(Regular Function) 형태로 문법적으로 변환할 수 있다.

📌 일반 함수 형태로 변환

원래의 화살표 함수 : const set = (id, od) => {}

일반 함수 표현식(Function Expression) : const set = function(id, od) {}

함수 선언문(Function Declaration) 형태 : function set(id, od) {} 

이 경우 호이스팅(Hoisting) 동작이 달라진다.

  • 참고: 함수 선언문은 코드가 실행되기 전에 호이스팅되어 스코프 최상단으로 끌어올려지지만, const로 선언된 변수에 할당된 함수 표현식은 변수 선언 자체는 호이스팅되더라도 실제 함수 할당은 해당 라인에서 이루어지므로 동작 방식에 차이가 있다. 일반적으로 const를 사용할 때는 함수 표현식 형태가 더 일관성 있다.

⚠️ 중요한 차이점: 단순 문법 변환 이상의 의미

매우 중요: 단순히 문법 모양만 바꿀 수 있다고 해서 두 함수가 완전히 동일하게 동작하는 것은 아니다. 화살표 함수와 일반 함수는 특히 this 처리 방식에서 결정적인 차이를 가진다.

  1. this 바인딩 (Binding):
    • 화살표 함수: this 값을 자체적으로 가지지 않는다. 대신, 함수가 **선언된 시점의 외부 렉시컬 스코프(Lexical Scope)**의 this 값을 그대로 물려받아 사용한다. 한번 결정된 this는 변경되지 않는다.
    • 일반 함수: 함수가 어떻게 호출되었는지에 따라 this 값이 동적으로 결정된다. (예: 객체의 메소드로 호출, new 키워드로 호출, call/apply/bind로 명시적 지정, 단순 함수 호출 등)
  2. arguments 객체:
    • 화살표 함수: arguments 객체를 가지지 않는다. 가변 인자를 사용하려면 나머지 매개변수(Rest Parameters) (...args)를 사용해야 한다.
    • 일반 함수: 함수에 전달된 모든 인수를 담고 있는 유사 배열(Array-like) 객체arguments를 사용할 수 있다.
  3. 생성자(Constructor) 사용:
    • 화살표 함수: new 키워드와 함께 사용하여 객체를 생성하는 생성자로 사용할 수 없다. (TypeError 발생)
    • 일반 함수: 생성자 함수로 사용될 수 있다.

💾 결론

  • const set = (id, od) => {}는 const set = function(id, od) {} 형태로 문법 변환이 가능하다.
  • 하지만 this 바인딩 방식, arguments 객체 유무, 생성자 사용 가능 여부핵심적인 동작 방식에 차이가 있다.
  • 따라서 단순히 문법만 보고 변환하기보다는, 해당 함수가 어떤 목적으로 사용되고 어떤 this 동작을 기대하는지에 따라 적절한 함수 형태를 선택해야 한다. 특히 콜백 함수나 메소드 내부에서 외부 스코프의 this를 그대로 사용하고 싶을 때 화살표 함수가 유용하다.