JavaScript Tutorial.53

ansunny1170·2022년 1월 7일

JavaScript w3schools 공부

w3schools.JS Tutorial(웹제어용)

목록 보기

52/63

JS Hoisting

호이스팅은 선언을 맨 위로 이동하는 JavaScript의 기본 동작이다.

JavaScript Declarations are Hoisted

JavaScript에서는 변수를 사용한 후에 선언할 수 있다.
다시 말해; 변수는 선언되기 전에 사용할 수 있다.
Example 1은 Example 2와 동일한 결과를 제공한다.

//Example
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

var x; // Declare x

//Example2
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

이것을 이해하려면 "Hoisting"이라는 용어를 이해해야 한다.

호이스팅은 모든 선언을 현재 범위의 맨 위로(현재 스크립트 또는 현재 함수의 맨 위로) 이동하는 JavaScript의 기본 동작이다.

The let and const Keywords

let 및 const로 정의된 변수는 블록의 맨 위로 호이스트되지만 초기화되지는 않는다.

의미: 코드 블록은 변수를 인식하지만 선언될 때까지 사용할 수 없다.

선언되기 전에 let 변수를 사용하면 ReferenceError가 발생한다.

변수는 블록 시작부터 선언될 때까지 "시간적 사각지대(temporal dead zone)"에 있다.

const 변수를 선언하기 전에 사용하는 것은 구문 오류이므로 코드가 실행되지 않는다.

JavaScript Initializations are Not Hoisted

JavaScript는 초기화가 아닌 선언만 호이스트한다.

Example 1은 Example 2와 동일한 결과를 제공하지 않는다.

//Example 1
var x = 5; // Initialize x
var y = 7; // Initialize y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

//Example 2
var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

마지막 Example에서 y가 정의되지 않은 것이 말이 될까?

초기화(=7)가 아닌 선언(var y)만 맨 위로 올려지기 때문이다.

Hoisting으로 인해 y가 사용되기 전에 선언되었지만 초기화가 Hoisting되지 않았기 때문에 y의 값은 정의되지 않았다.

Example 2는 아래와 같이 작성하는 것과 같다.

var x = 5; // Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

y = 7;    // Assign 7 to y