Javascript - 호이스팅

호이스팅이란?

hoisting의 사전적 의미는 끌어 올리기라는 뜻이다. 함수 안에서 변수를 선언할 때 어떤 위치에 있든 함수의 시작 위치로 끌어올리는 현상이다. 단, 선언 부분만 위로 끌어올리고 값을 대입하는 부분은 위치 그대로 남아있다. 호이스팅은 선언과 할당의 분리라고 생각 하면 될것 같다.

변수 호이스팅

function foo() {
	console.log(a);  // undefined
	var a = 100;
	console.log(a);  // 100
}

foo();

위의 코드를 실행하면 a가 선언되지 않았는데 a를 호출했기 때문에 에러가 발생한다. 하지만 자바스크립트의 경우는 호이스팅을 통해 a의 선언을 함수 제일 위에서 해주기 때문에, 에러 없이 undefined가 출력됩니다. 위 코드는 사실 아래와 같은 코드이다.

function foo() {
	var a;
	console.log(a);  // undefined
	var a = 100;
	console.log(a);  // 100
}

foo();

함수 호이스팅

foo();

function foo() {
	console.log('출력');
}

위와 같은 코드의 경우, 변수 호이스팅과 마찬가지로 함수선언이 위로 끌어올려지기 때문에 제대로 동작한다. 하지만 아래와 같은 함수 표현식의 경우에는 오류가 발생한다.

foo();  // foo is not a function

var foo = function() {
	console.log('출력');
};

위 코드는 호이스팅에 의해 아래와 같은 모양으로 바뀌게 된다.

var foo;

foo();  // foo is not a function

foo = function() {
	console.log('출력');
};

위와 같이 foo 선언을 위로 호이스팅 해버리기 때문에, foo가 실행될 때는 아직 변수로 선언이 된 상태이다. 따라서 foo는 함수가 아니라는 에러를 발생시킨다.