함수 선언문 vs 함수 표현식, 차이점 정리

자바스크립트에서 함수를 만드는 방법은 대표적으로 두 가지가 있어요:

1. 함수 선언문 (Function Declaration)
2. 함수 표현식 (Function Expression)

이 둘은 모양은 비슷해 보이지만, 호이스팅 동작과 선언 방식에서 중요한 차이가 있습니다.

---

✅ 함수 선언문 (Function Declaration)

sayHello(); // 👉 "Hello!"

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

• function 키워드로 직접 함수 이름을 선언
• 코드 어디에서든 호출 가능 (호이스팅 O)

---

✅ 함수 표현식 (Function Expression)

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

const sayHi = function () {
  console.log("Hi!");
};

• 변수에 함수 값을 할당하는 방식
• 변수만 호이스팅되고, 함수는 할당 전까지 사용할 수 없음
• 그래서 위 코드처럼 선언 전에 호출하면 에러 발생

---

🧠 왜 다를까?

자바스크립트는 코드를 실행하기 전에

• 함수 선언문 전체는 미리 메모리에 올림
• 함수 표현식은 변수만 끌어올리고 값은 나중에 할당

그래서 선언문은 위에서 호출 가능하고, 표현식은 안 되는 거예요.

---

📌 차이점 정리

구분	함수 선언문	함수 표현식
키워드 사용 방식	function 함수이름()	const 변수 = function()
호이스팅	O (함수 전체가 올라감)	X (변수는 올라가지만 함수는 X)
선언 전 호출	가능	불가능 (TypeError)
사용 예시	전역 또는 일반 함수 정의용	조건부 정의, 콜백함수에 자주 사용

---

✨ 언제 어떤 걸 써야 할까?

• 함수 선언문
  → 코드 어디서든 쓸 수 있게 하고 싶을 때
  → 주로 일반적인 함수 정의에 사용

• 함수 표현식
  → 특정 조건 안에서만 정의하거나
  → 콜백 함수나 동적으로 사용할 때 유용

---

헷갈릴 땐 이렇게 기억하세요:
"함수 선언문은 호이스팅돼서 먼저 써도 된다. 함수 표현식은 안 된다!"