함수 선언(function declaration)과 함수 표현식(function expression)의 차이점은 무엇인가요?

Question

IT Interview Practice · Accepted Answer

**선언**은 이름이 있는 함수 문(statement)이고, **표현식**은 함수를 변수에 할당하는 것입니다. 실질적인 차이는 **호이스팅**입니다.

```js
// 선언 — 완전히 호이스팅되어 정의 라인 이전에 호출 가능
declared();             // ✅ 동작함
function declared() { return "hi"; }

// 표현식 — 함수가 아니라 변수 바인딩만 호이스팅됨
expressed();            // ❌ TypeError: expressed is not a function
var expressed = function () { return "hi"; };
```

## 왜 차이가 나는가

함수 선언은 **본문과 함께** 호이스팅되므로, 실행이 도달하기 전에 함수 전체가 존재합니다. 함수 표현식은 단지 변수에 할당된 값일 뿐이라서, 이른 호출 시점에 `expressed`는 여전히 `undefined`(`var`인 경우)이거나 TDZ에 있습니다(`let`/`const`인 경우).

## 무엇을 언제 사용할까

```js
// 표현식 — 콜백, 조건부 정의, 화살표 함수에 사용
const handler = () => doThing();
const fn = condition ? a : b;
arr.map(x => x * 2);

// 선언 — 명확하고 호이스팅되는 최상위 함수
function calculateTotal(items) { ... }
```

선언은 최상위의 이름 있는 함수에 가독성이 좋고 호이스팅의 이점을 누립니다(사용처보다 뒤에 정의할 수 있음). 표현식은 화살표 함수, 콜백, IIFE, 함수를 조건부로 할당할 때 필요합니다. 화살표 함수는 항상 표현식입니다.

관련 질문

왜 차이가 나는가

무엇을 언제 사용할까