호이스팅(Hoisting)
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
예를 들어 이런 코드가 있다고 치면
function sum (a, b) {
var x = add(a,b);
return x;
function add (c, d) {
var result = c+d;
return result;
}
}
자바스크립트 인터프리터는 아래와 같이 읽는다.
function sum (a, b) {
var x = undefined;
function add (c, d) {
var result = c+d;
return result;
}
x = add(a,b);
return x;
}
변수의 경우 어디서 어떻게 선언을 하더라도 항상 컨텍스트내의 최상위로 끌고올라온 뒤 'undefined'를 할당해 둔다. 이후 함수 선언을 끌고 올라오고 난 뒤 변수의 할당과 함수의 실행문을 순서대로 가져온다. 즉 호이스팅은 자바스크립트 인터프리터가 코드를 읽는 방식이며, 이를 이해해야 원치않는 'undefined'가 출력되는 것을 막을 수 있다.
ECMAScript 6판에서는 var나 function declaration대신에 추가된 let이라는 예약어를 사용하면 호이스팅을 막을 수 있다. 정확히 말하자면, let을 사용한다고 호이스팅이 일어나지 않는 것이 아나라, 호이스팅이 일어나 스코프 내 최상위로 끌어올려지지만, 'undefined'를 할당하지 않기 때문에 'undefined'가 출력되는 것이 아니고 참조에러가 발생하게 된다.
ES6 이후로 실제 현업에서는 var 키워드는 절대로 쓰이지 않으며 99%이상의 경우 모든 함수를 무조건 const와 arrow syntax로 선언하기 때문에 최근 들어서는 사실상 크게 신경쓰지 않는 부분이 되었다.
