해보자고

[인프런] 호이스팅 본문

프로그래밍/자바스크립트

[인프런] 호이스팅

초코맛동산 2024. 8. 18. 20:26

1. 호이스팅 

  • 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 끌어올려 사용하는(것 처럼 보이는) 작동 방식.
  • 자바스크립트의 기본 성질
  • 변수, 함수 선언 후 접근 하는 코드가 바람직함.
  • 호이스팅 많이 발생하는 코드는 가독성이 좋지 않아 오류를 발생시킬 수 있음.

 

1. 함수 호이스팅 

: 함수 선언의 유효 범위를 최상단으로 끌어올려서 작동하는 것. 

print();

function print() {
    console.log("Hello World!");
}

 

-> 자바스크립트 엔진이 print() 호출이 선언문보다 아래에 있다고 받아들임. 

 

 

2. 변수 호이스팅

: 변수의 선언문을 스코프의 최상단으로 올려 해석하여 작동하는 것. 

console.log(name);

var name = "cat";

// 자바스크립트가 해석한 코드 
var name;
console.log(name);
name = "cat";

 

-> 따라서 변수에 값이 할당되지 않을 때 자동으로 할당되는 값인 undefined가 출력됨. 

 

2.1 let과 const의 변수 호이스팅

 

-> 호이스팅이 발생하지 않는 게 아니라, 변수 스코프의 맨 위에서 초기화가 될 때까지 TDZ에 있기에(변수의 초기화가 완료될 때까지 TDZ에 있음.  ) 호이스팅이 발생하지 않는 것 처럼 보임. 

 

 

TDZ(Temporal Dead Zone)
: 일시적인 사각지대, 변수를 사용하는 것을 허용하지 않는 공간.

var vs let, const
var -> 변수 선언 완료시 메모리 공간 할당
let, const -> 변수가 초기화될때까지 메모리 공간 할당 X -> TDZ에 머무름.