[JavaScript] 함수표현식(Function Expression)이란?

 

함수 표현식 (Function Expression)란?

함수 표현식(Function Expression)은 함수를 변수에 할당하는 방식으로 정의하는 함수이다.
JavaScript에서는 함수를 값(value)처럼 다룰 수 있기 때문에, 변수에 할당하는 것이 가능하다.

 

1. 함수 표현식의 기본 형태

const greet = function() {
  console.log("Hello!");
};

greet(); // "Hello!"

위 코드에서 function() { console.log("Hello!"); }는 익명 함수(Anonymous Function)이며,
greet 변수에 저장된다. 이제 greet()를 호출하면 해당 함수가 실행된다.

 

2. 함수 표현식 vs 함수 선언문

비교 항목	함수 선언문 (Function Declaration)	함수 표현식 (Function Expression)
호이스팅(hoisting)	함수 전체가 호이스팅됨	변수만 호이스팅되고 함수 값은 할당되지 않음
이름(네이밍)	반드시 이름이 있어야 함	이름이 있을 수도, 없을 수도 있음
실행 가능 시점	선언 전에 호출 가능	선언 전에 호출 불가능 (TypeError)

📌 함수 선언문 예시

hello(); // "Hello!" (정상 실행)

function hello() {
  console.log("Hello!");
}

hello(); // "Hello!"

• 함수 선언문은 실행 전에 전체가 메모리에 저장되므로 선언보다 앞에서 호출 가능함.

📌 함수 표현식 예시

greet(); // ❌ TypeError: greet is not a function

var greet = function() {
  console.log("Hello!");
};

greet(); // "Hello!"

• var greet; 부분만 호이스팅되고, 함수 값 할당은 원래 코드 위치에서 수행되므로 선언 전에 호출할 수 없음.

 

3. 익명 함수 표현식 (Anonymous Function Expression)

익명 함수는 함수 이름 없이 function 키워드만 사용하여 정의하는 함수

const greet = function() {
  console.log("Hello!");
};
greet(); // "Hello!"

• 익명 함수는 greet 변수에 저장되므로, greet()를 호출해야 실행된다.

 

4. 기명 함수 표현식 (Named Function Expression, NFE)

기명 함수 표현식(NFE, Named Function Expression)은 함수에 이름을 부여한 함수 표현식

const greet = function sayHello() {
  console.log("Hello!");
};

greet(); // "Hello!"
sayHello(); // ❌ ReferenceError: sayHello is not defined

• sayHello()로 직접 호출할 수 없으며, 오직 greet()으로만 실행 가능.
• sayHello는 자기 자신을 참조할 때만 사용 가능 (재귀 함수 등에 유용).

 

5. 즉시 실행 함수 표현식 (IIFE - Immediately Invoked Function Expression)

즉시 실행 함수 표현식(IIFE)은 선언과 동시에 실행되는 함수

(function() {
  console.log("IIFE 실행!");
})();  // "IIFE 실행!"

• ()로 감싸진 함수가 즉시 실행됨.
• 한 번만 실행되며, 전역 변수 오염을 방지할 때 유용함.

✔️ 화살표 함수(Arrow Function)와 함께 사용 가능

(() => {
  console.log("Arrow IIFE 실행!");
})();

 

6. 화살표 함수 표현식 (Arrow Function Expression)

ES6에서 도입된 화살표 함수(Arrow Function)는 함수 표현식의 간결한 문법

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

• 함수 표현식의 한 형태이며, this 바인딩 방식이 다름.

✔️ 즉시 실행 함수(IIFE)로 사용 가능

(() => {
  console.log("Arrow IIFE 실행!");
})();

 

7. 콜백 함수와 함수 표현식

콜백 함수(Callback Function)는 다른 함수의 인자로 전달되는 함수 표현식

function process(callback) {
  callback();
}

process(function() {
  console.log("콜백 실행!");
}); // "콜백 실행!"

✔️ 화살표 함수로도 가능

process(() => console.log("콜백 실행!"));

 

8. 함수 표현식의 장점과 단점

✅ 장점

1. 보다 유연한 함수 사용 가능
   • const, let과 함께 사용하면, 재할당 방지 가능.
2. 익명 함수와 함께 사용 가능
   • 함수 선언문과 다르게 필요한 경우에만 정의하여 사용할 수 있음.
3. 콜백 함수, 이벤트 핸들러 등에 활용
   • setTimeout, addEventListener 등에 사용 가능.

❌ 단점

1. 호이스팅이 제한적
   • 선언 전에 사용할 수 없음 (TypeError 발생 가능).
2. 디버깅 어려움
   • 익명 함수 사용 시 스택 트레이스에서 함수 이름이 없어 디버깅이 어려울 수 있음.

 

9. 결론

📌 함수 표현식 정리

종류	특징	실행 가능 시점
익명 함수 표현식	이름 없이 function을 변수에 할당	선언 이후 가능
기명 함수 표현식	function에 이름 추가 (NFE)	선언 이후 가능 (함수 내부에서 자기 참조 가능)
즉시 실행 함수 (IIFE)	선언과 동시에 실행됨	즉시 실행됨
화살표 함수 표현식	간결한 문법, this 바인딩이 다름	선언 이후 가능

📌 기억할 핵심

1. 함수 표현식은 호이스팅 시 "변수만" 올라가고, 함수 값은 할당되지 않음.
2. 즉시 실행 함수(IIFE)는 한 번만 실행되며 전역 변수 오염 방지에 유용.
3. 콜백 함수, 이벤트 핸들러 등에 자주 사용됨.

---

✅ 결론: 함수 표현식은 let, const와 함께 사용하면 더 안전하고 직관적인 코드 작성이 가능하다! 🚀