변수, 함수, 클래스 호이스팅 정리

📌  선언하는 모든 식별자는 호이스팅 된다

 

변수 선언문 (var, let, const), 함수 선언문 (function, function*), 클래스 선언문 (class) 은 모두 호이스팅이 일어난다.

 

 

📍  변수

 

✔  var 

 

// var 키워드로 선언한 변수는 [1.선언 단계] & [2.초기화 단계]가 동시에 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(VAR);  // undefined

var VAR;

console.log(VAR);  // undefined

// 할당문에서 [3.할당 단계]가 실행된다.

VAR = "var";

console.log(VAR);  // "var"

 

var 선언 & 초기화

var 선언 & 초기화

var 선언 & 초기화 & 할당

 

 

✔  const 

 

❗ const 키워드로 선언한 상수는 반드시 선언과 동시에 초기화 해야한다.❗
( const 는 let 과 다르게, 선언문에서 [ 2. 초기화 단계 ] 만 실행될 수 없다. )

why? let은 변수를 선언하는 키워드지만, const는 상수(원시값 한정)를 선언하는 키워드이기때문에
처음부터 값을 지정해줘야 오류가 생기지 않는다. -> const는 (원시값 한정) 재할당 불가/금지 ⭐

 

📍  const 키워드는 재할당을 금지할 뿐, "불변"을 의미하진 않는다.

새로운 원시값을 재할당하는 것은 불가능하지만 프로퍼티 동적 생성, 삭제, 값 변경을 통해 객체를 변경하는 것은 가능하다.

객체의 프로퍼티가 변경되더라도 변수에 할당된 참조값은 변경되지 않는다.

 

let 재할당

const 원시값 재할당

const 참조값 재할당

 

// const 키워드로 선언한 상수는 런타임 이전에 [1.선언 단계]가 실행된다.
// ❗아직 [2.초기화 단계]는 거치지 않았다❗
// ❗[2.초기화 단계] 이전의 일시적 사각지대(Temporal Dead Zone)에서는 상수를 참조할 수 없다.❗

console.log(CONST);  // SyntaxError: Missing initializer in const declaration

const CONST;

console.log(CONST);  // SyntaxError: Missing initializer in const declaration

CONST = "const";

console.log(CONST);  // "const"

 

const 선언

const 선언

const 선언

const 선언 & 초기화 & 할당

 

 

✔  let 

 

// let 키워드로 선언한 변수는 런타임 이전에 [1.선언 단계]가 실행된다.
// ❗아직 [2.초기화 단계]는 거치지 않았다❗
// ❗[2.초기화 단계] 이전의 일시적 사각지대(Temporal Dead Zone)에서는 변수를 참조할 수 없다.❗

console.log(LET);  // ReferenceError: LET is not defined

// 변수 선언문에서 [2.초기화 단계]가 실행된다.

let LET;

console.log(LET);  // undefined

// 할당문에서 [3.할당 단계]가 실행된다.

LET = "let";

console.log(LET);  // "let"

 

let 선언

let 선언 & 초기화

let 선언 & 초기화 & 할당

 

 

📍  함수

 

함수 선언

 

 

📍  클래스

 

클래스 선언