[JavaScript] Hoisting(호이스팅)

호이스팅이란?

JavaScript에서 호이스팅이란 코드를 실행하기 전에 변수와 함수에 해당하는 scope의 최상단으로 끌어 올리는 것을 말한다. 

즉 일부 유형의 변수를 실제로 선언하기 전에 scope를 위로 끌어 올려 사용할 수 있도록 해주는 것이다. 

---

(function () {
  var a = 10;
  (function () {
    console.log(a); //undefiend
    var a = 20;
  })();
  console.log(a); //10
})();
console.log(a); // a is not defined

기존 var는 변수명만 위로 끌어올리고 값이 없기 때문에 undefined로 인식한다. 

즉 코드에서 선언되기 전에 우리는 선언된 값을 얻지 못하게 된다. 

이러한 행동은 JavaScript에서 일반적인 버그이며 최근 JavaScript에서 더이상 var를 사용하게 되지 않은 주된 이유이다. 

 

let 또는 const 변수를 사용하려고 하면 선언되기 전에 오류가 발생한다.

 

if (true) {
  let a = 10
  if (true) {
    console.log(a) // reference Error : a is not defined
    const a = 20
    console.log(a) //20
  }
  console.log(a)
}
console.log(a)

const myName = 'Hyemgu';

if(myName === 'Hyemgu') {
  console.log(`Hyemgu is a ${job}`); //Cannot access 'job' before initialization
  const age = 2037-1989;
  console.log(age);
  const job = 'teacher';
  console.log(x);
}

 

 

TDZ : Temporal Dead Zone (임시사각지대)

let이나 const에 대해서 실제로 변수를 선언한 위치에 올때까지는 이 변수를 호출할 수 없다.

 

TDZ ES6 오류를 피하고 포착하는 것이 더 쉽습니다.

정의되지 않은 변수를 사용하기 때문에 실제로 선언되기 전에 심각한 버그를 일으킬 수 있고 찾기 어려웠었다. 

 

const는 절대 재할당 되어서는 안된다. 따라서 실행할 때만 할당된다. 

console.log(me); //undefined
console.log(job); //Cannot access 'job' before initialization
console.log(year);//Cannot access 'year' before initialization


var me = 'Hyemgu';
let job = 'teacher';
const year = 1991;

위와 같이 var는 변수명은 위로 끌어올리지만 정의되지 않은 값이기에 undefined로 호이스팅된다. 

let과 const는 TDZ에 있다. 

console.log(addDecl(2, 3));
console.log(addExpr(2, 3));
console.log(addArrow(2, 3));


function addDecl(a,b) {
  return a + b;
}

const addExpr = function (a, b) {
  return a + b;
}

var addExpr = function (a, b) {
  return a + b;
} //위의 console.log는 undefined(2, 3)을 한 것과 같기 때문에
//undefined is not a function과 같은 에러가 난다. 

const addArrow = (a, b) => a + b;

//var를 끌어올리면 undefined이기에 console.log가 실행된다. 
if(!numProducts) deleteShoppingCart();

var numProducts = 10;

function deleteShoppingCart() {
  console.log('All products deleted!');
}