[JS] 호이스팅

---

알고있으면 좋은 Javascript Tip✨

---

호이스팅

• 호이스팅은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것이다.

 

(1) 호이스팅 대상은?

• var 키워드는 호이스팅이 발생하게되면 선언과 동시에 초기화를 진행하고, 변수의 재선언과 재할당이 모두 가능하며 함수 스코프에 종속된다.
• let 키워드는 블록 레벨 스코프에 해당하며, 변수의 재선언이 불가능하지만 재할당은 가능하다.
• const 키워드도 마찬가지로 블록 레벨 스코프에 해당하며, 변수의 재선언과 재할당 모두 불가능하다.

// 예제 (1)
console.log($test);  // undefined
var $test = true;
console.log($test);  // true

// 예제 (2)
console.log($test);  // 에러 발생
let $test = true;  

console.log($test);  // 에러 발생
const $test = true;

• 예제 (1) var 키워드로 선언한 $test 변수가 가장 위로 호이스팅이 되기 때문에 에러가 발생하지 않는다. var 키워드로 선언된 변수는 할당된 초기값이 없을 시 기본값 undefined로 초기화가 된다.
• 예제 (2) let, const 키워드로 선언한 변수도 호이스팅이 발생은 하지만 var 키워드로 선언된 변수와는 달리 undefined 로 초기화 되지 않기 때문에 ReferenceError가 발생한다.

 

(2) 함수 레벨 스코프(Function-level scope)

• 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
• 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

 

(3) 블록 레벨 스코프(Block-level scope)

• 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
• 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

 

(4) TDZ(Temporal Dead Zone)

• 한글로 직역하자면 일시적인 사각지대란 뜻이다.
• 이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말한다.