호이스팅

좋은 개발을 하려면 호이스팅을 하지 않는 것이 가장 좋다!

분석 코드

const x = "x";
console.log(z);
var y = "hehe";
const z = () => {};
function c() {
  const y = "y";
  console.log("c");

  function b() {
    const z = "z";
    console.log("b");
    c();
  }
}

function a() {
  const x = "x";
  console.log("a");
}

a();
c();

이런 코드가 있을 때, 호이스팅 상황에서 어떻게 되는지 분석해보겠다.

---

var

const x = "x";
console.log(z);
var y = "hehe";

이런 코드가 호이스팅 되면

var y;
const x = "x";
console.log(z);
y = "hehe";

선언만 맨 위로 올라간다.

그리고 var은 같은 이름으로 중복 선언이 가능하다.

 

-var을 사용하지 않아야하는 정확한 이유

(const와 let이 var보다 좋다는 이유는 근거가 빈약하다.)

=> var은 코드 분석을 헷갈리게 만든다.

• 선언만 위로 올라간다.
• 중복 선언이 된다.
• 결국 직관적이지 못하다.

function

var y;
function c() {
  const y = "y";
  console.log("c");

  function b() {
    const z = "z";
    console.log("b");
    c();
  }
}

function a() {
  const x = "x";
  console.log("a");
}

const x = "x";
console.log(z);
y = "hehe";
const z = () => {};

a();
c();

function들은 전체가 다 올라간다.

const, let

const와 let도 호이스팅이 되긴하지만 여기선 TDZ(Temporal Dead Zone)이란 개념이 등장한다.

// z에 대한 TDZ 시작
var y;
function c() {
  const y = "y";
  console.log("c");

  function b() {
    const z = "z";
    console.log("b");
    c();
  }
}

function a() {
  const x = "x";
  console.log("a");
}

const x = "x";
console.log(z); // 에러
y = "hehe";
// z에 대한 TDZ 끝
const z = () => {};

a();
c();

• z에 대한 TDZ가 있고, z보다 위에서 z에 접근하면 에러가 발생
• 이런 이유로 웬만하면 function보단 화살표 함수를 쓰는 것이 좋다. 하지만 function은 통채로 올라가서 헷갈리진 않는다.
• 또 const, let를 TDZ에서 사용하지 않는 것이 좋다.

---

문제

-1번

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

const z = 'z1';
a();

이 코드의 정답은?

답
'z1'

선언 지도

anonymous -> a, z

 

TDZ는 함수 내부까지 영향을 미치진 않는다.

그리고 a -> anoymous(a, z), anoymous에서 z를 갖고 있기에 a에서 접근이 가능하다.

 

-2번

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

a();
const z = 'z1';

이 코드의 정답은?

답

에러

 

a가 TDZ에서 호출되었기 때문이다.

 

-출처

https://www.youtube.com/watch?v=fLZ-bKT4sFs&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=6