[JS] 함수 선언문 vs 함수 표현식

JavaScript에서 함수를 정의하는 방법은 크게 함수 선언문(Function Declaration)과 함수 표현식(Function Expression) 두 가지가 있다.

 

 

 

---

1. 함수 선언문 (Function Declaration)

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

 

✅ 특징

• function 키워드로 시작하며, 함수의 이름이 필수이다.

• 호이스팅(Hoisting)의 영향을 받는다.

• 즉, 코드 실행 전에 함수가 메모리에 올라가므로 함수 호출을 함수 정의보다 앞에서 해도 정상 동작한다.

 

✅ 호이스팅 예제

greet(); // 정상 동작 (함수 선언문은 호이스팅됨)

function greet() {
    console.log("Hi!");
}

 

호이스팅이란 무엇인가

[JS] 호이스팅(Hoisting)이란?

 

 

 

---

2. 함수 표현식 (Function Expression)

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

 

✅ 특징

• 함수를 변수에 할당하는 형태.

• 함수 이름을 생략할 수 있다. (익명 함수 가능)

• 호이스팅이 적용되지 않는다.

• 즉, 함수 선언 이전에 호출하면 에러가 발생한다.

 

✅ 호이스팅 차이 예제

greet(); // ❌ ReferenceError: Cannot access 'greet' before initialization

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

 

 

 

---

3. 주요 차이점 정리

비교 항목	함수 선언문	함수 표현식
호이스팅	⭕️ (함수 선언이 코드 실행 전에 메모리에 올라감)	❌ (변수에 할당되므로, 선언 전에 호출 불가)
함수 호출 위치	어디서든 호출 가능	선언 이후에만 호출 가능
익명 함수 사용	불가능 (항상 함수 이름 필요)	가능 (익명 함수 사용 가능)

 

📌 결론:

• 호이스팅이 필요한 경우: 함수 선언문 사용

• 변수에 저장하여 제어할 경우: 함수 표현식 사용

• 콜백 함수 등에서 익명 함수가 필요할 경우: 함수 표현식 사용