게양

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

JavaScript 엔진은 JavaScript 코드를 실행할 때 전역 실행 컨텍스트를 생성합니다. 전역 실행 컨텍스트에는 생성 및 실행의 두 단계가 있습니다. 따라서 코드 실행이 시작되기 전에도 모든 변수와 함수에 메모리가 할당된다고 말할 수 있습니다.

가변 호이스팅

변수 호이스팅은 JavaScript 엔진이 변수 선언을 스크립트의 맨 위로 옮기는 것을 의미합니다.

console.log(count);
var count=2;

그러나 코드의 첫 줄은 오류를 일으키지 않습니다. 그 이유는 JavaScript 엔진이 변수 선언을 스크립트의 맨 위로 옮기기 때문입니다.

이 코드는 다음과 유사합니다.

var count;
console.log(count);
count=2;

전역 실행 컨텍스트의 생성 단계에서 JavaScript 엔진은 변수 카운터를 메모리에 배치하고 해당 값을 정의되지 않음으로 초기화합니다.



그러나 만약 :-

var count=2;
console.log(count);

오류가 발생하지 않습니다.

let 키워드

console.log(count);
let count=2;

오류 메시지: "참조 오류: 초기화 전에는 '카운터'에 액세스할 수 없습니다.

오류 메시지는 count 변수가 이미 힙 메모리에 있다고 설명합니다. 그러나 초기화되지 않았습니다.
배후에서 JavaScript 엔진은 let 키워드를 사용하는 변수 선언을 호이스트합니다. 그러나 let 변수는 초기화하지 않습니다.
알림: let 대신 var를 사용했다면 "undefined"가 표시될 것입니다.
이는 let 키워드를 사용하여 힙에 메모리를 할당함을 보여줍니다.

함수 호이스팅

변수와 마찬가지로 JavaScript 엔진도 함수 선언을 호이스트합니다. 이는 JavaScript 엔진이 함수 선언도 스크립트의 맨 위로 이동한다는 것을 의미합니다.

let alpha= 1,beta = 10;

let result = add(alpha, beta);
console.log(result);

function add(alpha, beta) {
  return alpha + beta;
}

여기서 함수는 정의하기 전에 호출됩니다.
여전히 출력은 정확합니다. 즉, 11입니다.


결과는 동일합니다.

function add(alpha, beta) {
    return alpha + beta;
  }

let alpha= 1,beta = 10;

let result = add(alpha, beta);
console.log(result);

함수 표현식을 사용하면 어떤 일이 일어나는지 봅시다 :-

let alpha= 1,beta = 10;

let result = add(alpha, beta);
console.log(result);

var add=function(alpha, beta) {
  return alpha + beta;
}

ERROR: Uncaught TypeError: add는 함수가 아닙니다.


화살표 기능도 마찬가지입니다.

let alpha= 1,beta = 10;

let result = add(alpha, beta);
console.log(result);

var add=(alpha, beta) =>{
  return alpha+beta;
}

ERROR: Uncaught TypeError: add는 함수가 아닙니다.

이는 함수 표현을 위해 함수를 변수 안에 저장하고 있는데, 변수에 메모리를 할당하면 정의되지 않은 상태로 저장되기 때문에 변수를 함수로 호출하려고 하면 js는 함수가 아닌 정의되지 않은 것을 찾아 오류를 표시한다. add()는 실제로 함수로 액세스하려는 일반 변수이므로 함수가 아닙니다.

주목해야 할 핵심 사항 :-

JavaScript 호이스팅은 변수 및 함수 선언을 스크립트의 맨 위로 이동하는 실행 컨텍스트의 생성 단계에서 발생합니다.

JavaScript 엔진은 let 키워드를 사용하여 선언된 변수를 호이스트하지만 var 키워드로 선언된 변수로 초기화하지는 않습니다.

JavaScript 엔진은 함수 표현식과 화살표 함수를 호이스트하지 않습니다.

질문이 있으시면 의견을 남겨 주시면 최선을 다해 답변하겠습니다.
이 기사가 도움이 되었으면 좋아요를 누르고 이와 같은 기사를 더 보려면 저를 팔로우하세요.