자바스크립트에서 호이스팅

시리즈의 이 부분에서는 Javascript의 중요한 개념 중 하나인 호이스팅에 대해 알아봅니다.

게양

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

필연적으로 이것은 함수와 변수가 선언된 위치에 관계없이 범위가 전역인지 지역인지에 관계없이 해당 범위의 맨 위로 이동됨을 의미합니다.

Hoisting mechanism only moves the declaration and not assignment.

예를 들어 이해해 봅시다.

"var"를 사용한 변수 호이스팅

console.log(example);

var example = "hoisting example";

위 스니펫의 경우 출력은 다음과 같습니다.



따라서 JS는 위의 코드를 두 단계로 실행합니다.

메모리 생성 단계

코드 실행 단계

이러한 용어에 대해 잘 모르신다면 읽어 보시기를 강력히 추천합니다.

메모리 생성 단계에서 변수에 특수 값undefined을 할당합니다.

var 는 해당 범위 위에 게양되므로 undefined 입니다.

이제 아래 코드를 실행하려고 하면

console.log(example);

var example = "hoisting example";

console.log(example);

출력은 다음과 같습니다.



예상할 수 있듯이 두 번째 log() 함수는 코드 실행 단계에서 "hoisting example"값으로 변수 "example"을 초기화하기 때문에 실제 값을 기록합니다.

"let"을 사용한 변수 호이스팅

이제 동일한 예를 고려하되 var 대신 이번에는 let을 사용합니다.

console.log(example);

let example = "hoisting example";

이에 대한 출력은 다음과 같습니다.



뭐? 왜?? 정의되지 않은 것으로 예상했습니다.

let은 ES6에서 도입되었으며 선언되지 않은 변수의 사용을 허용하지 않습니다. 인터프리터는 명시적으로 참조 오류를 내뱉습니다.

This ensures we always declare our variables before using them.

이제 다음과 같이 코드를 수정하면

let example;

console.log(example);

example = "hoisting example";

console.log(example);

이것은 우리가 기대했던 것과 정확히 일치합니다.

"const"를 사용한 변수 호이스팅

아래 코드를 고려하십시오.

console.log(example);

const example = "hoisting example";

이에 대한 출력은 다음과 같습니다.



선언하기 전에 사용하면 let과 같은 방식으로 작동합니다.

const에 대한 또 다른 시나리오:

const example;

console.log(example);

산출:



const는 immutable 유형이므로 선언할 때 정의해야 합니다.

따라서 const를 사용하는 올바른 방법은 다음과 같습니다.

const example = "hoisting example";

console.log(example);

함수 선언에서 호이스팅

console.log(example);

example();

function example(){
    console.log("This is example function output")
}

함수 선언은 맨 위로 완전히 호이스트됩니다. 이제 Javascript를 사용하여 함수를 선언하기 전에 호출할 수 있는 이유를 이해할 수 있습니다.

함수 표현식의 호이스팅

console.log(example);

example();

var example = function() {
    console.log("This is example function output")
}

그렇다면 함수 선언에서는 작동하지만 함수 표현식에서는 작동하지 않는 이유는 무엇입니까?

Function expressions are not hoisted.

인터프리터는 표현식을 함수가 아닌 변수로 보기 때문에 TypeError를 발생시킵니다(변수 선언만 호이스팅됨).

함수 표현식은 변수에 할당된 함수이며, 이 경우 변수 선언은 함수가 아닌 기본값 undefined로 맨 위로 이동합니다.

화살표 함수 호이스팅

Arrow functions are a more compact way of writing function expressions in javascript.

console.log(example);

example();

var example = () => {
    console.log("This is example function output")
}

함수 표현식과 동일한 호이스팅 규칙을 따릅니다.

마무리

읽어 주셔서 감사합니다!! 어느 정도 도움이 되었기를 바랍니다. 네트워크에 공유해 주세요. 아래에 의견을 남기는 것을 잊지 마십시오.