TIL 2 Javascript - 호이스팅(Hoisting)

이전에 배웠던 언어들과는 달리 자바스크립트는 호이스팅이라는 개념이 존재했습니다. 지금까지 알고 있었던 언어들의 성격과는 달라서 낯설고 이해하기가 쉽지 않았습니다.

그러면 호이스팅(Hosting)에 대해서 알아보겠습니다.

호이스팅(Hoisting)

호이스팅(Hoisting)은 의역하면 끌어올린다는 뜻입니다. 그렇다면 무엇을 끌어올릴까요?
자바스크립트에서 호이스팅은 변수 선언 과 함수 선언 을 끌어올립니다. 여기서 중요한 점은 변수와 함수의 할당 내용(실행 콘텍스트)는 끌어올리지 않고 '선언'만을 끌어올리게 됩니다.

아래 예시를 통해 변수와 함수 호이스팅에 대해 알아보겠습니다.

console.log(a());
console.log(b());
console.log(c());

function a() {
	return 'a';
}
var b = function bb() {
	return 'bb;
}
var c = function() {
	return 'c';
}

다른 언어였다면 실행 후에 변수와 함수를 선언했기 때문에 에러를 내뿜었을 것입니다. 하지만 자바스크립트는 호이스팅이 발생합니다.(이 부분 때문에 많이 헤맸습니다..ㅠ)

그렇다면, 이 코드가 실제로 실행 할 형태는 어떻게 될까요?

function a() {
	return 'a';
}
var b;
var c;
console.log(a());
console.log(b());
console.log(c));

b = function bb() {
	return 'bb';
}
c = function() {
	return 'c';
}

함수 a는 선언문이 한 번에 올라갔지만 변수 b, c는 선언과 할당이 동시에 일어났기에 실행 콘텍스트와 분리되어 선언인 var b, var c가 분리되어 호이스팅이 일어났습니다.