[JavaScript] 호이스팅(Hoisting)

 

<설명>

  - 변수나 함수를 scope 상단으로 끌어올리는 기술

  - 함수의 호출문이 정의문 보다 먼저 나와도, 정의문을 끌어올려 함수를 호출

 

---

 

<규칙>

  (1) 선언된 함수는 상단에서 참조, 호출이 가능

  (2) 선언된 var는 상단에서 참조, 할당이 가능

  (3) 선언된 let, const는 상단에서 참조 할당이 불가능

  => const 변수는 인접 scope 상단에서 console.log 를 통해 관측되지 않으므로 Hoisting 대상이 아님

  => let은 선언은 하나 초기화는 되지 않음. 그럼에도 scope 상단에서 console.log로 관측 가능하기에 Hoisting 대상

 

---

 

<주의 사항>

  - var 변수의 변수 유연성 등을 고려하여, 변수 Hoisting은 지양한다.

 

---

 

<코드>

let cnt = 0;

myFnc();	// myFnc 호출

function myFnc() {
  cnt++;
  console.log("Hello" + cnt);
}

myFnc();	// myFnc 호출

let theFnc = function() {
  cnt++;
  console.log("Bye" + cnt);
}

theFnc();	// theFnc 호출

 

---

 

<출력>

Hello1
Hello2
Bye3

 

---

 

<참조 1> [책] '자바스크립트 + 제이쿼리입문', 정인용, p133-134

<참조 2> https://tecoble.techcourse.co.kr/post/2021-04-25-hoisting/

호이스팅에 대한 오해와 진실