Hoisting, 호이스팅

예전 회사에서 공장에 실사를 가면 호이스트를 많이 봤다. H빔에 연결된 도르레와 모터, 윈치... 물건을 들어 올리고 옮기는 데 사용하는 그 호이스트. 

Bing Image Creator, Hoist

오늘 자바스크립트에서 호이스팅이라는 개념을 공부했다. 끌어 올린다는 뜻의 호이스트, 호이스팅은 JS가 브라우저나 node 같은 인터프리터에서 실행될 때, 어떤 순서로 변수를 선언하고 실행하느냐를 이해하는데 중요한 개념이다.

 

function a () {
	console.log(b);
	var b = 'bbb';
	console.log(b);
	function b() { }
	console.log(b);
}
a();

 

위의 함수를 생각해보면, 처음 console.log(b)를 실행하면 b가 정의되지 않았으니, undefined가 출력이 되고, 그다음 b를 'bbb'로 정의하고 난 console.log(b)는 'bbb'를, 마지막의 함수 b를 정의한 다음 console.log(b)를 다시 실행하고, 끝나는 형태로 읽히기 때문에, b가 정의되지 않아서 에러 ReferenceError 가 나올 것 같지만, 실제로는... 아래와 같이 undefined가 아니라 [Function: b]가 출력되는 것을 확인할 수 있다.

 

 

호이스팅 된 결과를 코드로 다시 작성해보면 아래와 같다.

 

function a () {
	var b
	function b() {}
	console.log(b);
	b = 'bbb';
	console.log(b);
	console.log(b);
}
a();

 

그래서, 자바스크립트에서 변수와 함수 선언을  컴파일 단계에서 코드 최상단으로 끌어올리는 동작을 의미한다. 그래서 변수와 함수를 선언하기 전에 참조할 수 있게 되는 것.

 

var로 선언한 변수는 호이스팅 되어 선언을 미리하지만 아무리봐도 헛갈리기만하고 어떤 장점이 있는지는 사실 잘 모르겠다. 여러 검색한 결과로도, ES6 문법에서 생긴 let 과 const를 사용하는 것이 좋다고 하고 var는 사용을 지양하는 글이 많았다. 예전에는 코드가 복잡하지 않고 유연하게 사용하는것이 더 편했으나, 점점 복잡해지는 코드와 협업 시 디버깅이 복잡해지는 이유 등으로 let이나 const가 생긴 것이 아닌가 싶다.

 

let이나 const를 사용하도록 권장하는 것과 같은 이유로, function 키워드를 사용하는 함수 선언식도 지양하고 함수 표현식을 사용하는 것이 좋다고 많이 설명한다. 엄청나게 긴 코드 어딘가에서 함수 선언식으로 만든 함수가 가장 위로 호이스팅되어 그 전 코드에 영향을 줄 수 있기 때문.

 

함수 선언식은 function asdf() {} 으로 선언하는 함수이고,

함수 표현식은 var asdf = function () {} 으로 표현하는 함수이다.

 

함수 선언식과 함수 표현식의 차이는 여기에서 조금 더 자세히 알 수 있다.