호이스팅

호이스팅

• 호이스팅은 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다.
• 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

호이스팅의 과정

• 자바스크립트 엔진은 코드를 실행하기 전, 실행 가능한 코드를 형상화하고 구분하는 과정(⇒ 실행 컨텍스트 형성)을 거친다.
• 이 과정에서 모든 선언(var, let, const, function, class)이 변수 객체 메모리에 저장된다.
• 코드 실행 전 이미 변수, 함수에 대한 선언이 저장되어 있기 때문에, 선언문보다 참조 및 호출이 먼저 나와도 동작할 수 있게 된다.
• 이는 선언 구문이 마치 파일의 최상단으로 끌어올려진 것처럼(호이스팅 된 것처럼) 보인다.

질문정리

let foo = 1;
{
  console.log(foo);
  let foo = 2;
}

let foo = 1;
{
  let foo;
  console.log(foo);
}

• 위에는 error가 뜨고 밑코드는 undefined가 뜨네요
  둘다 undefined가 떠야하는거아닌가요? 호이스팅이 그런거 아닌가요..?
  첫번째 코드에서 let foo= 2;가 foo사용시점보다 아래에 있지만
  호이스팅 되어 let foo; 가 블럭 첫번째 위치에서 선언되는거 아닌가요?

-> TDZ에 위치하기때문에 다름, 변수 초기화와 할당을 헷갈려서 생긴 문제

TDZ

스코프의 시작 지점부터 초기화 시작 지점까지의 구간

스코프

• 변수가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될수있을지 없을지 scope에 의해 결정이 된다

변수 생성 단계

• 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.

• 초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.

• 할당 단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계 입니다

var의 호이스팅

• var 키워드 변수는 변수 선언전에 선언 단계와 초기화 단계를 동시에 진행합니다.
  그래서 javascript는 실행 컨텍스트 변수 객체의 변수를 등록하고 메모리를 undefined로 만들어 버립니다.
  그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생하는 것 입니다.

let의 호이스팅

• let으로 선언된 변수는 var 키워드와는 다르게 선언단계와 초기화 단계가 분리되어서 진행이 됩니다.
  그렇기 때문에 실행 컨텍스트에 변수를 등록했지만, 메모리가 할당이 되질 않아 접근할 수 없어 참조 에러가 발생하는 것 이고, 이것을 보고 우리가 호이스팅이 되질 않는다!! 라고 오해할 수 밖에 없었던 것 입니다.

function의 호이스팅

• 변수선언 3단계를 동시에 진행

---

출처
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/
https://nuhends.tistory.com/111
https://noogoonaa.tistory.com/78