함수 선언식과 함수 표현식의 차이점

답변 확인

함수 선업식과 함수 표현식은 자바스크립트에서 함수를 정의하는 두 가지 주요 방식으로, 가장 큰 차이점은 호이스팅에 있음

1. 함수 선언식 (Function Declaration)

• 정의 : 이름이 있는 함수를 정의하는 방식
• 호이스팅 : 자바스크립트 엔진이 코드를 실행하기 전에 함수 선언을 메모리에 로드하므로,함수 선언식은 코드 내 어디에서든 호출 가능
• 특징 : - 함수 이름이 고정적 - 코드의 가독성과 유지보수성이 높아지는 장점이 있음

console.log(add(2, 3)); // 5
 
function add(a, b) {
    return a + b;
}

add 함수는 선언된 위치보다 앞에서 호출해도 정상 작동, 함수 선언이 실행 전에 메모리에 로드되기 때문

함수 표현식 (Function Expression)

• 정의 : 변수를 통해 함수를 정의하며, 변수에 익명 함수를 할당하는 방식
• 호이스팅 : 변수에 할당된 이후에만 함수 호출이 가능, 변수 자체는 호이스팅되지만 초기화되지 않으므로 ReferenceErrorr가 발생할 수 있음
• 특징 :
  • 익명 함수로 정희하는 경우가 많음
  • 코드를 작성하는 순서에 따라 실행 흐름이 결정됨

console.log(multiply(2, 3)); // ReferenceError: Cannot access 'multiply' before initialization
 
const multiply = function (a, b) {
    return a * b;
};
 
console.log(multiply(2, 3)); //6

함수 선언식 vs 함수 표현식 비교

예시

함수 선언식

// 일반 유틸리티 함수
function calculateArea(width, height) {
    return width * height;
}
 
console.log(calculateArea(5, 4)); // 20

함수 표현식

// 콜백 함수로 사용
const logMessage = function (message) {
    console.log(message);
};
 
setTimeout(() => logMessage('Hello, World!'), 1000);

정리

1. 함수 선언식 은 코드 실행 전 미리 로드되므로 어디에서든 호출할 수 있으며, 가독성이 높은 구조적 코드에 적합함
2. 함수 표현식 은 변수가 초기화된 이후에 호출 가능, 특정 실행 시점이나 익명 함수가 필요한 경우 유용함