호이호이 호이스팅! (++변수)

오늘은 제가 면접을 보면서 질문을 받았던 호이스팅에 대해서 글을 써보려고 합니다

완벽하게 답변하지는 못한 것 같아서 다음에는 더 완벽하게 답변하기 위해 이렇게 글을 쓰게 되었습니다

호잇

---

호이스팅이란?

JavaScript에서 호이스팅은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다

단순하게 단어를 해석하자면 스크립트 내 변수와 함수의 선언 순서에 상관 없이 순서가 끌어올려진 듯한 현상입니다

물리적으로 끌어올려지는게 아니라 JS 엔진이 코드를 스캔하고 실행컨텍스트에 미리 기록해 놓아서 이런 현상이 발생하는 것입니다

---

예시

함수 호이스팅

example() // 실행 됨 result: "호잇 호이스팅"

function example(){ 
	console.log("호잇 호이스팅");
}

 

var 변수 호이스팅

변수가 호이스팅 될 때는 선언, 초기화만 된채로 호이스팅 되고 할당까지 호이스팅 되지 않습니다

console.log(think); // result: undefined
var think = "배고파";
console.log(think); // result: "배고파"

란

const, let 변수 호이스팅

변수가 선언되기 이전 라인에 해당 변수를 출력하는 코드를 작성한 경우 참조 오류가 발생합니다

오류가 발생했다고 해서 const와 let으로 선언한 변수는 호이스팅의 예외가 되는 것은 아닙니다

여기서 TDZ라는 개념이 나오게 됩니다

// case const
console.log(think); // result: ReferenceError
const think = "배고파";

// case let
console.log(think); // result: ReferenceError
let think = "배고파";

---

const vs var vs let

• var
  • scope 전역 범위 혹은 함수 범위로 지정
  • 재선언 가능
  • 값 재할당 가능
• let
  • 블록 범위 (블록은 {}로 바인딩된 코드 청크)
  • 재선언 불가능
  • 값 재할당 가능
• const
  • 블록 범위
  • 재선언 불가능
  • 값 재할당 불가능

---

TDZ(Temporal Dead Zone)란?

JavaScript에서 let이나 const로 선언된 변수가 선언되기 전까지 접근할 수 없는 구간을 말합니다

그러나 let과 const는 호이스팅은 되지만 초기화되기 전까지 TDZ에 존재하여 선언 전 접근을 해서 ReferenceError가 발생했던 것입니다

---

글을 마치며

오늘은 호이스팅에 대해서 알아보았는데 다 제대로 알고 있었다고 생각 했는데

조금 부족하게 알고 있는 부분도 있었던거 같습니다

글을 읽어주셔서 감사합니다