자바스크립트에서 var functionName = function() {}와 function functionName() {}의 차이점은 무엇일까요?

자바스크립트에서 함수를 정의하는 방법은 크게 두 가지가 있습니다. 바로 함수 표현식(Function Expression)과 함수 선언문(Function Declaration)입니다. 두 방식은 비슷해 보이지만 동작 방식에 중요한 차이가 있습니다.

함수 표현식(Function Expression)

functionDisplayOne은 변수에 익명 함수(anonymous function)를 할당하는 함수 표현식입니다. 이 방식으로 정의된 함수는 코드가 해당 줄에 도달했을 때 비로소 생성됩니다.

functionDisplayOne(); // 에러 발생! 아직 정의되지 않음
var functionDisplayOne = function() {
    console.log("Hello!");
};

위 예제처럼 함수 표현식이 할당되기 전에 호출하면 TypeError가 발생합니다. 변수 자체는 호이스팅(hoisting)되어 존재하지만, 값이 할당되기 전까지는 undefined 상태이기 때문입니다.

함수 선언문(Function Declaration)

반면 functionDisplayTwo는 함수 선언문 방식으로 정의된 함수입니다. 함수 선언문은 자바스크립트 엔진이 코드를 실행하기 전에 미리 해석하므로, 주변 스코프가 실행되는 즉시 사용할 수 있습니다.

functionDisplayTwo(); // 정상 작동! "Hello!" 출력
function functionDisplayTwo() {
    console.log("Hello!");
}

이것이 가능한 이유는 호이스팅(Hoisting) 때문입니다. 자바스크립트는 함수 선언문을 스코프의 최상단으로 끌어올려 처리하기 때문에, 함수가 정의된 위치보다 앞에서 호출해도 문제없이 동작합니다.

핵심 차이점 정리

• 호이스팅 여부: 함수 선언문은 완전히 호이스팅되어 정의 전에 호출할 수 있지만, 함수 표현식은 할당 시점 이후에만 호출할 수 있습니다.
• 함수 이름: 함수 표현식은 일반적으로 익명 함수를 사용하고, 함수 선언문은 반드시 이름을 가져야 합니다.
• 사용 시점: 즉시 실행이 필요한 경우에는 함수 선언문이, 조건에 따라 다른 함수를 할당해야 하는 경우에는 함수 표현식이 유용합니다.

두 방식 모두 자바스크립트에서 함수를 만드는 올바른 방법이며, 상황과 코드 스타일에 따라 적절히 선택하여 사용하면 됩니다.