[JavaScript] 호이스팅(Hoisting)

호이스팅(Hoisting)

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

var로 선언한 변수는 undefined

let과 const는 호이스팅시 변수를 초기화 하지않는다.

 

간단히 요약하자면 호이스팅은 변수의 선언 / 초기화를 분리하고 선언을 코드의 최상단으로 옮기는 것이다.

 

변수의 선언단계

호이스팅의 예제를 보기전 변수의 선언 단계를 먼저보자

 

1. 선언 단계(Declearation phase)

 

선언단계에서는 변수를 실행 컨텍스트 변수 객체에 등록한다.이 변수 객체는 스코프가 참조하는 대상이된다.

 

2. 초기화 단계(Initalization phase)

 

변수 객체에 등록된 변수를 위한 공간을 메모리에 확보하고 변수를 undefined로 초기화한다.

 

3. 할당 단계(Assignment phase)

 

undefined로 할당된 변수에 실제 값을 할당함.

 

var로 선언한 변수는 선언과 초기화가 한번에 이루어짐.

선언과 undefind 초기화가 한번에 됨.

 

let과 const 는 선언과 초기화가 분리하여 진행됨. 그래서 초기화 이전에 접근 하려하면 참조 에러가 발생한다.

 

 

 

호이스팅 예제

자바스크립트는 함수를 실행하기전, 함수의 선언에 대한 메모리를 할당한다.

그렇기때문에 아래와 같은 코드를

 

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");

/*
결과: "제 고양이의 이름은 호랑이입니다"
*/

 

이런식으로 호출해도 동작한다.

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

 

함수의 호출이 먼저되어도, 함수의 선언에 대한 메모리할당이 우선시 되기때문에 정상적으로 값이 나온다.

자바스크립트의 실행 컨텍스트가 동작하는 방식이다.

 

 

호이스팅은 선언만 대상

JavaScript는 선언만 호이스팅 한다. 

변수가 먼저 사용되고 그 후 선언과 초기화가 나오면 사용하는 시점의 변수는 기본 초기화 상태가 된다.

var의 경우 undefined 를 출력한다.

 

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화

 

다음 예제는 선언 없이 초기화할경우이다. 

이처럼 선언하면 호이스팅도 없고, ReferenceError 가 발생한다.

 

console.log(num); // ReferenceError
num = 6; // 초기화

 

 

let과 const로 선언한 변수도 호이스팅의 대상이지만, var처럼 undefind로 변수를 초기화하지는 않는다.

만약 변수를 선언하기전 변수를 읽는다면 예외(참조 에러)가 발생하게 된다.

 

 

 

도움이 된글

- https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

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