자바스크립트 호이스팅

JavaScript는 코드를 실행하기 전에 이를 구문 분석하고 찾은 모든 함수와 변수 선언을 자체 메모리에 추가합니다. 이것을 호이스팅이라고 합니다.

함수 선언과 함수 표현식을 사용할 때 발생하는 몇 가지 다른 동작이 있습니다.

함수 선언을 사용하면 정의되기 전에 함수를 호출할 수 있으며 코드가 작동합니다. 다른 경우에는 오류가 발생합니다.

일반적으로 사용하기 전에 함수, 변수, 객체 및 클래스를 정의하는 것이 일반적입니다.

함수가 있다고 가정합니다.

function cat() {
  alert("I'm a cat that meows!")
}

호이스팅으로 인해 선언되기 전에 cat()을 호출할 수 있습니다.

cat()
function cat() {
  alert("I'm a cat that meows!")
}

이것은 함수 표현식이 아닌 함수에서만 발생합니다.

변수에 함수를 할당하는 것은 함수 표현식입니다.

cat()
var cat = function() {
  alert("I'm a cat that meows!")
}

이 경우 var 선언은 다음과 같이 undefined 값으로 호이스트되고 초기화됩니다.

var cat = undefined
cat()
cat = function() {
  alert("I'm a cat that meows!")
}

이 코드를 실행하면 TypeError: cat is not a function error.
const 및 let 선언도 호이스트되지만 var와 같이 undefined로 초기화되지 않습니다.

const cat = function cat() {
  alert("I'm a cat that meows!")
}

const cat = function () {
  alert("I'm a cat that meows!")
}

또는

let cat = function cat() {
  alert("I'm a cat that meows!")
}

let cat = function () {
  alert("I'm a cat that meows!")
}

이 경우 선언하기 전에 cat()을 호출하면 ReferenceError: 'cat' is not defined error가 표시됩니다.

객체나 클래스를 변수에 할당하는 다른 표현식에서도 마찬가지입니다.

클래스 선언은 let 및 const 선언처럼 작동합니다. 클래스 선언은 호이스팅되지만 초기화되지 않으며 선언 전에 클래스를 사용하면 ReferenceError: 정의되지 않음 오류가 발생합니다.

간단한 팁:

변수 값을 다시 할당하지 않는 경우 const를 사용하는 것이 좋으며 그렇지 않으면 let을 사용하십시오.

예시:

하지마

const meow = 'meow'
meow = 'meow, Angry cat!!! 

이것은 작동하지 않습니다 - 당신에게 줄 것입니다 SyntaxError: Invalid or unexpected token
대신에:

let meow = 'meow'
meow = 'meow, Angry cat!!! 

요약:

모든 함수 선언은 Javascript가 실행되기 전에 현재 범위의 맨 위로 호이스트됩니다.

함수 선언이 정의되기 전에 호출할 수 있으며 코드가 작동합니다.

함수 표현식은 호이스트되고 undefined 값으로 초기화되므로 오류가 발생합니다.

변수 값을 다시 할당하지 않는 경우 const를 사용하는 것이 좋으며 그렇지 않으면 let을 사용합니다.