JS 변수 및 scope

January 9, 2021

ES6가 되면서 새로운 변수 선언 예약어 let, const가 등장하였디.
사실 나온지 이제 오래됬다고 할 수 있는 예약어들인데 var와 같이 메모하려 한다.

TEST

JS는 기본 적으로 아래 글의 3번째 항목처럼 동작을 하게 된다.

위 작성글은 ES5 기준으로 작성을 하였는데, ES6 추가된 변수 선언 예약어로 하게 된다면 어떻게 동작을 할 것인가? 🤔❓

console.log(foo);
console.log(bar);

var foo;
let bar;

결과
- console.log(foo); : undefined
- console.log(bar); : Uncaught ReferenceError: bar is not defined

위 테스트에서 const를 사용할 경우 다른 에러가 나기는 하지만 역시 동작을 안 할 것이고, 해당 결과의 이유는 let, const는 호이스팅이 되지 않기 때문이다.

var 변수를 사용할 경우 위 링크글에서 언급 했듯이 식별자가 등록이 되면서 사용은 가능해진다. 하지만 let, const의 경우는 TDZ 에 등록이 되며 초기화 되기 전까지는 사용 할 수 없다.

TDZ에 관련해서는 나중에 따로 정리하도록 하겠다.(사실 쓰다보니 개념에 대해 모르는 것 같다. 공부가 필요하다. 💬)

같은 페이지, 파일이라도 사용되는 예약어와 위치에 따라 변수가 등록되는 Scope가 달라지고 이에 사용할 수 있는 범위도 달라진다.

var foo = "foo"; // global
const PI = 3.14; // script

function test() {
  let payload = "data"; // local

  {
    const bar = "bar"; // block
  }
}