[JS탐험기] 호이스팅이란?

호이스팅이란 무엇일까?

MDN에서 나오는 호이스팅의 정의는 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 얘기하는 데 보통 이렇게 얘기하면 이해가 안되지.... 말이 너무 어려우니 간단하게 설명 들어갑니다.

보통 코드에 선언된 변수 및 함수를 코드 상단으로 월척을 낚는 낚시꾼처럼 상단으로 올리게 된다.

그런데 이렇게 애기해도 이해가 안 될거다. 왜냐 나도 이해가 안 된다.
그러므로 킹갓 만수르 mdn에 나오는 예제를 확인해보자

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화

원래라면 num은 Uncaught ReferenceError 가 뜨게 된다.
하지만 여기서 호이스팅의 거지 같은 점 var의 나쁜 점이 나오게 되는 데 var 같은 경우 변수명을 초기화 하여 가져오기에 값이 초기화가 되버린다. 이상태로 호이스팅 즉 최상단으로 가져오게 되면 이 값은 값이 없는 경우인 undefined가 나온다. 정말 정말 거지 같은 경우라고 할 수 있다.
물론 여기서 let을 사용하게 될 경우 변수는 초기화가 되지 않기 때문에 원래 떠야할 Uncaught ReferenceError가 나오게 된다.
(let과 var의 차이는 변수를 초기화 하냐 안 하냐로 따진다.)

그러므로 var 보다는 let을 더 사용하자 호이스팅으로 인해 문제가 발생하는 경우가 생긴다. 주로 작업을 하다 변수의 값이 초기화 되버리면서 다른 값이 되어버리는 경우가 있다. 그랬다가는 진짜 아무 생각 없이 작업하다가 호이스팅 때문에 ㅂㅇ될 때 샷건이 필요할테니 조심하자 작업을 이중 삼중으로 검수를 해야 할 일도 있으니 조심 해야한다.

즉 마무리를 하자면

TIP
1. 코드의 가독성과 유지보수를 제대로 하고 싶다면 호이스팅이 일어나지 않게 해야 한다.
2. VAR를 쓰면 혼란스럽고 머리가 아파진다. let을 쓰긴 해야 하는 데 es6를 어떻게든 적용을 시키려면 트랜스 컴파일이 필요하다. 무조건적으로 let을 사용하기 보다는 트랜스 컴파일이 가능한 상황에서 작동하도록 해야한다.

이만 듀-바