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

이 글에선 함수 선언문과 함수 표현식의 차이점을 간단하게 살펴본다.

 

*호이스팅에 대한 배경지식이 요구됩니다.

https://cuziam.tistory.com/entry/Hoisting이란-핵심만-알고가자

Hoisting이란? 핵심만 알고가자

 

일단 이 둘은 함수를 정의하는 법이라는 점과 함수 리터럴을 이용한다는 점에서 동일하다.

 

함수 리터럴의 형식

함수 리터럴은 function 키워드, 함수 이름(생략가능), 매개 변수 목록, 함수 몸체로 이루어져 있다. 함수 리터럴은 사용되는 형태(문맥)에 따라서 함수 선언문이나 함수 표현식으로 해석된다.

//변수에 함수리터럴을 할당하는 코드
var f = function add(x, y) {
	return x + y;
}

 

함수 선언문

기명 함수 리터럴을 단독으로 사용할 경우, 함수 선언문으로 해석된다.

• 함수 선언문으로 만들어진 함수는 ‘함수 호이스팅’의 영향으로, 런타임 이전에 함수의 식별자에 초기값으로 ‘함수 객체’가 부여된다. 따라서 선언 이전에 함수를 호출하면 정의된 함수가 실행된다.
• 반드시 함수의 이름을 작성해야 한다.
• 호이스팅으로 인해 전역범위에서 사용할 수 있다.

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

console.log(add(2, 3)); // 5

함수 표현식

자바스크립트에서 함수는 일급 객체(값으로 평가될 수 있는 객체)이기 때문에, 함수를 변수에 할당할 수 있다. 함수 리터럴이 변수에 할당하는 문맥에 놓이면, 함수 리터럴은 함수 표현식으로 해석된다.

• 이렇게 만들어진 함수는 ‘변수 호이스팅’이 적용된다. 이 때문에 함수가 정의되기 이전에 식별자를 호출하면 undefined로 평가된다.
• 함수의 이름을 생략할 수 있다.
• 변수가 선언된 범위에서만 사용할 수 있다.

console.log(add) //이 경우엔 undefined
console.log(add(2, 3)); // 이 경우엔 'not defined' error!
const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 5