[JS] 호이스팅

김땅주·2021년 7월 5일
0

Javascript

목록 보기
8/23
post-thumbnail

✔ 호이스팅이란?

호이스팅이란? 함수 내부의 선언문을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

함수 선언식, var, let, const 경우 호이스팅이 일어난다.

자바스크립트에서 변수 선언은 선언->초기화 단계를 거쳐 수행한다.

  • 선언단계 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
  • 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

var의 경우 선언과 초기화가 동시에 일어나기 때문에 호이스팅이 되면 undefined가 일어난다.


var의 경우 예제)


console.log(a); ////undefined(초기화)

var a = 1

console.log(a); /// 1 

함수선언식 경우 예제)

catName("Chloe"); ///함수호출이 먼저 일어난다

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe" 
*/

하지만 let과 const의 경우에는 호이스팅이 일어나지만 선언과 초기화가 분리되어 진행되는데,

호이스팅이 되면 선언이 진행되고 초기화는 진행되지 않아 RefeerenceError가 뜬다.

선언만 되었기 때문에 참조오류가 뜬다.

(let과 const가 호이스팅이 일어나지 않는다고 착각하지말자!)

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

let a = 1

console.log(a);

Temporal Dead Zone

위의 예제와 같이 var와 let/const와 같은 범위 차이는 TDZ에 의해 제약을 받는다는 것이다.

즉, let/const 경우 변수가 초기화되기 전에 엑세스 하려고 하면 ReferenceError가 발생한다. 이는 호이스팅을 수행하기 때문에 나타나는 에러이다.

profile
일곱 번 넘어져도 여덟 번 일어나면서 성장하는 프론트 개발자입니다

0개의 댓글

관련 채용 정보