Hoisting

---

호이스팅이란?

JS에서 변수, 함수 선언이 코드 실행 전에 끌어올려지는 것

---

변수 호이스팅

TDZ(Temporal Dead Zone)

let, const 선언 O 초기화 X
var 선언O 초기화O(undefined)

console.log(b); // ReferenceError
let b = 20;
console.log(c);
const c = 30; // ReferenceError

선언은 되었지만, 초기화 되기 전에 사용하려고 했기 때문에 ReferenceError가 발생한다. 이것이 TDZ

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

var는 실행 전 선언, 초기화(undefined)가 진행되기에 undefined라는 값이 나온다.

varTest(); // undefined

function varTest(){
  console.log(a);
}

a라는 변수를 찾아, 선언부로 이동 후 훑어보았을때 a라는 변수가 없다면 global Scope에 맨 밑에 var a를 선언한다. 그래서 값이 undefined가 나오게 됨

함수 호이스팅을 제대로 알아보자

---

함수 호이스팅

실행 컨텍스트는 Creation Phase, Execution Phase로 나뉘게 된다.

function doublewrapper() {
  name = 'zero'; // global에 name선언 후 초기화
  function log() {
    console.log(name); // global의 name= 'nero' 출력
  }
        
  function wrapper() {
    name = 'nero'; // global의 name 수정
    log();
  }
  wrapper();
  }
doublewrapper();

함수 선언부는 위와 같다.(Lexical Scope를 따르기에 선언부만 본다.)

---

var name = 'zero';
function log() {
  console.log(name); // 선언된 환경 global의 바뀐 name='nero'를 출력한다.
}

function wrapper() {
  name = 'nero'; // 내부에 name이 없기에 선언부인 global의 name을 변경
  log();
}
wrapper();

wrapper 함수 내에 name='nero'; -> var name='nero'라면 global Scope에 name이 바뀌지 않기에 zero가 출력될 것이다.

var name = 'zero';
function log() {
  console.log(name); // 선언된 환경 global의 name='zero'를 출력한다.
}

function wrapper() {
  var name = 'nero'; // 내부에 var name을 선언 후 초기화
  log();
}
wrapper();

---

출처: ASAC 07기 강의자료