javascript - hoisting

 javascript의 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트 등 모든 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 말한다.

 

 javascript의 parser는 코드가 실행되기 전에 범위 안에 있는 모든 변수들을 모아서 범위의 최상단에 선언한다. 그 대상은 말 그대로 모든 선언이다. 함수, 변수, 클래스 그리고 임포트가 포함된다.

 

변수의 호이스팅

 변수는 var, let, const 중 어느 방식으로 선언되었든, 항상 호이스팅된다.

console.log(v1, v2, v3);

var v1 = 0;
let v2 = 0;
const v3 = 0;

 이러한 코드가 있었다면, javascript Parser는 다음과 같이 호이스팅한다.

var v1;
let v2;
const v3;

console.log(v1, v2, v3);

v1 = 0;
v2 = 0;
v3 = 0;

 다만, let과 const로 선언된 변수는 자동적으로 초기화되지 않기 때문에 console.log에서 v2와 v3를 참조하려 할 때 에러가 발생할 것이다.

 

함수의 호이스팅

 javascript에서 함수를 선언하는 방식은 두 가지가 있다. 함수 선언문과 함수 표현식이다.

// 함수 선언문
function foo(arg){
	return arg + 1;
}

// 함수 표현식
var boo = (arg) => {
	return arg + 1;
}

 두 선언 방식 모두 호이스팅 된다. 다만 함수 선언문은 함수의 구현 전체가 호이스팅되는 반면, 함수 표현식은 함수의 선언만이 호이스팅된다.

// 함수 선언문은 함수의 구현 전체가 호이스팅된다
function foo(arg){
	return arg + 1;
}
// 함수 표현식은 함수의 선언만이 호이스팅된다.
var boo;

foo(0);
boo(0);

boo = (arg) => {
	return arg + 1;
}

 위와 같이 선언된 두 함수 foo와 boo는 다음과 같이 호이스팅된다. 이 경우 boo(0);는 typeError를 뱉는다. boo는 선언되었으나 호출되는 시점에 그게 함수인지 변수인지 알 수 없기 때문이다.

 

 여러 선언을 동시에 호이스팅해야 하는 경우에는 변수가 먼저, 그리고 함수가 그 다음 호이스팅된다.

 

 호이스팅을 고려하지 않으면 프로그램이 예상치 못하게 작동할 수 있다. 이러한 문제를 방지하려면 범위 내에서 사용되는 선언은 가능하면 범위의 맨 위에 선언해야한다.