호이스팅(Hoisting)이란?

삽질 저장소·2022년 6월 15일
0

JavaScript

목록 보기
2/4
post-thumbnail

호이스팅

호이스팅이란 실행 시 코드 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올려 유효범위의 최상단으로 끌어올리는 것

하지만!!! 호이스팅은 '선언'에서만 발생한다.

console.log(helloA()); // "안녕A"
console.log(helloB()); // 정의되시않은 함수 helloB (에러)

function helloA() {
  return "안녕A";
} //함수선언식

let helloB = function () {
  return "안녕B";
}; //함수표현식

위의 예시처럼 helloA함수는 함수 선언식으로 호이스팅의 대상이지만 helloB함수는 함수 표현식이기 때문에 호이스팅이 발생하지 않는다.

console.log(num); //undefined

var num = 6; // 값 할당

console.log(num); // 6

위의 예제는 num이라는 변수를 선언한 후 6이라는 값으로 할당을 한 경우다. 이러한 경우 선언 시점의 num에 대해서만 호이스팅이 발생하므로 선언시점에 초기화 된 undefined가 출력된다. 6이라는 값의 할당은 실제 코드가 순차적으로 실행되는 런타임에서 실행된다.

console.log(num); // Uncaught ReferenceError: name is not defined 참조에러 발생

let num = 6;

변수는 선언 > 초기화 > 할당 에 걸쳐 생성되는데 var는 선언과 동시에 undefined로 초기화가 이루어진다.

하지만 let은 선언과 초기화가 분리되어 진행된다. 즉 런타임 이전에 선언은 되지만 초기화가 되지 않아 호이스팅 시 해당 변수에 접근할 수 없는 참조에러가 발생한다.

0개의 댓글