호이스팅

자바스크립트에는 호이스팅이라는 특성이 있습니다.

 

처음 JS를 사용할 때 놀래키는 녀석 중 하나죠.

 

호이스팅이란 자바스크립트에서 실행 문맥을 동작할 때 함수와 변수의 선언을 해당 컨텍스트의 최상위로 끌어올리는 것을 의미합니다.
실제로 끌여올려지는 것은 아니며, 실행문맥과 활성 객체에 대한 이해가 있어야지만 호이스팅을 정확하게 이해할 수 있습니다.

 

이게 뭔 소리야? 우리는 검정 화면을 좋아하는 개발자니 코드로 보면서 확인해 봅시다.

printAge(17);
 
function printAge(age){
 
console.log("내 나이가 벌써" + age + "라니?");
 
}

아무 문제없이 실행됩니다. 이제는 익숙해서 당연하게 느껴지네요.

 

하지만 따져보면 첫 번째 줄에서 printAge라는 함수가 선언되기 전에 사용되었습니다.

 

해당 실행 문맥에 진입하면서 내부의 함수 선언들을 우선 처리 했기 때문에 가능한 현상이죠.

 

그래서 많은 프런트엔드 개발자들은 일단 함수의 첫 줄에 변수 선언을 쭉 다 해놓습니다. 헷갈리지 않기 위해서요.

function getMyJob(){
	var name, age, isMale, birthTimestamp;
	var createJob, removeJob;
}

이런 식으로요.

왜 헷갈리냐고요? 아래 코드를 보면 이해가 되실겁니다.

 

var a = "너";

console.log(a + "와" + b);

var b = "나"

 

호이스팅에서 변수는 선언 과정만 처리되기 때문에 실제 값 할당이 되지 않은 상태에서 두 번째 줄이 실행됩니다.

 

undefined 값이 할당 되어 있죠.

 

그렇다면 더 나아가서

 

printAge(17);

var printAge = function(age){

	console.log("내 나이가 벌써" + age + "라니?");

} 

이건 에러 납니다.

 

첫 번째 예제는 함수 선언을 호이 스팅 했지만 이번 예제는 변수에 함수 리터럴(표현식)을 할당하는 구문입니다. 때문에 아직 초기화가 안된 undefined 상태죠.

 

그렇다면 호이스팅은 왜 일어날까요?

 

자바스크립트 동작 방식 때문입니다.

 

나중에 기회가 되면 자바스크립트의 동작 방식에 대해 포스팅하겠습니다.

 

그때 다시 깊이 있게 호이스팅을 들여다보겠습니다.