참조

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

1. 호이스팅

개념

• 호이스팅은 코드가 실행하기 전 var 변수선언/함수선언이 해당 함수 유효 범위의 최상단으로 끌어 올려진 것 같은 현상을 말한다.
• 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(*실행 컨텍스트를 위한 과정)을 거치는데, 모든 선언(var, let, const, function, class)을 스코프에 등록한다.
• 유효 범위 → 함수 블록 { } 안
• 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것.
• 실제 메모리에서는 변화가 없다

대상

호이스팅이 발생하는 경우

• var 변수 선언과 함수선언문에서만 호이스팅이 일어난다
• 자바스크립트의 모든 선언에는 호이스팅이 일어난다.

호이스팅이 발생하지 않는 경우

• 할당은 끌어 올려지지 않는다.
• let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

예시

var 변수와 let/const 변수

```
console.log("호이스팅 테스트!")
var myname1 = "KIM1"; // var 변수
let myname2 = "KIM2"; // let 변수

```

이런 코드가 JS Parser 내부의 호이스팅의 결과로 다음 아래와 같이 순서가 바뀐 것처럼 동작한다

```
var myname; // 호이스팅 "선언"
console.log("호이스팅 테스트!")
myname1 = "KIM1" // "할당" 은 끌어 올려지지 않기 때문에 그대로 남는다
let myname2 = "KIM2"; // let은 호이스팅 발생하지 않는다

```

함수선언문 vs 함수표현식

```
first();
second();

//함수선언문
function first() {
  return "111";
}

//함수표현식
var second = function() {
  return "222";
}

```

이런 코드가 JS Parser 내부의 호이스팅의 결과로 다음 아래와 같이 순서가 바뀐 것처럼 동작한다

```
var second; // 호이스팅 - 함수표현식의 변수값 "선언"

// 호이스팅 - 함수선언문
function first() {
  return "111";
}

first();
second();

second = function() {
  return "222";
}

```

변수

생성 과정

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

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

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

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

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

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

var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 이뤄진다. 즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화한다. 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이후 변수 할당문에 도달하면 비로소 값이 할당된다.

let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 스코프에 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때(코드 실행 후) 이뤄진다. 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 이는 아직 변수가 초기화되지 않았기 때문이다. 즉, 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문이다. 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다. 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.