호이스팅(Hoisting) 이란?

이번 포스트는 https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 포스트를 참고하여 작성되었습니다.

이번 포스팅을 시작으로 자바스크립트에서 중요하게 생각되는 키워드들을 주제로 선정해 공부해보도록 하겠다.

호이스팅(Hoisting) ?

호이스팅(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의 경우를 보겠다.
var는 undefined 형태로 메모리에 저장이 되기 때문에 undefined가 콘솔에 찍힌다.

변수의 값은 언제 할당될까 ?

위에서 console을 찍어보면 undefined, ReferenceError 등 형태에 따라 각각 다르게 동작하는 것을 확인했다. 그럼 언제 값이 할당되는 것일까?

답은 간단하다. 코드가 한줄 한줄 실행되면서 해당 변수가 선언된 라인을 통과하면 되면 값이 할당된다!

요약

• 함수와 변수는 코드를 실행하기 전에 실행 컨텍스트를 위해 메모리에 저장됩니다. 이것을 호이스팅 이라고 한다.
• 함수는 전체 함수에 대한 참조와 함께 저장되고, var 키워드가 있는 변수는 undefined, let 및 const 키워드가 있는 변수 는 초기화되지 않은 상태로 메모리에 저장됩니다.

결론

호이스팅 메카니즘을 적절히 이해하는 것은 호이스팅에 의해 발생하는 잠재적 버그와 혼란을 피하도록 도와준다.
undefined나 reference error와 같이 호이스팅의 사이드 이펙트(Side Effect)를 피하기 위해서는 항상 변수를 현재 스코프 최상단에서 선언하도록 하고, 선언과 함께 초기화를 해야한다.