[javascript] 35. 끌어올리기(Hoisting) - 자바스크립트 강좌 JS / CSE

JavaScript Hoisting

 끌어올림(Hoisting)은 자바스크립트의 선언부를 상단에 위치시키는 기본적인 행위 입니다.

 

1. JavaScript Declarations are Hoisted

 자바스크립트에서, 변수는 사용되기 전에 선언되어야 합니다.

 예제 1과 예제 2는 같은 결과를 냅니다:

 예제 1:

 
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

 

 예제 2:

 

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

 

2. JavaScript Initializations are Not Hoisted

 자바스크립트는 단지 선언만 끌어올립니다. 초기화가 아닌.

 

 예제 1과 예제 2는 다른 결과를 냅니다.

  예제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

 

  예제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

 

 예제2에서 y에 대한 출력은 undefined로 나타납니다.

 이러한 이유는 y가 초기화되는 것을 끌어올리지 않았기 때문입니다.

 

 예제3은 예제 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

3. Declare Your Variables At the Top !

 끌어올림은 알려지지 않은 혹은 간과하는 행위 중 하나 입니다.

 개발자가 끌어올림을 이해하지 못 한다면, 프로그램은 버그(에러)를 갖게 됩니다.

 버그를 피하기 위해서는 항상 모든 변수를 상단부의 시작에 선언하시길 바랍니다