JS에서 호이스팅

괴짜 여러분, 오늘은 JS의 호이스팅에 대해 읽어보겠습니다.

호이스팅은 모든 JS 개발자가 알아야 할 기본 사항 중 하나입니다.
간단히 말해서 호이스팅을 사용하면 함수와 변수를 선언하기 전에 사용할 수 있습니다.
아래 코드를 살펴보자

console.log(name)
var name = 'hello JS'

이 경우 JS는 '정의되지 않음'을 출력하는 대신 오류를 발생시키지 않습니다. 이것이 호이스팅의 전부입니다. JS가 변수와 함수에 메모리를 할당한 후 실행하기 때문에 발생합니다. 메모리 할당 단계에서 변수 이름은 undefined 로 초기화되므로 오류가 발생하지 않습니다. 실행 컨텍스트에 대해 알면 호이스팅을 더 잘 이해하는 데 도움이 됩니다. 실행 컨텍스트에 대한 내 기사를 확인할 수 있습니다.

가변 호이스팅

변수 호이스팅은 변수가 선언된 방식에 따라 다르게 동작합니다. 아래 코드를 살펴보자

console.log(testVar)
let testVar = 'hello JS'

var와 달리 참조 오류가 발생한다는 것은 상당히 놀라운 일입니다. const 도 동일한 동작을 나타냅니다. let과 const가 일시적인 데드 존에 있을 때 이러한 오류가 발생합니다. 일시적 데드 존은 변수가 선언되고 값이 할당되는 사이의 시간에 불과합니다.

let과 const는 선언 전에 변수를 사용하지 않기 위해 ES5에 도입되었습니다. 인터프리터는 let과 const를 호이스트하지만 다른 메모리 공간에서 호이스트하지만 var의 경우 전역 실행 컨텍스트에서 호이스트합니다.

함수 호이스팅

함수도 변수와 같은 방식으로 호이스팅됩니다. 다음 코드를 살펴보겠습니다.

getName()
function getName() {
    console.log("function")
}

여기서는 getName이 실행되기 전에 할당된 메모리이므로 'function'을 출력합니다.

다른 예를 보자

getName()
const getName = () => {
  console.log("Inside function")
}

여기에서 이전 예제와 달리 참조 오류가 발생하는 것을 보고 놀랄 것입니다. 여기서는 'getName'이 변수처럼 동작하기 때문입니다. 함수 선언만 호이스팅되며 함수 문은 아닙니다.