[JS] Hoisting & TDZ

그래도 해야지·2023년 3월 28일
0

JavaScript

목록 보기
2/11
post-thumbnail

var, let, const 비교

var

  • 재선언, 재할당 가능
  • 변수를 선언하기 이전에도 참조가 가능해지는 문제가 발생함
  • 선언 이전에 참조가 가능하기에 호이스팅이 일어남

let

  • 재할당만 가능
  • 호이스팅이 되지만 TDZ현상이 일어남

const

  • 재선언, 재할당 모두 불가
  • 호이스팅이 되지만 TDZ현상이 일어남

Hoisting

그대로 끌어올려진다는 의미를 가짐
자바스크립트 엔진의 동작 과정 중 일부를 쉽게 이해하기위한 가상의 개념
=> 호이스팅을 제대로 이해하기위해선 실행 컨텍스트, 자바스크립트 엔진, 컴파일 과정, 스코프, 자바스크립트의 메모리 관리 등을 모두 이해해야 함

호이스팅이란 자바스크립트 엔진이 실제로 식별자들을 끌어올리는 것은 아니지만 식별자들을 편의상 끌어올린 것으로 간주하는 것
자바스크립트가 실제로 실행되기 이전에 유효 스코프 안에서 변수값들을 모아서 마치 유효 스코프 최상단에 선언한 것처럼 해석할 수 있다는 것

Temporal Dead Zone(TDZ)

letconst로 선언한 변수는 var처럼 호이스팅이 일어나지만, var과 다르게 초기화가 되기 전까지 TDZ라는 곳에 머물러 초기화(혹은 할당)이 될 때까지 잠시 '죽어있는 상태'이기 때문에 선언 전에 참조가 불가능한 것
TDZ를 직역하면 '임시로 죽어있는 공간'이고, 선언 전에 변수를 사용하는 것을 비허용하는 개념상의 공간

var와 달리 선언 전에 변수를 사용하지 못하는 것인데,
TDZ의 변수와 선언되지 않은 변수를 구별할 수 있을까?
먼저 typeof 연산자로 쉽게 확인할 수 있는 방법이 있다.
typeof notDefined; // 'undefined'

typeof variable; // ReferenceError : Cannot access 'a' before initialization
let variable;

즉, 아예 선언이 되지 않은 변수는 'undefined' type이지만, TDZ에 있는 식별자에는 접근하는 것 자체로 에러를 발생시키고 있음

정리

호이스팅이란 자바스크립트 엔진 동작을 이해하기 쉽게 하기 위해 만들어진 개념으로, 변수 및 함수 선언이 유효 스코프 최상단으로 끌어올려진 후에 코드를 실행하는 것으로 생각하는 것
var, let, const 키워드로 선언된 변수는 선언 부분만 끌어올려진다고 생각할 수 있다.
따라서 var의 경우에는 변수 선언전에도 참조할 수 있지만 할당을 하지 않았기에 undefined이다.
그러나 letconst의 경우 식별자가 호이스팅 후 실제 코드에서 선언되기 전까지 TDZ에 있기 때문에 let, const 선언 코드가 있는 곳 이전에는 해당 변수에 참조할 수 없게 된다.

0개의 댓글