예제로 설명되는 JavaScript 호이스팅

Summary: in this tutorial, you’ll learn about JavaScript hoisting and how it works under the hood.

자바스크립트 호이스팅 소개

JavaScript 엔진은 JavaScript 코드를 실행할 때 전역 실행 컨텍스트를 생성합니다. 전역 실행 컨텍스트에는 생성 및 실행의 두 단계가 있습니다.

생성 단계에서 JavaScript 엔진은 변수 및 함수 선언을 코드 맨 위로 이동합니다. 이 기능을 JavaScript에서는 호이스팅이라고 합니다.

가변 호이스팅

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

예를 들어 다음 예제에서는 카운터 변수를 선언하고 해당 값을 1로 초기화합니다.
console.log(counter); // undefined
var counter = 1;
이 예제에서는 선언 전에 카운터 변수를 참조합니다.

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

기술적으로 코드는 실행 단계에서 다음과 같이 보입니다.
var counter;
console.log(counter); // undefined
counter = 1;

전역 실행 컨텍스트의 생성 단계에서 JavaScript 엔진은 변수 counter를 메모리에 배치하고 해당 값을 undefined로 초기화합니다.

let 키워드
다음은 let 키워드를 사용하여 카운터 변수를 선언합니다.
console.log(counter);
let counter = 1;
JavaScript에서 다음 오류가 발생합니다.
"ReferenceError: Cannot access 'counter' before initialization
오류 메시지는 카운터 변수가 이미 힙 메모리에 있다고 설명합니다. 그러나 초기화되지 않았습니다.

배후에서 JavaScript 엔진은 let 키워드를 사용하는 변수 선언을 호이스트합니다. 그러나 let 변수를 초기화하지 않습니다.

존재하지 않는 변수에 액세스하면 JavaScript에서 다른 오류가 발생합니다.
console.log(alien);
let counter = 1;
오류는 다음과 같습니다.
"ReferenceError: alien is not defined
함수 호이스팅
변수와 마찬가지로 JavaScript 엔진도 함수 선언을 호이스트합니다. 이는 JavaScript 엔진이 함수 선언도 스크립트의 맨 위로 이동한다는 것을 의미합니다.

예를 들어:

let x = 20,
y = 10;
let result = add(x, y);
console.log(result);
function add(a, b) {
return a + b;
}

이 예제에서는 정의하기 전에 add() 함수를 호출했습니다. 위의 코드는 다음과 동일합니다.

function add(a, b){
return a + b;
}
let x = 20,
y = 10;
let result = add(x,y);
console.log(result);

실행 컨텍스트의 생성 단계에서 JavaScript 엔진은 add() 함수 선언을 힙 메모리에 배치합니다.
정확히 말하면 JavaScript 엔진은 Function 유형의 객체와 함수 객체를 참조하는 add라는 함수 참조를 생성합니다.

함수 표현식

다음 예에서는 add를 일반 함수에서 함수 표현식으로 변경합니다.

let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
var add = function(x, y) {
return x + y;
}

코드를 실행하면 다음 오류가 발생합니다.
“TypeError: add is not a function
전역 실행 컨텍스트의 생성 단계에서 JavaScript 엔진은 메모리에 add 변수를 생성하고 해당 값을 undefined로 초기화합니다.

다음 코드를 실행할 때 add는 정의되지 않았으므로 함수가 아닙니다.
let result = add(x,y);
add 변수는 전역 실행 컨텍스트의 실행 단계 동안에만 익명 함수에 할당됩니다.

화살표 함수

다음 예제에서는 add 함수 표현식을 화살표 함수로 변경합니다.

let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
var add = (x, y) => x + y;

코드는 또한 화살표 함수가 함수 표현식을 정의하기 위한 구문 설탕이기 때문에 함수 표현식 예제와 동일한 오류를 발생시킵니다.
“TypeError: add is not a function

Similar to the functions expressions, the arrow functions aren’t hoisted.

요약

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

JavaScript 엔진은 let 키워드를 사용하여 선언된 변수를 끌어올리지만 var 키워드로 선언된 변수로 초기화하지 않습니다.

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

https://www.javascripttutorial.net에 원래 게시되었습니다.