[Javascript] 함수 호이스팅

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다.

 

 

 

 

 

Q. Explain the differences on the usage of foo between function foo() {} and var foo = function() {}

 

A.

자바스크립트에서 함수는 객체로 간주됩니다. (정확히 말하면 일급 객체 first class) 따라서 일반 객체처럼 값으로 취급될 수 있으며 다음과 같이 변수의 값으로 할당될 수 있습니다. 

 

var foo = function(){}

함수를 위와 같이 선언하는 방식을 함수 표현식(Function Expressions)라고 합니다.

 

 

그 외에도 자바스크립트에서는 다른 일반적인 프로그래밍 언어들과 같이 함수를 선언할 수 있는데 이렇게 선언하는 방식은 함수 선언식이라고 합니다.

function foo(){}

 

함수 선언식과 함수 표현식은 둘 다 함수를 정의하는 표준적인 방법을 제공하지만, 자바스크립트 코드가 컴파일되면서 실행 컨텍스트를 생성할 때 "호이스팅(Hoisting)"이 일어나는 과정에서 차이점이 발생합니다.

 

 

호이스팅은 실행컨텍스트 생성 시에 "값이 아닌 선언"만 끌어올리는 방식입니다. 그렇기 때문에 함수 선언식으로 정의된 함수는 호이스팅 될 때에 함수의 이름이 VariableObject(VO)의 프로퍼티로, 생성된 함수 객체가 값으로 설정됩니다. 따라서 다음과 같은 코드는 정상적으로 동작하게 됩니다.

 

foo()

function foo(){}

 

하지만 함수 표현식으로 정의된 함수는 다른 변수와 같이 취급되어 호이스팅 될 때에 함수의 이름이 VO의 프로퍼티로, undefined가 그 값으로 설정됩니다. 따라 다음과 같은 코드는 정상적으로 동작하지 않습니다.

 

foo() // undefined이므로 실행할 수 없다.

const foo = function(){}

 

 

 

Reference

developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

Functions

yeoulcoding.tistory.com/154

[Javascript] 호이스팅이란