1 minute read

함수 호이스팅

호이스팅이란 코드가 한 줄씩 순차적으로 실행되지 않고 코드가 선두로 끌어 올려진 것처럼 동작하는 것


함수 선언문


함수 선언문은 다른 선언문과 마찬가지로 런타임 이전에 js 엔진에 의해 실행된다.

함수 선언문의 동작

호이스팅 된 함수 선언문은 함수 객체를 만들고 암묵적으로 함수 이름과 같은 식별자를 생성하여 함수객체를 할당한다.
(함수명은 함수 밖에서는 참조 할 수 없고 함수 몸체 내에서만 참조 할 수 있으므로)

//생성자 함수 add
function add(a, b){
	return a+b;
}
//add 함수의 의사코드 
var add = function add(a, b){
	return a+b;
};

함수 선언문은 함수 표현식으로 변환하여 함수 객체를 생성한다고 생각할 수 있다. 하지만 함수 생성 시점이 다르다.

//함수 선언 이전에 호출하여도 결과값이 나온다.
add(1, 2); // 3

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

함수 선언문은 호이스팅 되고, 런타임 이전에 평가되어 함수 객체를 생성한다.

따라서 함수 호출이 함수 생성시점보다 우선 되여도 정상적으로 작동한다.


함수 표현식


함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이므로 문자 리터럴, 숫자 리터럴과 같이 함수 호이스팅이 아닌 변수 호이스팅이 된다.

함수 생성 시점

함수 표현식은 변수 호이스팅이 일어난 후 런타임에 함수 표현식이 평가되어 함수 객체가 된다.

console.dir(add); // undefined
add(1, 2); // TypeError: add is not a function

var add = function (a, b){ //함수 이름 생략 가능 
	return a + b;
};
console.dir(add) // f add(a, b)
add(1, 2);// 3

정리

함수 선언문은 함수가 호이스팅. 런타임 이전에 함수 객체 생성
함수 리터럴은 변수가 호이스팅. 런타임에 함수 객체 생성


참조

모던 자바스크립트 Deep Dive

Updated: