Hoisting

1. 함수 선언문과 함수 표현식

• 함수 선언문 (function declaration)

function a() {

• 함수 표현식 (function expression)
  • function을 변수에 할당

var a = function() {
}
var b = function success() { //리터럴

}

2. Hoisting

• 변수의 선언을 끌어 올리는 것입니다.

  var x = 1;
  console.log(x + " " + y); // '1 undefined'
  var y = 2;

  • 밑에서 선언한 변수가 위에서 y에 undefined를 넣어줘 버렸습니다.
  • 위로 끌어 올렸기 때문에 Hoisting입니다.
  • 위 코드는 이렇게 동작합니다.

  var x = 1;
  var y;
  console.log(x + " " + y);
  y = 2;

3. 함수의 Hoisting

• 함수 선언식

  catName("Chloe");
  
  function catName(name) {
    console.log("My cat's name is " + name);
  }
  /*
  위 코드의 결과는: "My cat's name is Chloe"
  */

• 함수 표현식

  console.log(notHoisted) // undefined
  notHoisted(); // TypeError: notHoisted is not a function
  
  var notHoisted = function() {
     console.log('bar');
  };

3. let, const의 Hoisting

• let, const는 hosting이 됩니다.

  console.log(x); // Uncautght ReferenceError: x is not defined
  let x = 1;

3.1. Temporal Dead Zone(TDZ)

• LexicalEnvironment에 변수 정보를 미리 수집합니다. (hosting)

• let, const는 실행되기 전까지 엑세스 할 수 없고, 이 단계를(공간)를 TDZ라고 합니다.

  x = 3; // Uncautght ReferenceError: Cannot access 'x' before initialization
  let x = 1;

• 아직 초기화 하지 않아서 값을 넣을 수 없다는 에러가 납니다.

• 즉, x가 있다는 것은 알고 있지만 위에 선언하라는 오류이기 때문에 hoisting이 되고 있다는 것이죠.

• 하지만 TDZ가 사용하지 못하게 컨트롤합니다.