변수 선언 키워드 :: var, const, let

변수 선언 키워드는 var, const, let이 있다.
const와 let은 ES6에서 추가되었다.

1. var

• 선언과 초기화가 동시에 이루어져, 값을 명시하지 않으면 undefined가 들어간다.
• 스코프를 함수로 제한한다.
  👉🏻 let 키워드와 다른점: 변수 블록을 고려하지 않고 현재 함수 (또는 전역 스코프) 어디에서나 접근할 수 있는 변수를 선언한다.

var x = 1;

if (x === 1) {
  var x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 2

• 프로그램 최상위에서 사용할 경우 전역 객체에 속성을 추가한다.

var x = 'global';
console.log(this.x); // "global"

1.1. var hoisting 호이스팅

• 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 행동
• 변수들은 어디에 선언이 되어있든 간에 어떠한 코드가 실행되기 전에 먼저 처리된다.
  = 어디서든 변수를 선언하면 최상위에 선언한 것과 동등하다.
  = 변수가 선언되기 전에 사용 될 수 있다!

bla = 2
var bla;

// 위 선언을 다음과 같이 암묵적으로 이해하면 됩니다:

var bla;
bla = 2;

2. let

• 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화 할 수 있다.
  (자신을 선언한 블록과 모든 하위 블록을 스코프로 가진다.)
  👉🏻 var 키워드와 다른점: let을 사용한 표현식 내로 범위가 제한된다.

function varTest() {
  var x = 1;
  if (true) {
    var x = 2; // 같은 변수!
    console.log(x); // 2
  }
  console.log(x); // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2; // 다른 변수
    console.log(x); // 2
  }
  console.log(x); // 1
}

2.1. TDZ 시간상 사각지대

Temporal Dead Zone

• 변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 '시간상 사각지대'에 들어간 변수라고 표현한다.
  var로 선언된 변수는 선언 전에 쓸 수 있다.(undefined)

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

• 사각지대가 코드의 작성 순서(위치)가 아니라 코드의 실행 순서(시간)에 의해 형성된다.
  👇🏻 let 변수 선언 코드가 그 변수에 접근하는 함수보다 아래에 위치하지만, 함수의 호출 시점이 사각지대 밖이므로 정상 작동한다.

{
    // TDZ가 스코프 맨 위에서부터 시작
    const func = () => console.log(letVar); // OK

    // TDZ 안에서 letVar에 접근하면 ReferenceError

    let letVar = 3; // letVar의 TDZ 종료
    func(); // TDZ 밖에서 호출함
}

• var를 let으로 재선언
  아래와 같이 사용하면 호이스팅으로 인해 var가 블록 최상단으로 끌어올려져 변수 재선언을 하는 것과 같아지기 때문에 SyntaxError가 발생한다.

let x = 1;

{
  var x = 2; // 재선언으로 인한 SyntaxError
}

3. const

• 블럭 범위의 상수를 선언한다.
• 재할당 & 재선언 불가능
• 선언과 동시에 초기화가 이루어져야 한다.
• 대문자를 사용하는 것이 일반적인 관습이다.

객체 & 배열

• 값을 변경하거나 삽입하는 것이 가능하다.
• 변수에 새로운 객체를 덮어쓰거나, 새로운 배열을 배정하는 것은 불가능하다.

// const는 오브젝트에도 잘 동작합니다
const MY_OBJECT = {'key': 'value'};

// 오브젝트를 덮어쓰면 오류가 발생합니다
MY_OBJECT = {'OTHER_KEY': 'value'};

// 하지만 오브젝트의 키는 보호되지 않습니다.
// 그러므로 아래 문장은 문제없이 실행됩니다
MY_OBJECT.key = 'otherValue'; // 오브젝트를 변경할 수 없게 하려면 Object.freeze() 를 사용해야 합니다

// 배열에도 똑같이 적용됩니다
const MY_ARRAY = [];
// 배열에 아이템을 삽입하는 건 가능합니다
MY_ARRAY.push('A'); // ["A"]
// 하지만 변수에 새로운 배열을 배정하면 에러가 발생합니다
MY_ARRAY = ['B']