호이스팅이란?

호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

• 실제로 데이터가 최상단으로 올라간 것은 아님!

const,let과 var

• const,let과 var 모두 호이스팅이 발생하는 것은 맞으나, let과 const 에서는 변수가 선언되기 전까지는 일시적 사각지대(Temporal Dead Zone; TDZ) 로 빠지기 때문에 선언전에 호출시 에러가 난다!
• 반면 var로 변수를 선언하는 경우, 선언전에 호출시 undefined로 출력이 된다.

함수 선언식 (Function declarations)

함수 선언식은 호이스팅 된다.

hoisted(); // Output: "This function has been hoisted."

function hoisted() {
  console.log('This function has been hoisted.');
};

함수 표현식 (Function expressions)

함수 표현식은 호이스팅 되지 않는다.

expression(); //Output: "TypeError: expression is not a function

var expression = function() {
  console.log('Will this work?');
};

호이스팅의 문제점

• 변수이름이 중복되어도 에러가 나지 않는다. => 변수이름이 중복될 수 있음

var a = 3;
console.log(a) //3
var a = 'hi';
console.log(a) //hi      

• 변수가 선언되기 전에 호출해도 에러가 나지 않는다. => 말이 안되는 코드

console.log(a) //undefined
var a = 'hi';
console.log(a) //hi      

따라서 var말고 let을 쓰자~~!!

출처
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/
https://velog.io/@1nthek/JavaScript-%EB%B3%80%EC%88%98%EC%99%80-%ED%95%A8%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90