[Modern JS] keyword ? var : ( let || const )

var의 문제점.

헷갈리는 함수 레벨 스코프.

if 문 안에서 선언 했지만 if 문 밖에서 사용 가능.
var는 코드 블럭을 무시하기 때문에 전역 변수가 됨.
01.js

  (function() {
    if( true ) {
      var variable = 'function scope';
    }
    console.log( variable );
  })();

중복 선언이 가능.

전역 변수가 된 var가 중복 선언 까지 됨.
02.js

  (function() {
    var variable = 'function scope';
    var variable = 'duplicated';
    console.log( variable );
  })();

var keyword 생략 가능

var keyword 를 생략해도 변수가 선언됨.
03.js

  (function () {
    variable = 'no keyword';
    console.log(variable);
  })();

Hoisting 문제

Hoisting?
선언은 코드 처음에 실행되지만, 변수에 값을 할당한 곳에서 값이 할당하는 문제.
04.js

  (function() {
    console.log( variable );
    var variable = 'hoisted';
  })();

  //  -> 위 코드는 호이스팅에 의해 아래와 같다.

  (function() {
    var variable;
    console.log( variable );
    variable = 'hoisted';
  })();

let keyword

let keyword를 사용하면, 문제가 해결됨.
05.js

//  1. 블록 레벨 스코프
{
  let variable = 'block scope';
  console.log( variable );
}

//  2. 중복 선언 => syntax error
{
  let variable = 'block scope';
  let variable = 'duplicated';
  console.log( variable );
}

//  3. 호이스팅   => syntax error
{
  console.log( variable );
  let variable = 'hoisted';
}

const keyword

상수 선언 키워드로 재 할당이 불가능하고, 선언과 동시에 할당이 이루어 져야 한다.
06.js

  //  Privitive
  let a = 'a';
  a = 'b';
  console.log( a );

  const c = 'c';
  c = 'd'; // ->  TypeError

const 는 call by value로 주로 Object나 Array를 선언하는데 사용되며,
내부의 요소는 재할당 가능하다.
07.js

  //  Reference
  let e = {
    foo : 'foo',
  };
  e = {
    bar : 'bar'
  };

  console.log( e );

  const f = {
    foo : 'foo',
  };
  /*
  f = {
    foo : 'bar'
  };  //  -> TypeError
  */
  f.foo = 'bar'

  console.log( f );
  /**
  * const c = { c : 'c' };
  * c    -> call by ref
  * c.c  -> call by value
  */