Hoisting & TDZ

호이스팅을 알기 전 실행 컨텍스트를 먼저 알아야한다.

 

실행 컨텍스트

: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체, 콜 스택에 쌓이게 된다.

 

실행 컨텍스트는 두 가지 과정으로 생성이 된다.

1) 생성 단계(호출)

-variable environment : 현재 컨텍스트 내의 식별자들에 대한 정보, var의 경우 여기에 저장되어서 TDZ에 영향을 받지 않는다.

-Lexical environment :  주로 활용되며, 변경사항이 실시간으로 적용된다, let/const의 경우 여기에 저장되어서 TDZ의 영향을 받는다.

  *environmentRecord : 호이스팅 발생 ( 자바스크립트 엔진은 코드가 실행하기 전 실행 컨텍스트에 속한 변수명을 미리 알고 있다)

  *outerEnvironmentReference : 스코프(변수 선언 시 변수가 인정되는 범위), 스코프체인 형성 (식별자의 범위를 안->밖으로 검색)

 

2) 실행 단계(실행)

:값이 할당되는 단계

 

정리하자면,

javascript엔진은 함수 또는 스크립트를 실행 할때 새로운 Context를 생성한다.

모든 context는 전역 실행 콘텍스트와 시작한다.

 

이때 '선입선출'이 사용된다.

1. global실행 컨텍스트가 생성 + 실행 stack 가장 아래 위치

2. 만약 함수가 있다면 그 함수를 호출할 때 해당 함수의 실행 컨텍스트가 생성된다. 1번위에 쌓인다.

3. 2번 함수 안의 다른 함수를 또 호출 할때 2번 context위에 3번 contextr가 쌓인다.

4. 이후 3번에 해당하는 함수가 리턴된다면(실행이 끝난다면) context에서 제거 (선출)

5.위의 방법으로 하나씩 제거하여 전역 실행 컨텍스트까지 제거된다.

 

---

Hoisting

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

자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(*실행 컨텍스트를 위한 과정)을 거친다.

자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.

코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다.

실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한 실행 컨텍스트 과정(코드를 구분하는 과정)을 거친다.

 

✅ 즉, 호이스팅은 실행 컨텍스트에 의한 위의 과정을 호이스팅이라고 부른다.

 

여기서 var, 함수 선언식은 호이스팅이 되지만 const,let,함수 표현식, class의 경우 호이스팅이 되지 않는다.

다음부터는 그이유의 설명이다.

 

javascript의 경우 변수는 3가지의 과정으로 생성이 된다.

1.Declaration phase (선언단계) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계

2.Initialization phase (초기화 단계) : 실행 컨텍스트에 존재하는 변수 (선언단계의 변수)를 위한 메모리를 만드는 단계 ->undefined

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

 

var와 let,const의 차이점

• var는 변수 선언 전 선언단계와 초기화 단계가 동시에 진행 => 즉 호출하면 바로 undefined 가 나옴(호이스팅)
• let의 경우 var와 다르게 선언단계와 초기화 단계가 분리되어 있어서 메모리 할당이 되어 있지 않아 참조 에러가 발생한다.(호이스팅 x)

var의 생성과정(왼),let의 생성과정(오)

즉 let,const의 경우 선언과 초기화가 분리되어 있는 상태에서 초기화되기 전 호출을 하게 되면 초기화가 되어 있지 않기 때문에 참조에러가 발생한다고 생각하면 된다.

TDZ
오른쪽에 보이는 회색구역이 TDZ구역이다. TDZ 시맨틱은 선언 전에 변수에 접근하는 것을 금지한다. 

TDZ은 선언문이 존재하는 스코프 범위 안에서 변수에 영향을 준다. 즉, const,let,class구문의 유효성에 영향을 미치는 중요한 개념이다.

참고) https://ui.toast.com/weekly-pick/ko_20191014

참고 블로그)

https://ui.toast.com/weekly-pick/ko_20191014

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