🎣자바스크립트의 호이스팅

let globalNum = 100;

function testFunc() {
  console.log(globalNum);
}

testFunc();  // 100 
console.log(globalNum);  // 100 

JS로 작성된 코드는 위에서 아래 방향으로 순차적으로 진행됨❗

그렇기에 '함수'나 '변수'의 선언문 먼저 작성한 다음
함수 호출하거나 변수에 접근하는 것이 일반적🙆‍♀️

하지만 JS의 '호이스팅' 특징 활용하면
특정 함수의 호출이나 변수를 활용하는 코드가
함수 또는 변수의 선언문보다 위쪽에 작성되어 있더라도
😎 에러 발생시키지 않을 수 있음 ✅

🎣호이스팅

JS에서 변수와 함수의 선언문이 해당 범위의 가장 위쪽으로 끌어올려지는 듯한 현상

🔥변수 호이스팅 && 함수 호이스팅

🔹 함수 호이스팅 - 두 개의 문자열 합치는 예제

connectStrings('study', 'hoisting');

function connectStrings(str1, str2) {
  console.log(str1 + str2);
}

일반 방식과 다르게 함수가 선언되기 이전에 호출📢

✨코드 정상적으로 작동된 이유✨
👉 JS 엔진이 코드를 해석하는 과정에서
이 connectStrings 함수의 호출문 보다
선언문을 더 먼저 작성된 코드로 받아들였기 때문😯

🔹 변수 호이스팅

⚡let의 변수 호이스팅

console.log(num1);
let num1 = 123;

🚨num1 변수가 초기화 되기 전에 접근할 수 없다는 에러가 뜸🚨

var와 달리 let & const로 선언된 변수
👉 변수 스코프 위쪽에서 변수의 초기화가 완료화 될 때까지
☠️ TDZ 라는 공간에 있기 때문 ☠️

👻Temporal Dead Zone➡일시적인 사각지대
다시 말해, 변수를 사용하는 것을 허용하지 않는 공간✔

🔍JS 엔진이 해석하는 순서대로 봐보자👀

let & const➡호이스팅 발생하지 않는 것 ❌
var와 달리 변수 스코프의 가장 위쪽에서
num 변수의 초기화가 완료될 때까지 해당 코드가
TDZ 공간에 있기에 호이스팅 발생하지 않는 것처럼 보이는 것💡

🧐let & const로 선언된 변수가 초기화 진행될 때까지 TDZ에 머물러 있는 이유

var➡변수 생성한 다음 바로 메모리 공간에 변수의 공간을 미리 할당해주지만
let & const➡변수 초기화 될 때까지 메모리 공간이 확보되지 않기 때문⭕

💣해당 키워드로 생성된 변수는 사용할 수 없는 공간인 TDZ에 들어가게 됨💣

호이스팅은 JS의 기본 성질이지만
호이스팅 많이 발생하게 작성된 코드는 가독성⤵
코드를 직관적으로 해석하기 어려워 코드 이해도⤵
💥 여러가지 오류들을 일으킬 수 있음 💥

가능한 var 대신 let이나 const 사용🙆‍♀️
⚠ TDZ 때문에 선언 전에 변수나 함수에 접근하지 않도록 주의 ⚠

let num = 123;
console.log(num);

항상 선언 이후에 사용하는 게 안전👍

⚡var의 변수 호이스팅

console.log(num2);
var num2 = 123;

이번엔 var로 이용해 코드 작성한 다음 실행해보면
다음과 같이 'undefined' 라는 값이 출력됨❗

🔻에러가 아닌 'undefined' 값이 출력된 이유
👇 JS 엔진이 해당 코드를 아래와 같이 해석 했기 때문 🔥

var num;
// 1. 이렇게 변수의 선언문만을 스코프의 최상단으로 끌어올린 다음

console.log(num);
// 2. 코드를 실행하고 

num = 123;
// 3. 변수의 초기값을 할당함

JS 엔진이 해석한 코드 살펴보면
🌟num 변수의 값이 할당되기 이전에 먼저 코드를 실행했기 때문에
num 변수엔 아무런 값도 할당되어 있지 않아 'nudefined' 값이 출력 되는 것