JavaScript의 호이스팅 소개

JavaScript로 프로그래밍하는 방법을 배울 때 강사, 멘토 또는 StackOverflow의 임의의 사람으로부터 const 또는 let 를 사용하여 코드에서 호이스팅 문제를 피하고 싶다는 말을 들었습니다.

하지만 스스로에게 물어보세요. 게양이 도대체 무엇이며 왜 피해야 합니까? 자, 여기가 딱입니다!

호이스팅은 JavaScript 엔진이 코드 실행 전에 변수 및 함수 선언을 해당 범위의 맨 위로 이동하는 것입니다.

Hoisting 변수 선언의 예:

x = 6
var x;
console.log(x) 
// x would be equal to 6 with no errors thrown

당연히 변수를 할당할 수 없기 때문에 이 코드가 작동하지 않을 것이라고 생각할 것입니다.

음, var로 그렇게 할 수 있습니다. 선언 전에 변수를 초기화하여 JavaScript가 변수를 함수의 맨 위로 끌어올리고 오류를 발생시키지 않기 때문입니다.

함수 선언에서 호이스팅의 예:

dogBreed('Miniature Schnauzer')

function dogBreed(name) {
  console.log('My favorite dog breed is the ' + name + '!') 
}
// My favorite dog breed is the Miniature Schnauzer!

이 코드는 잘 실행되지만 가독성을 위해 함수를 선언하기 전에 함수 호출을 피하는 것이 좋습니다.

이 두 가지를 함께 사용하면 매우 혼란스러운 코드가 생성될 수 있습니다. 예를 들어 이 코드 스니펫을 사용하십시오.

var dogBreed = "Pug";
var favDogBreed = function () {
  console.log("My favorite dog breed: " + dogBreed);
    var dogBreed = "Shih Tzu";
      console.log("Bob's favorite dog breed: " + dogBreed);
};

favDogBreed();
// Original favorite dog: undefined
// New favorite dog: Shih Tzu 

혼란스럽게도 JavaScript는 호이스팅으로 인해 첫 번째 dogBreed를 undefined로 초기화한 다음 함수 실행을 시작하므로 이러한 결과를 얻었습니다.

JavaScript에서 초기화된 변수는 호이스팅되지 않습니다. 흥미롭게도 아래의 코드 스니펫은 다음과 같이 출력됩니다NaN.

console.log(x + y)
var x = 4
var y = 2
// Output is NaN

이는 JavaScript가 x 및 y를 게양하지만 각각의 초기화= 4 및 = 2가 아니므로 NaN 및 x가 숫자가 아니기 때문에 발생합니다!

고맙게도 2015년에 우리는 JavaScript의 ES6 개정판을 얻었고 y 및 let를 도입했습니다.
const를 다시 살펴보지만 var 대신 favDogBreed로 모든 것을 선언합니다.

let dogBreed = "Pug";
let favDogBreed = function () {
  console.log("My favorite dog breed: " + dogBreed);
    let dogBreed = "Shih Tzu";
      console.log("Bob's favorite dog breed: " + dogBreed);
};

favDogBreed();
// This will throw a ReferenceError and not let this code run

이제 모든 것이 제대로 작동하고 엔지니어는 혼란스러운 코드를 수정해야 합니다.

그러나 지금 오류가 발생했다고 해서 호이스팅이 Javascript에서 패치되었다는 의미는 아닙니다. let 및 var로 선언된 변수에서 여전히 발생하지만 초기화되지는 않습니다. 예를 들어 이 코드 스니펫을 사용하십시오.

dogName = "Sparky";
const dogName
console.log(dogName)
// This code doesn't run

dogName = "Sparky";
let dogName
console.log(dogName)
// This results in a ReferenceError

이것은 무엇을 의미 하는가? 우선, 호이스팅은 let 및 const로 선언된 변수로 여전히 발생하지만 몇 가지 차이점이 있습니다.
let 구문 오류로 인해 실행이 거부됩니다. const 에서도 같은 일이 발생하지만 JavaScript는 변수를 보고 인식하지만 제대로 선언될 때까지 JavaScript는 변수를 사용할 수 없습니다.
const 로 선언할 때 변수let는 임시 데드존이라고 하는 현상에 있습니다. 예, 밴드의 이름이 가장 좋지는 않지만 let 또는 dogName로 선언된 변수는 JavaScript가 변수가 선언된 줄을 실행합니다.

선언 전에 변수에 액세스하면 JavaScript가 변수를 정의되지 않음으로 초기화하기 때문에 임시 데드존이 적용되지 않습니다let.

호이스팅 문제를 방지하기 위한 모범 사례는 다음과 같습니다.

가능한 모든 곳에 변수 및 함수const 및 var 선언

JavaScript 및 개발자가 코드를 읽는 방법이므로 항상 모든 범위의 시작 부분에 변수를 선언하십시오

.

절대 사용하지 마세요 let

축하합니다! 이제 호이스팅과 그것이 JavaScript ES6에서 어떻게 작동하는지 더 잘 알게 되었습니다. 이 (종종 간과되는) 개념은 신규 개발자와 베테랑 개발자 모두를 혼란스럽게 하며 JavaScript에서 호이스팅 관련 버그를 이해하고 피하는 데 유리합니다!

다음은 주제에 대한 몇 가지 추가 리소스입니다.
W3Schools
MDN
JavaScript Docs