Hoisting

이번 주제는 자바스크립트에서 호이스팅(Hoisting)에 관한 주제이다.

 

호이스팅 이란? 😊

선언한 코드를 내부적으로 최상단으로 끌어올림
var와 함수 선언이 대상
선언된 var는 최상단으로 올라간다는 의미
선언된 let, const는 최상단으로 올라갈 수 없음
선언된 함수는 최상단으로 올라간다는 의미

 

변수 선언 순서 😊

자바스크립트에서 변수선언은 선언 -> 초기화 -> 할당 단계를 통해 수행
var 키워드를 통한 변수 선언은 SCOPE 선두에서 선언과 초기화 단계가 동시 진행
let과 const는 변수 중복선언이 불가하고 블록레벨 스코프 지원
let으로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행
const으로 선언한 변수는 선언 단계와 초기화 단계가 동시에 진행

 

예시 👇🏻👇🏻

// 호이스팅 예제(1) var
/* console.log(num1); //10이 아니라 undefined 출력
var num1 = 10;
console.log(num1); //10;

// 호이스팅 실습(2) let
// TDZ(Temporal Dead Zone): 일시적 사각지대, 변수는 있지만 초기화 또는 할당 안됨 -> 에러 발생
//undefined가 아닌 Error 발생

//TDZ 구간
console.log(num1); //Uncaught ReferenceError: num1 is not defined

//선언
let num1;

// 호이스팅 실습(3) const
// TDZ(Temporal Dead Zone): 일시적 사각지대, 변수는 있지만 초기화 또는 할당 안됨 -> 에러 발생
//undefined가 아닌 Error 발생

//TDZ 구간
console.log(num2); //Cannot access 'num2' before initialization

//선언
const num2 = 20;

// 호이스팅 실습(4) func
console.log(sum(10, 20)); //30

//호이스팅
function sum(num1, num2) {
  return num1 + num2;
}

 

마무리 😊

var는 호이스팅 되며 값이 없으면 undefined로 초기화

let은 is not defined 에러
const는 Cannot access before initialization 에러