[JS] - 호이스팅이란? 완벽하게 이해하기 (예제코드, var let const 의 차이점, var를 사용하면 위험한 이유 )

🧹 간단 정리 

호이스팅이란 선언한 변수 및 함수가 단순히 코드 최상단으로 올라오는 것을 의미한다.

var, let, const 모두 호이스팅 방법이 다를뿐 호이스팅이 이루어진다.

• var 호이스팅 방식 : 메모리에 변수 선언 + 'undefind'값으로 초기화 하여 접근가능
• let/const 호이스팅 방식 : 메모리에 변수 선언 단 TDZ에 있어 접근 불가

 

(자세한 내용은 아래에..👀 마무리 글도 꼭 읽는다면 도움이 무조건 될 것이다!)

 

---

 

📈 호이스팅(Hoisting)이란?

호이스팅(Hoisting)은 선언한 변수 및 함수가 선언 범위의 최상단으로 올라가 작동하는 '자바스크립트(JS)의 행동'이다.

이는 변수나 함수가 실제 코드에서 작성된 위치와 관계없이 선언 단계에서 메모리에 저장되기 때문에 발생한다.

 

호이스팅은 크게 변수 호이스팅, 함수 호이스팅으로 나누어져 이는데 아래에서 자세히 다뤄 보겠다!

 

---

🎁 변수 호이스팅(Hoisting)

JS에서 변수를 선언할 때 'var', 'let', 'const' 키워드를 사용한다.
각각의 키워드들의 호이스팅이 어떻게 발생되는지 예제를 통해 확인해 보자.

 

🧑🏻‍💻 예제 코드

지금 당장 크롬 'F12(개발자 도구)' -> 콘솔 로 이동해서 아래 코드를 복사 후 Enter를 눌러보자 (지금 당장!!)

결과를 보고나서 아래 코드를 보면 더 잘 이해가 될 것이다! 😁

myVar=3
console.log(myVar); // 3
var myVar = 5;
console.log(myVar); // 5

console.log(youVar) // undefind
var youVar = 3

console.log(myLet); // ReferenceError
let myLet = 10;

console.log(myLet); // ReferenceError
const youLet = 10;

먼저 'var'로 선언한 myvar를 살펴보자

분명 3번 줄에서 'var myVar = 5;' 선언하였는데

어떻게 최상단에서 접근이 가능할까? 바로 '호이스팅'때문에 가능하다.

그럼 'let, const'로 선언한 mylet, youLet은 왜 'ReferenceError'가 나올까?

이때 "에잇 호이스팅 안된거네!" 라고 생각하면 안된다.

호이스팅은 정말 단순히 최상단으로 올려주는 역할 뿐이고

그 이후에 var과 다르게 let, const는 다른 과정이 추가된다.

다시 말 해 let과 const는 호이스팅 되어 변수를 메모리에 올려놨지만

TDZ라는 지역에 있어 선언한 코드 줄을 지나야 접근 가능한 상태라고 보면 된다.

갑자기 TDZ??...그게뭔데..ㅠㅠ

(정말정말 쉽게 설명해 주는 TDZ 설명글 링크 )

자 그럼 변수 호이스팅은 얼추 이해가 됐으니 '함수 호이스팅'을 확인해 보자!

[JS] - TDZ(Temporal Dead Zone)이란? 간단하고 쉽게 이해하기 (예제코드, 임시 사각 지대란?)

---

 

 🏭 함수 호이스팅(Hoisting)

함수 표현식은 변수 호이스팅과 같은규칙을 따른다.

즉, 함수 표현을 'var'로 하였는지 'let, const'로 하였는지에 따라서 '호이스팅 방식'이 달라진다.

 

[JS] - 함수 선언식과 함수 표현식이란? 간단하고 쉽게 이해하기(예제코드, 함수 선언식과 함수 표

🧑🏻‍💻 예제 코드

console.log(myFunc()); // "Hello, world!"
function myFunc() {
  return "Hello, world!";
}

console.log(myFuncExpr()); // is not a function 에러 표시
var myFuncExpr = function() {
  return "Hello, world!";
};

함수 myFunc는 함수 선언식으로, 코드의 최상단으로 호이스팅된다.

따라서 선언 전에 호출할 수 있다.

 

반면에  myFuncExpr는 함수 표현식으로, var로 선언되었기 때문에 변수 호이스팅 규칙을 따른다.

이 경우 함수가 선언되기 전에 호출하면 TypeError가 발생한다. 

(왜 이때 type에러가 나오는지는 바로 위 '함수 선언식, 함수 표현식 링크 글 참고')

 

 

---

💁🏻‍♂️ 마무리

위 글을 보고 나면 아래처럼 잘 이해했을 것이라 생각한다!! 😁✌🏻

🐣 : "호이스팅은 무조건 일어나구나! 어떤 호이스팅 규칙을 따를지는 '무엇을 어떻게 선언하였는지'에 따라 다르구나!"

 

하지만 현실에서는 많이 혼동해서 사용하고 있다.. 예를들어!
👩🏻‍💻 : "어! 꼼코더님! var는 호이스팅 일어나니 '호이스팅이 일어나지 않는' let이나 const로 수정해 주세요!"

그렇다고 위와 같이 이야기 한다고 해서

어떤 답변을 할지는 상대, 분위기, 상황 등을 잘 고려해서 말 해보도록 하자!

예시 1)

🧑🏻‍💻 : "수정은 하겠습니다! 하지만 오류가 있군요! 호이스팅은 let이나 const도 일어납니다! 다만 TDZ로 이동하여 초기화 전에 사용이 불가능할 뿐이죠! 그러니 '호이스팅이 일어나지 않는다'라는 말은 수정이 필요해 보입니다만..!? (쓰윽 😎)"

에시 2)
🧑🏻‍💻 : "넵! 그렇게 수정하겠습니다(앗..입이 근질근질..!!)"

(그럼 이만...돔황챠!! 😂 💨)