호이스팅(Hoisting)

호이스팅이란?

Javascript 에서 var 키워드 변수나 함수는 선언 위치와 관계 없이 다른 코드 실행전에 

변수 및 함수 선언과 초기화가 이루어지는걸 의미한다.

 

var 키워드 변수는 선언 및 초기화가 한꺼번에 이루어지며,함수 선언문의 함수는 선언 및 초기화 그리고 할당까지 모두 이루어진다.

 

호이스팅을 알기 전에 변수 생성단계를 먼저 알아야 한다.

 

변수 생성 단계

자바스크립트는 3가지 단계를 거쳐 변수를 생성한다.

 

1. 선언단계

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

 

2. 초기화 단계

• 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
• 이 단계에서 변수는 undefined 로 초기화 된다.

 

3. 할당 단계

• undefined 로 초기화된 변수에 실제 값을 할당한다.

 

let, const 키워드를 사용해 변수를 생성할 시에는 3가지 단계가 따로 따로 이루어지며,

var 키워드로 선언된 변수는 코드가 실행되기 전 선언 단계와 초기화 단계가

한번에 이루어진다.

함수 선언문을 사용할 시에는 3가지 단계가 한번에 이루어진다.

 

주의할점은 함수 선언문에선 호이스팅이 일어나지만

함수 표현식에서는 호이스팅이 일어나지 않는다.

 

let, var 키워드 예시

 

함수 선언문, 함수 표현식 차이점

fnTest();
fnTest2();

//함수 선언문
function fnTest(){
    console.log('함수 선언문');
};

//함수 표현식
let fnTest2 = function(){
    console.log('함수 표현식');
};

위와 같이 함수 선언문은 호이스팅을 하지만 함수 표현식은 호이스팅을 하지 않는다.

변수에 할당된 함수 표현식은 호이스팅을 진행하지 않는다.