JavaScript Tutorial.53
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
Declare Your Variables At the Top !
호이스팅은 (많은 개발자에게) JavaScript의 알려지지 않았거나 간과된 동작다.
개발자가 호이스팅을 이해하지 못하면 프로그램에 버그(오류)가 포함될 수 있다.
버그를 방지하려면 항상 모든 범위의 시작 부분에 모든 변수를 선언해야한다.
이것이 JavaScript가 코드를 해석하는 방식이므로 항상 옳은 규칙이된다.
엄격 모드(strict mode)의 JavaScript는 변수가 선언되지 않은 경우 사용을 허용하지 않는다.
다음 장에서 "use strict"를 공부해보자.
Author And Source
이 문제에 관하여(JavaScript Tutorial.53), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ansunny1170/JavaScript-Tutorial.53저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)