[JavaScript] 호이스팅(hosting)의 이해

JavaScript에서 var 키워드를 사용하는 경우 호이스팅을 조심해야합니다.

즉, 변수 사용 시 예상하지 못한 결과를 반환할 수 있습니다.

호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

호이스팅으로 인해 발견되는 문제점을 보완하기 위해 ES6에서 let, const 키워드가 도입되었지만 var 키워드는 삭제되지 않고 있기 때문에 정확히 호이스팅이 문제가 무엇인지 코드를 통해  확인하고자 합니다.

 

 

변수 선언이 되지 않은 value를 호출하는 경우 value가 정의되지 않았다는 참조 에러 메시지를 출력하게 됩니다.

console.log(value); // Error: Uncaught ReferenceError: value is not defined

 

그러나, 다음과 같이 변수를 정의하고 값을 할당하기 전 변수를 호출하면 undefined를 출력합니다.

console.log(value); // undefined
var value = 'hello, world!';
console.log(value); // hello, world

그 이유는 호이스팅(hosting) 또는 끌어올리기로 인하여 런타임 이전 단계에서 선언문이 실행되고 이후 값이 할당되기 때문입니다.

즉, 개발자가 변수 선언과 값의 할당을 한 번에 사용하여도 자바스크립트 엔진은 변수 선언과 값의 할당을 분리하여 실행합니다.

// 변수 선언과 값의 할당을 한 번에 실행
var value = 'hello, world!';

// 자바스크립트 엔진 내 실제 동작
// 변수 선언과 값의 할당을 분리하여 실행
var value;
value = 'hello, world;

 

개발자가 작성한 코드가 자바스크립트 엔진을 통해 다음과 같이 실행되게 됩니다.

 

// 개발자가 작성한 코드
console.log(value); // undefined
var value = 'hello, world!';
console.log(value); // hello, world

// 자바스크립트 엔진이 실행하는 코드
var value;	// 암묵적으로 undefinded 를 할당
console.log(value);	// undefinded
value = 'hello, world!';
console.log(value);	// hello, world

즉, value를 선언하기 전 value를 사용할 수 있게 됨으로써 개발자가 예상하지 못한 결과값을 출력할 수 있기에 호이스팅을 조심해야합니다.