JavaScript의 호이스팅 이해-JS 튜토리얼-php.cn

JavaScript의 호이스팅 이해

WBOY

풀어 주다： 2024-07-27 07:02:02

원래의

469명이 탐색했습니다.

Understanding Hoisting in JavaScript

호이스팅은 초보 개발자를 종종 혼란스럽게 만드는 JavaScript의 기본 개념 중 하나입니다. 그러나 일단 이해하고 나면 JavaScript 코드를 작성하고 디버깅하는 데 큰 도움이 될 수 있습니다. 이 기사에서는 호이스팅에 대해 알아보고, 작동 방식을 설명하고, 그 효과를 설명하는 예를 제공합니다.

호이스팅이란 무엇입니까?

JavaScript에서 호이스팅은 컴파일 단계 중에 변수 및 함수 선언을 포함 범위(전역 범위 또는 함수 범위)의 맨 위로 이동하거나 "호이스팅"하는 동작입니다. 즉, 코드에서 실제로 선언되기 전에 변수와 함수를 사용할 수 있습니다.

변수 호이스팅

가변 호이스팅부터 시작해 보겠습니다. 다음 코드를 고려해보세요:

console.log(myVar); // Output: undefined
var myVar = 10;
console.log(myVar); // Output: 10

로그인 후 복사

myVar 변수를 선언하기 전에 사용했음에도 불구하고 오류가 발생하지 않습니다. 대신 undefound가 콘솔에 기록됩니다. 이는 myVar의 선언이 해당 범위의 최상위로 끌어올려졌지만 해당 할당은 그대로 유지되기 때문에 발생합니다. 위 코드는 다음과 같이 해석됩니다.

var myVar;
console.log(myVar); // Output: undefined
myVar = 10;
console.log(myVar); // Output: 10

로그인 후 복사

호이스팅 기능

함수 선언도 호이스팅됩니다. 다음 예를 고려해보세요:

greet(); // Output: Hello!

function greet() {
  console.log('Hello!');
}

로그인 후 복사

greet 함수는 선언 전에 호출되었지만 올바르게 작동합니다. 이는 함수 선언이 해당 범위의 맨 위로 끌어올려지기 때문입니다. 코드는 다음과 같이 해석됩니다.

function greet() {
  console.log('Hello!');
}

greet(); // Output: Hello!

로그인 후 복사

Let 및 Const 선언

ES6이 도입되면서 let 및 const 키워드는 var와 같은 방식으로 끌어올려지지 않는 블록 범위 변수를 제공합니다. 그러나 해당 선언은 여전히 호이스팅되지만 블록 시작부터 선언이 발생할 때까지 "일시적 데드존(TDZ)"에 남아 있습니다. 선언 전에 액세스하면 ReferenceError가 발생합니다.

console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization
let myLetVar = 20;

console.log(myConstVar); // ReferenceError: Cannot access 'myConstVar' before initialization
const myConstVar = 30;

로그인 후 복사

실제 사례

예제 1: var를 사용한 변수 호이스팅

function hoistExample() {
  console.log(message); // Output: undefined
  var message = 'Hoisting in JavaScript';
  console.log(message); // Output: Hoisting in JavaScript
}

hoistExample();

로그인 후 복사

예제 2: 함수 호이스팅

hoistedFunction(); // Output: This function is hoisted!

function hoistedFunction() {
  console.log('This function is hoisted!');
}

로그인 후 복사

예 3: let 및 const를 사용한 임시 데드존

function tdzExample() {
  console.log(tempVar); // ReferenceError: Cannot access 'tempVar' before initialization
  let tempVar = 'Temporal Dead Zone';
}

tdzExample();

로그인 후 복사