[JS] Hoisting 이란?

호이스팅이란?

선언변수와 함수를 가져가서 미리 메모리에 저장을 해둔 다음 호출하는 것이다. 즉, 함수가 실행되기 전에 안에있는 변수들을 범위의 최상단으로 끌어올려서 먼저 선언함.

 

1) 

var a = 1;
console.log(a);
// 1

이럴땐 문제가 없음

---

2)

console.log(a);
var a = 1;
// undefined

이 경우에 error가 뜨는 게 아니라 undefined 가 뜬다. 이게 왜 가능한가? 호이스팅 때문이다. 

자바스크립트는 호이스팅을 할 때 변수의 선언과 초기화(undefined)를 같이 해준다. 

 

var는 지역, 전역 변수의 경계가 명확하지 않다. 함수만 지역변수로 호이스팅 되고 나머지는 다 전역 변수로 올라오게 됨.

아래의 코드를 보면 알 수 있음.

---

3)

 for (var i = 0; i < 5; i++) {
  console.log(i);
 }
console.log(i);

// i값이 출력이됨

다른 방법으로 선언해줄 때( let, const ) 지역변수로 선언해준 i가 출력이 되지 않는다. 

근데 var는 이게 가능하기 때문에 문제가 될 수 있다. 

---

4)

for (let i = 0; i < 5; i++) {
console.log(i); // 1 2 3 4
}
console.log(i); //error

i를 정의한 건 for반복문 내부이다.  범위(scope) 밖에서 i를 출력할 경우 "i is not defined" error 메시지가 뜸

 let도 호이스팅이 되지만, TDZ(Temporal Dead Zone)존을 생성해서 선언 전에는 접근 불가하다.

console.log(a); 
let a = 1;
console.log(a);

이와 같이 선언 전에 출력을 요청하면, error 발생한다.

 

 

---

자바스크립트의 엔진의 코드를 해석하는 순서는,

 

1. 함수 선언문 해석

2. 표현식 해석(변수 표현식, 함수 표현식)

3. 코드 실행

 

console.log(person); // 1) person함수 전체

function person() {
  console.log(title); //2) undefined
  console.log(getName); //3) getName함수 전체
  console.log(emptyFunc); //4) undefined
  
  var title = "msg"
  
  function getName() {
    return title;
  }
  var emptyFunc = function(){
  };
}

person();

1) person함수는 전역 변수이기 때문에 출력됨

2) title은 표현식 이기 때문에 아직 X

3) getName은 선언식이기 때문에 출력됨 

4) emptyFunc은 표현식 이기 때문에 아직 X