Hoisting

developer.mozilla.org/en-US/docs/Glossary/Hoisting

Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

위 링크는 MDN 공식 문서다.

 

이번 글은 MDN 링크를 정리하는 방향으로 쓰려고 한다.

모든 코드는 MDN에서 가져왔다.

 

 

---

Hoisting의 정의

Hoisting의 개념적 정의는 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것이라고 한다.

(엄격하게 말하자면 위 정의는 틀렸다고 한다. 자세한 것은 컴파일링을 이해해야 알 수 있을 듯.)

function catName(name) {
  console.log("My cat's name is " + name);
}

catName("Tiger");

/*
The result of the code above is: "My cat's name is Tiger"
*/

 

catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Chloe"
*/

이 두 코드는 모두 제대로 실행된다. 

이것처럼 자바스크립트에서 변수들은 선언되기 전에  할당받을 수 있다.

 

 

---

선언만 Hoist 된다.

자바스크립트는 할당은 호이스팅하지 않는다. 만약 변수가 사용되기 전에 선언/할당이 된다면, 값은 undefined가 뜬다.

console.log(num); // Returns undefined, as only declaration was hoisted, no initialization has happened at this stage
var num; // Declaration
num = 6; // Initialization

console.log(num)은 undefined를 리턴하는데 그 이유는 할당은 호이스팅 되지 않은 상태로 선언만 호이스팅 되기 때문이다.

 

console.log(num); // Throws ReferenceError exception
num = 6; // Initialization

따라서 이 코드는 error를 뱉는다. 

 

 

그런데 let과 const로 선언된 것은 또 Hoisting 하지 않는다.

// Example with let:
a = 1; // initialization.
let a; // Throws ReferenceError: Cannot access 'a' before initialization

// Example with const:
a = 1; // initialization.
const a; // Throws SyntaxError: Missing initializer in const declaration

 

---

위 사항들을 종합하면 아래의 코드를 이해할 수 있게 될 것이다.

// Example 1
// Only y is hoisted

x = 1; // Initialize x, and if not already declared, declare it - but no hoisting as there is no var in the statement.
console.log(x + " " + y); // '1 undefined'
// This prints value of y as undefined as JavaScript only hoists declarations
var y = 2; // Declare and Initialize y

예시1)

 x = 1 로 할당을 하였다. 만약 아래에 선언된 것이 없으면 바로 할당하는 순간 x 선언이 동작한다.

(생각해보면 scope에 대해 배울 때, 선언 없이 할당을 해버리면 window 객체로 들어가며 전역 변수화 되었었다.)

 

맨 아랫줄에서 y는 선언과 할당이 동시에 일어나고 있다.

그러나 hoisting은 선언에만 동작을 하기 때문에 

console.log(x + " " + y)는 '1 undefined'를 리턴한다.

 

// Example 2
// No hoisting, but since initialization also causes declaration (if not already declared), variables are available.

a = 'Cran'; // Initialize a
b = 'berry'; // Initialize b

console.log(a + "" + b); // 'Cranberry'

a와 b는 할당만 이루어졌지만,

어떤 변수가 선언이 된적 없다면 할당과 동시에 선언이 일어나기 때문에 Cranberry가 출력된다.

 

---

함수가 hoistning 된다는 것을 알고 있으면 될 것 같다.

어차피 선언은 let과 const만 사용할 것이기 때문이다.