우리는 보통 호이스팅(Hoisting)은 보통 코드를 실행하기 전 함수의 선언과 변수의 선언을 파일의 맨 위로 끌어 올린다고 알고 있을 것이다.
하지만, JS 엔진은 스크립트를 가져 오면 가장 먼저 코드에서 데이터를 위한 메모리를 설정한다. 이 시점에는 코드가 실행되지는 않고 실행을 하기 위한 준비단계이다.
함수와 변수가 메모리에 저장되는 방식은 다르다.
함수는 전체 함수에 대한 참조와 함께 저장된다.
변수의 경우 ES6 문법인 let
과 const
는 초기화 되지 않은 채로 저장이 되고, var는 undefined
로 저장이 된다.
그럼 이제 준비단계를 마치고 코드를 실행할 수 있게 된다.
예시
console.log(sum(2,3));
console.log(name);
console.log(age);
function(x,y) {
return x + y;
}
const name = 'hoo00nn';
var age = 25;
처음 console.log
는 함수는 전체 함수의 대한 참조와 함께 메모리에 저장되기 때문에 함수를 만든 라인 이전에도 호출할 수 있다.
다음 console.log
는const는 초기화되지 않은 채로 메모리에 저장이 되기 때문에 초기화 전에 변수를 참조할 수 없다는 ReferenceError 가 발생한다.
var
는 undefined 형태로 메모리에 저장이 되기 때문에 undefined가 콘솔에 찍힌다.
같은 이름의 var 변수 선언과 함수 선언에서의 호이스팅
변수 선언이 함수 선언보다 위로 끌어올려진다.
값이 할당되어 있지 않은 변수와 값이 할당되어 있는 변수에서의 호이스팅
함수와 변수는 코드를 실행하기 전에 실행 컨텍스트를 위해 메모리에 저장된다. 이것을 호이스팅 이라고 한다.
함수는 전체 함수에 대한 참조와 함께 저장되고, var 키워드가 있는 변수는 undefined, let 및 const 키워드가 있는 변수 는 초기화되지 않은 상태로 메모리에 저장됩니다.
결론
호이스팅 메카니즘을 적절히 이해하는 것은 호이스팅에 의해 발생하는 잠재적 버그와 혼란을 피하도록 도와준다.
undefined나 reference error와 같이 호이스팅의 사이드 이펙트(Side Effect)를 피하기 위해서는 항상 변수를 현재 스코프 최상단에서 선언하도록 하고, 선언과 함께 초기화를 해야한다.
참고 | https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
https://velog.io/@hoo00nn/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting-%EC%9D%B4%EB%9E%80