🔥 호이스팅 [JS]

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 가상현상을 뜻한다.

✅ 변수가 선언된 줄 이전에 해당 범위에서 변수 값을 사용할 수 있는 경우 ("값 호이스팅")
✅ 변수가 선언된 줄 이전에 해당범위의 변수를 참조할 수 있지만 ReferenceError을 던지지 않고 값이 항상 undefined인 경우("선언 호이스팅")
✅ 변수를 선언하면 변수가 선언된 줄 앞의 범위에서 동작이 변경된다.
✅ 선언의 부작용은 선언이 포함된 나머지 코드 평가하기 전에 발생한다.

함수 호이스팅의 특징을 잘 활용을 하려면 함수 선언문 과 함수 표현식을 이해를 해야한다.

// 함수 선언문
function a () { /* ... */ }
// 함수 선언식
const b = function () { /* ... */}

여기서 함수 선언문은 호이스팅이 적용되어 함수 선언문보다 함수 호출을 먼저 작성하여도 잘 작동이 된다. 하지만 함수 표현식은 호이스팅이 적용되지 않기 때문에 함수 표현식을 작성하기 전에 호출을 하게 되면 코드가 작동하지 않는다.
이렇게만 보면 함수 선언문이 코드 정리하기에 훨씬 편해보일 수도 있지만 큰 단점이 존재한다.

협업을통해 규모가 큰 프로젝트를 진행할때 함수 선언문으로 서로 다른 사람이 같은 이름의 함수를 선언했다고 가정해보자 ( 내부 실행은 다른 코드 ) 이런 경우 함수 선언문으로 선언된 함수는 호이스팅이 적용되어 전역에 실행되기 때문에 문제가 생길 수 있다.
그렇기 때문에 함수 선언문과 함수 선언문의 특징을 잘 이해하고 사용을 하는 것이 좋다고 할 수 있다.