1. scope

• ES5 version
  함수 레벨 스코프(function level scope)
  함수에 의해서 생기는 변수의 유효범위. 함수 내에서 선언된 변수는 함수 내에서만 유효. 함수 외부에서는 참조 불가.

    var bar = 123; 
    {
        var bar = 456;
    }
    console.log(bar) /* bar is 456 */
  

• ES6+ version
  블록 레벨 스코프(block level scope)
  블록에 의해 생기는 변수의 유효범위. 중괄호({})를 블록으로 간주.

  let bar = 123;
  {
      let bar = 123; 
  }
  console.log(bar)  /* bar is 123 */
  

1-1. Hoisting

• ES5에서는 var만 사용하기 때문에 다음과 같은 예제를 살펴보면, 4번째 코드 줄에서 ‘a is undefined’ 메시지가 뜨는 것을 알 수 있다. 변수 a가 호이스팅되어 5번째줄에서 변수명을 위로 끌어올리고, undefined를 할당했기 때문이다.

    (function () {
        var a = 10;
        (function () {
            console.log(a); /* a is undefined */
            var a = 20;
        })();
        console.log(a); /* a is 10 */
    })();
  

• ES6+에서는 if, for, while, switch-case문 등 자체가 block scope가 된다. 다음 예제를 살펴보면 ES5과 다르게 4번째 코드 줄에서 ‘a is not defined’ 메시지가 뜬다. 변수 a가 호이스팅되어 5번째줄에서 변수명을 위로 끌어올렸지만, undefined를 할당하지 않았기 때문이다.

    if (true) {
        let a = 10;
        if (true) {
            console.log(a); /* a is not defined */
            const a = 20;
        }
        console.log(a);
    }
    console.log(a);
  

1-2. TDZ

• TDZ(Temporal Dead Zone)은 말 그대로 일시적 사각지대이다. 호이스팅 개념 예제를 들면서 나온 내용이다. 이전에 정의했던 이름이 같은 변수를 호출 이후에 다시 정의할 때 호출한 시점에서 변수가 선언되어 있지 않은 것으로 나타내지는데 이를 TDZ라고 한다.

    let foo = '123';
    console.log(foo); /* 123 */
    if (true) {
        console.log(foo) /* foo is not defined */
        let foo = '456';
    }
  

  
  

2. variable

• ES5 version
  var 사용

• ES6+ version
  var 사용 지양 (hoisting, function level scope …) let, const 사용

2-1. let

1) 재할당 가능

let a = 1
a = 2
console.log(a) /* a is 2 */

2) 반복문 내에서의 함수 실행시

// ES5 var 사용시 - closure 사용
var funcs = [];
for (var i = 0; i < 10; i++) {
  funcs.push((function (v) {
    return function () {
      console.log(v);
    }
  })(i));
}
funcs.forEach(function (f) {
    f();
})

// ES6+ let 사용시
let funcs = [];
for (let i = 0; i < 10; i++) {
  funcs.push(function () {
	  console.log(i);
  });
}
funcs.forEach(function (f) {
  f();
})

2-2. const

1) 재할당 불가능

const PI = 3.141593;
PI = 3.14; /* Uncaught TypeError: Assignment to constant variable. */

2) 최초 선언 시 할당하지 않으면

const PI; /* Uncaught SyntaxError: Missing initializer in const declaration */
PI = 3.14; /* Uncaught TypeError: Assignment to constant variable. */