let과 const도 hoisting한다.다만...

SungJunEun·2021년 10월 9일

JavaScript

JS의 기본 개념들

목록 보기

3/9

피드백 및 오류 수정은 항상 환영합니다. 꼭 이상하거나 잘못되어져 있는 내용들에 대해서는 딴지를 걸어주세요!🐶

Hoisting의 정의

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것(사실 실제로 코드의 위치가 위로 옮겨지는 것은 아니다.)

Variable Lifecycle

Delcaration Creation Phase에서 environment record에 등록
Initialization 변수를 위한 메모리를 만드는 단계. 할당된 메모리에는 undefined로 초기화됨.
Assignment undefined로 초기화된 메모리에 다른값을 할당

var 변수의 lifecycle

declaration과 initialization이 동시에 일어난다. 고로 변수를 선언전에 접근하여도 undefined가 뜬다.

let, const 변수의 lifecycle

declaration phase와 initialization phase가 따로 일어나고, TDZ는 그 사이 시간, 즉 스코프의 시작 지점에서 초기화 시작 지점까지 구간을 말한다. Initialization phase는 변수 선언문에 도달해야 이뤄진다.

Let과 Const도 hoisting한다.

단지 Creation Phase에서 var로 선언한 변수들은 undefined로 초기화되는 것과 달리, let과 const로 선언하면 uninitialized 상태로 남는다. 그리고 initialized되기 전에 접근하려고 하면 오류를 나타낸다.

let foo = 1; // 전역 변수

{
  console.log(foo); // ReferenceError: foo is not defined
  let foo = 2; // 지역 변수
}

hoisting이 아예 안일어난다면, Scope chain에 의해 전역 변수인 foo에 할당된 1이 출력되야 하지만, let으로 선언된 foo는 블럭 스코프안에서 hoisting이 되고 변수 선언문을 만나기전까지 TDZ에 빠져서 오류를 출력한다.

let & const에 다양한 사실들

let과 const 키워드는 block scoped이다.

    {
    	let i = 3;
    }
    console.log(i); // error

let과 const는 TDZ에 의해 제약을 받는다.

Temporal Dead Zone : 스코프 시작지점(declaration phase)부터 initialization phase까지
let으로 선언한 변수를 선언할 때 초기값을 안 주면 undefined로 할당된다.
let과 const의 차이점은 값을 재할당가능한지 여부이다.

번외; 함수 표현식은 hoisting되지 않는 이유

function declaration의 lifecycle

함수 선언식에서는 declaration, initialization, assignment phase가 동시에 일어난다. 이 말은 함수의 해당 scope가 시작되자마자부터 함수에 정상적으로 접근이 가능하다는 것이다. 하지만 함수 표현식은 어떨까?

sayWow(); 
sayYeah();  // 할당되기 전에 호출되서 error
var sayYeah = function() { // var로 선언되었으니깐 선언됨과 동시에 undefined로 할당됨
  console.log('yeah');
} 
function sayWow() { // 선언과 동시에 초기화, 할당까지
  console.log('wow'); 
}
// wow
// error