자바스크립트 호이스팅

무엇인가요

호이스팅은 기본적으로 실행 시간에 볼 수 있는 자바스크립트의 동작으로, 함수와 변수가 선언된 범위의 맨 위로 이동하도록 합니다.

Const, let 및 var

몇 가지 예를 보기 전에 변수를 선언하는 이 세 가지 방법의 차이점을 이해해야 합니다.

var: 자바스크립트 초반에는 var만 있었는데, 현재는 쓸 이유가 없고, 호이스팅 개념이 이런 선언에만 적용되고, 나중에 설명할 몇 가지 이유로 문제가 될 수 있습니다. . 여기서 우리가 말할 수 있는 또 다른 요점은 그 값이 재할당될 수 있다는 것입니다.

let: var와 달리 let은 hoisting이 적용되지 않아 선호하는 이유이지만 var와 마찬가지로 값을 재할당할 수 있습니다.

const: let과 마찬가지로 호이스팅이 적용되지 않습니다. const에 대한 또 다른 점은 값을 재할당할 수 없다는 것입니다.

계속 지켜봐 주시기 바랍니다: 이 경우 재할당은 변수가 새 값을 가질 수 있는지 여부를 의미합니다. 객체 및 배열 조작에 적용된다고 생각하지 마십시오. 정상적으로 할 수 있습니다.


resume: const와 let을 사용하면 실행 시간에 변수의 값을 변경해야 할 때 사용하는 것을 선호하고 let을 선호하는 대신 const를 선호합니다.

작업

기능

hoistMe() // output: I'm being executed by hoisting

function hoistMe() {
   console.log('I\'m being executed by hoisting')
}

위의 예에서 호이스팅이 효과적으로 작동합니다. 초기화 전에 함수를 호출하여 수리합니다!

변수

아래 예제에서는 const를 사용하여 참조하여 hoisting이 적용되지 않은 부분을 수정합니다!

console.log(assignedToConst) // output: cannot access before initialization

const assignedToConst = 'hoisted'

OBS: let을 사용하면 결과가 동일할 것입니다.


이제 호이스팅에서 흥미로운 동작을 볼 수 있습니다.

console.log(assignedToVar) // output: cannot access before initialization

const assignedToVar = 'hoisted'

위의 코드를 실행하면 지정된 출력이 표시됩니다. 호이스팅이 값을 할당하지 않고 맨 위에 선언하기 때문에 발생합니다. 할당은 실제로 구현된 위치에서 발생합니다! 이 동작에 주의를 기울이면 코드가 버그에 노출될 수 있습니다!


특이한 사용 사례이지만 이해할 가치가 있습니다.

handle = '\'hoisted\'';

console.log(handle); // output: 'hoisted'

var handle;

이전에 값을 할당하고 나중에 선언하면 호이스팅이 성공적으로 완료됩니다.

고려 사항

이 설명된 개념은 범위와 독립적으로 작동하지만 여전히 제시된 예제는 모두 전역 범위에 있습니다. 예를 들면 다음과 같습니다.

function anotherHoistTest() {
   hoistMe()
   function hoistMe() {
      console.log('hoisted');
   }
}
anotherHoistTest() // output: hoisted

이 동작을 즐기지 않는 것이 좋습니다. 그러면 코드가 더 깨지기 쉽고 읽기 쉽고 간결해집니다.

작가

나를 따르십시오:

https://linktr.ee/nate.sfteng