[JavaScript] 함수 선언문과 함수 표현식의 차이

해리포터·2023년 1월 18일

함수 선언문

function add (a, b) {
	return a + b;
}

함수를 정의하는 가장 대표적인 방법이다. 다른 언어들도 함수 선언문으로 함수를 정의한다.

함수 선언문에서는 함수 이름을 생략할 수 없다.

// 함수 선언문에서 함수 이름이 없을 경우
function (a, b) {
	return a + b;
}
// ❌ SyntaxError: Function statements require a function name

자바스크립트의 함수는 일급 객체다. 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다.
출처: 모던 자바스크립트 딥다이브 p.163

var add = function (a, b) {
	return a + b;
}

함수 표현식은 변수에 함수를 할당하는 방식으로 함수를 정의한다. → 자바스크립트에서는 함수가 일급 객체이기 때문에 가능한 것이다.

함수 표현식으로 만들어진 함수는 함수 이름을 생략하는 것이 일반적이다. 이렇게 이름이 없는 함수는 익명함수(anonymous function) 이라고 한다.

함수 객체가 런타임 이전에 생성된다.

(런타임 이전) 자바스크립트 엔진에 의해 런타임 이전에 함수 객체가 먼저 생성된다.
(런타임 이전) 자바스크립트 엔진은 함수의 이름과 같은 이름의 식별자를 암묵적으로 생성하고 함수 객체에 할당한다.
(런타임 이후) 따라서 런타임 이후 코드가 위에서부터 한 줄씩 실행될 때 이미 함수 객체가 생성되어 있고, 함수 이름과 같은 식별자에 함수 객체가 할당되어 있으므로 함수 선언문 이전에 함수를 호출할 수 있다. (함수 호이스팅)