호이스팅이란?

호이스팅이란 함수 안에서 선언들을 모두 끌어올려 해당 함수 유효범위의 최상단에 선언하는 것을 말합니다.

선언하지 않은 변수의 타입은 항상 undefined이며 이 변수를 선언 전에 참조하게 되면 defined 되지 않았다는 ReferenceError가 발생하지만

호이스팅이 일어난 변수의 경우 선언 전에 참조하게 되어도 에러가 발생하지 않습니다.

호이스팅의 경우 변수선언 중 let, const 변수선언과 함수표현식에서는 호이스팅이 발생하지 않으며,
var 변수/함수의 선언문에서만 호이스팅이 일어납니다.

console.log('hello world!');
var name = 'hwang';
let letName = 'ch';
const age = 27;

이라는 코드가 자바스크립트에서 실행되었을때

js 내부에서는

var name; // hoisting 선언 및 초기화
console.log('hello world!');
name = 'hwang'; //할당
let letName = 'ch';
const age = 27;

순서로 동작합니다.

const, let은 호이스팅이 되지 않나?

TDZ(Temporal Dead Zone)

TDZ는 선언문을 만나 초기화가 완료되기 전까지 변수를 참조하면 참조에러를 발생시키는 역할을 합니다

var는 선언과 동시에 무조건 undefined 값으로 초기화 하기 때문에 TDZ에 영향을 받지 않는다

const와 let도 호이스팅의 영향을 받지만 TDZ의 영향을 받아 참조에러가 발생한다.

결론

var의 경우 변수 선언 전에도 호이스팅이 일어나(변수 선언와 초기화가 동시에 되어 tdz의 영향을 받지 않는다) var 사용은 피하는 것이 좋다.