[JS] 호이스팅(Hoisting) 이란?

호이스팅(Hoisting)이란?

JS는 처음에 스크립트를 읽어들일 때 변수명과 함수명만 읽은 후 변수명의 메모리공간을 할당해 둔다.
그 이후 다시 읽어들이며 변수의 데이터를 저장한다.
이 때 변수가 선언되기 이전에 그 변수를 찍으면 면수가 선언된 상태이니 undefined가 나오게 되고, 에러가 발생하지 않는다.
이처럼 호이스팅은 코드를 실행하기전 변수,함수 선언을 스코프 최상단으로 끌어 올려진것 같은 현상을 말한다.
이런 호이스팅은 결과 예측이 어렵게 되고, 로직의 흐름에 방해가 되기 때문에 이러한 현상은 좋지 않다. 그래서 ES6 이후에는 이를 보안하고자 호이스팅이 발생하지 않는것 처럼 동작하는 let과 const를 만들었다.

var

es6이전에는 var를 사용했다.
var를 사용하면 아래와 같이 호이스팅이 일어난다.
선언하기 이전에 console.log(apple)을 했을때 이미 선언을 했을때와 같은 결과값인 undefined가 나온다.
또 초기화를 선언 위에 작성해도 오류없이 잘 할당되는 것을 볼 수 있다.
이렇게 이상한 코드로 작성해도 잘 동작한다는 것이 문제이다.

console.log(apple) // undefined
apple = 1 // 초기환
console.log(apple)// 1
var apple // 선언

그 외에도 중복선언이 가능하고
(이미 apple 이라는 변수가 있는데 또 apple이라는 변수를 선언하는 것)
for문 안에서 선언했을때 for문 밖에서도 접근이 가능하다
그렇기 때문에 전역변수로 선언되어버릴 수도 있다.

for (var i = 0; i < 5; i++){
  var apple = 10
}
console.log(apple); // 10
console.log(i); //5

이러한 문제들을 해결하고자 let과 const가 나왔다.
그렇기 때문에 var는 가급적 사용하지 않는 것이 좋다.

let과 const

let과 const는 호이스팅이 일어나지 않은것 처럼 작동한다.
또한 블록 레벨의 스코프를 따르게 됨다.

console.log(apple) // 🚨error: is not defined
let apple // 선언
apple = 1 // 초기환

let과 const의 차이는 재할당의 가능여부에서 차이가 있다.
let은 재할당이 가능한 반면 cosnt는 재할당이 불가능하다.

< Refer to >
Mdn: 호이스팅
JavaScript에서 var를 사용하면 안되는 이유