JavaScript Hoisting

호이스팅?

• 선언을 현재 스크립트 혹은 함수의 맨 위로 이동시키는 JavaScript의 기본 동작
• JavaScript에서 변수는 사용된 후 선언 가능

Example1

  console.log(y); // undefined => 선언은 hoisted, 초기화는 안됨
  var y = 1; // 초기화
  console.log(y); // 1

Example2

  x = 5; // 할당

  console.log(x); // 5

  var x; // 선언

Example3

  var x; // 선언
  x = 5; // 할당

  console.log(x); // 5

---

let, const 는?

• let, const 로 선언된 변수 역시 호이스트가 되지만 초기화가 안됨
• 코드 블럭이 변수를 알고 있느나 선언되기 전까지는 사용할 수 없음
• 선언되기 전까지는 사용할 수 없음 => 해당 코드 이후 부분은 실행이 안됨
• let을 사용한 변수는 블록의 시작부터 선언되기 전까지 temporal dead zone 에 있는 상태

Example1 - let

• Uncaught ReferenceError: Cannot access 'carName' before initialization
  at xxx.html

  console.log("Lucid"); // Lucid, 해당 코드 실행됨

  carName = "Tesla"; // 여기서 Error 발생, 이 아래로 코드 실행 안됨
  let carName;

Example2 - const

• Uncaught SyntaxError: Missing initializer in const declaration
• 문법 에러 발생, 코드 자체가 실행이 안됨

  console.log("Lucid"); // Lucid, 해당 코드 실행됨

  carName = "Tesla";
  const carName;

---

선언은 호이스트 O
초기화는 호이스트 X

Example1

  var x = 1;
  var y = 2;

  console.log(x); // 1
  console.log(y); // 2

Example2

  var x = 1;

  console.log(x); // 1
  console.log(y); // undefined

  var y = 2;

Example3

  var x = 1;
  var y;

  console.log(x); // 1
  console.log(y); // undefined

  y = 2;

[참조]

W3C JavaScript Hoisting