220614 [JavaScript] 실행 컨텍스트 - 호이스팅(Hoisting)

호이스팅이란?

- 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상으로 JS 엔진은 스크립트를 가져 오면 가장 먼저 코드에서 데이터를 위한 메모리를 설정한다. 이 시점에는 코드가 실행되지는 않고 실행을 하기 위한 준비단계이다.

 

여기서 함수와 변수는 메모리에 저장되는 방식이 다르다.

 

함수는 전체 함수에 대한 참조와 함께 저장이되고

변수의 경우 ES6 문법인 let과 const는 초기화 되지 않은 채로 저장이 되고, var는 undefined로 저장이 된다.

예시를 통해 보면 이해가 좀 더 잘되었다.

console.log(sum(2,3));
console.log(name);
console.log(age);

function sum(x,y) {
  return x + y;
}

const name = 'hoo00nn';

var age = 25;

첫번째,
console.log(sum(2,3))에서 전체 함수의 대한 참조와 함께 메모리에 저장되기 때문에 함수를 만든 라인 이전에도 호출할 수 있다. 그래서 실행이 잘된다.

 

두번째,

console.log(name)에서 const는 초기화되지 않은 채로 메모리에 저장이 되기 때문에 초기화 전에 변수를 참조할 수 없다는 ReferenceError 가 발생한다. 즉 호이스팅이 일어나지만 선언만 되기 때문에 에러가 일어난다.
*let도 const와 같은 결과를 낸다.

 

세번째,

console.log(age)에서 var는 호이스팅이 일어나면서 선언과 초기화가 동시에 일어난다. 이때 undefined 형태로 저장이 되어서 에러가 아닌 콘솔에 undefined가 찍히게 된다.

 

*변수 생성 단계

1단계: 선언 단계(Declaration phase)

2단계: 초기화 단계(Initialization phase)

3단계: 할당 단계(Assignment phase)

 

이렇게 보니 항상 변수를 현재 스코프 최상단에서 선언하도록 하고, 선언과 함께 초기화를 해야하는 이유를 알게되었다.

또한 var는 의도치 않은 위치에서 오류를 일으키지 않고 작동이 되어서 사용자가 원인을 파악하기 어렵게 할 수 도있다.

이렇기에 ES6 에서 let과 const가 등장을 하였고 세가지의 차이점에 대해서는 다음 글에서 자세하게 기록해보겠다.

 

 

*참고사이트 : https://poiemaweb.com/es6-block-scope#13-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85