JavaScript Hoisting

提升(Hoisting)은 JavaScript가 선언을 상단으로 이동하는 기본 동작입니다.

JavaScript 선언은 상단으로提升됩니다

JavaScript에서는 변수를 사용한 후에도 선언할 수 있습니다.

다른 말로 하면, 변수를 선언하기 전에 사용할 수 있습니다.

예제 1 와예제 2 의 결과는 같습니다：

예제 1

x = 5; // 5를 x에 할당
elem = document.getElementById("demo"); // 요소를 찾습니다
elem.innerHTML = x;                     // 요소에서 x를 표시
var x; // x 선언

직접 시도해 보세요

예제 2

var x; // x 선언
x = 5; // 5를 x에 할당
elem = document.getElementById("demo"); // 요소를 찾습니다
elem.innerHTML = x;                     // 요소에서 x를 표시

직접 시도해 보세요

이를 이해하기 위해 "hoisting"이라는 용어를 이해해야 합니다.

Hoisting은 JavaScript가 모든 선언을 현재 범위 상단으로 상단으로 提升(현재 스크립트 또는 현재 함수 상단으로)하는 기본 동작입니다.

let과 const 키워드

사용하여 let 또는 const 선언된 변수와 상수는 상단으로 提升되지 않습니다!

다음에서 확인하세요: JS Let / Const 중에서 let과 const에 대해 더 읽어보세요.

JavaScript 초기화는 상단으로 提升되지 않습니다

JavaScript는 초기화 대신 선언만을 상단으로 提升합니다.

예제 1 와예제 2 의 결과는 다릅니다：

예제 1

var x = 5; // x를 초기화
var y = 7; // y 초기화
elem = document.getElementById("demo"); // 요소를 찾습니다
elem.innerHTML = x + " " + y;           // x와 y를 표시

직접 시도해 보세요

예제 2

var x = 5; // x를 초기화
elem = document.getElementById("demo"); // 요소를 찾습니다
elem.innerHTML = x + " " + y;           // x와 y를 표시
var y = 7; // y 초기화

직접 시도해 보세요

마지막 예제에서의 y가 아직 정의되지 않았다고 할 수 있습니까?

이는 var y와 같은 선언만이 아니라 초기화 (=7)이 상단으로 提升되기 때문입니다.

hoisting으로 인해 y는 사용되기 전에 이미 선언되었습니다. 그러나 초기화가 위로 올라가지 않았기 때문에, y의 값은 여전히 미정의입니다.

예제 2도 마찬가지입니다:

예제

var x = 5; // x를 초기화
var y;     // y를 선언
elem = document.getElementById("demo"); // 요소를 찾습니다
elem.innerHTML = x + " " + y;           // x와 y를 표시
y = 7;    // 7를 y에 할당

직접 시도해 보세요

변수를 상단에 선언하세요!

Hoisting( 많은 개발자들에게)는 JavaScript의 알려지지 않은 또는 무시된 동작입니다.

개발자가 hoisting을 이해하지 못하면, 프로그램에 bug(오류)가 포함될 수 있습니다.

bug를 피하기 위해 항상 각 범위의 시작에 모든 변수를 선언하십시오.

이것이 JavaScript 코드를 해석하는 방식이기 때문에, 이 좋은 습관을 유지하십시오.

철저한 모드에서 JavaScript는 선언되지 않은 변수를 사용하지 않습니다.

다음 장에서 공부하십시오.use strict。”