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

JavaScript에서 함수를 정의하는 방법은 크게 두 가지입니다. 바로 함수 선언문(Function Declaration)과 함수 표현식(Function Expression)인데요. 두 방식은 작성 문법부터 호이스팅(hoisting) 동작까지 여러 차이가 있어, 상황에 맞게 올바르게 사용하는 것이 중요합니다. 이번 글에서는 각 방식의 특징과 예제 코드를 통해 차이점을 자세히 살펴보겠습니다.

함수 선언문(Function Declaration)

함수 선언문은 function 키워드로 시작하여 함수를 선언하는 가장 기본적인 방식입니다. function 키워드 뒤에 고유한 함수 이름을 붙이고, 괄호 안에 매개변수 목록(비워둘 수도 있음)을 작성한 뒤, 중괄호 { }로 감싼 실행 코드 블록을 정의합니다.

다음은 함수 선언문의 기본 예제입니다.

function sayHello(name, age) {
    document.write(name + " is " + age + " years old.");
}

위 코드처럼 함수 선언문은 반드시 함수 이름을 가져야 하며, 스크립트가 실행되기 전에 호이스팅되기 때문에 함수가 선언된 위치보다 앞에서 호출해도 정상적으로 동작한다는 장점이 있습니다.

함수 표현식(Function Expression)

함수 표현식은 이름 그대로 함수를 하나의 '값'처럼 취급하여 변수에 할당하는 방식입니다. 이때 함수 정의는 function 키워드로 시작하지 않아야 하며, 변수에 할당되는 형태로 작성됩니다. 함수 표현식에는 익명 함수(anonymous function)와 기명 함수(named function) 두 종류가 있습니다.

1. 익명 함수 표현식

함수에 이름을 붙이지 않고 변수에 바로 할당하는 방식입니다.

// 익명 함수 표현식
var a = function() {
    return 5;
}

2. 기명 함수 표현식

함수에 이름을 지정하여 할당하는 방식으로, 함수 내부에서 재귀 호출 등을 할 때 유용합니다. 단, 이 이름은 외부에서 직접 접근할 수 없습니다.

// 기명 함수 표현식
var a = function bar() {
    return 5;
}

두 방식의 주요 차이점

호이스팅(Hoisting): 함수 선언문은 코드 실행 전에 메모리에 미리 등록되므로 선언 위치와 관계없이 호출할 수 있지만, 함수 표현식은 변수에 할당되는 시점에 생성되므로 정의 이전에 호출하면 에러가 발생합니다.

사용 시점: 재사용 가능한 독립적인 함수를 만들 때는 함수 선언문이 적합하고, 콜백 함수나 즉시 실행 함수(IIFE)처럼 일회성 로직이 필요할 때는 함수 표현식이 더 유용합니다.

정리하면, 함수 선언문은 function 키워드로 시작하는 이름 있는 함수 정의 방식이며, 함수 표현식은 함수를 값으로 다루어 변수에 할당하는 방식입니다. 두 방식의 특성을 잘 이해하고 프로젝트의 코딩 컨벤션에 맞게 일관성 있게 사용하는 것이 좋습니다.