[기술] Hoisting 정리

📌 Hoisting(호이스팅)?

: 변수를 만나면 선언부분을 강제로 (변수 범위의)맨위로 끌어올리는 현상

" Move declaration from bottom to top "

• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언함
• 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑음
• 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것

⭐️ 'var 변수 선언'과 '함수 선언문'에서만 호이스팅이 일어난다.

📌 var hoisting

: var는 let/const와는 달리 선언하기 전에 값을 할당해도 된다.

예시를 통해 자세하게 살펴보자!

{ // var 의 경우
  age = 4;
  var age;
  console.log(age); // 4
}

👉 var age = 4;가 아니라 age에 4를 할당(age = 4;)하고, 그 뒤에 age를 불러와도(var age;)
var age = 4의 값이 제대로 출력되는 것을 볼 수 있다.

{ // let 의 경우
  age = 4;
  let age;
  console.log(age); // error!
}

👉 하지만 let의 경우, 선언하기 전에 값을 할당하면 그 값이 할당되지 않는 것을 볼 수 있다.

즉, let은 먼저 선언해야 그 값이 할당되고 출력되지만,
var는 선언하기 전에 값을 할당해도 출력되는 var hoisting이 발생한다!

📚 Reference

: https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html