[JavaScript]var, const, let 에 대해서

Var

ES5 이전에는 var 만 존재했고, 재할당과 재선언이 모두 가능하다

• Function Scope (함수 스코프) 로, 변수가 선언된 함수 내부의 어디서든 참조가 가능하지만, 함수 외부에서는 참조가 불가능하다
  함수 내부에서 선언된 var는 지역변수, 함수 외부에서 var를 선언하면 전역변수로 간주된다.

var의 문제점

• 변수 선언이 유연하다는 장점이 있지만, 이로 인해 예기치 못하는 값이 반환되는 등 예측하기 어려운 동작을 유발할 수 있다
• 코드가 길어질수록 scope (유효범위)를 추적하기 어려워져 유지보수가 힘들어진다
• function scope (함수 스코프)를 가지기 때문에 블록({}) 내부에서 선언하더라도 해당 변수가 함수 전체 또는 전역에 영향을 줄 수 있으며, Hoisting (호이스팅) 에 의해 선언 이전에 참조하더라도 오류가 발생하지 않고 undefined를 반환하므로 버그가 발생하기 쉬운 구조이다.

Function Scope (함수 스코프)

• 변수의 유효 범위가 해당 변수를 선언한 함수 내부로 제한되는 것

function test() {
 var a = 10;
 console.log(a); // 10
}

console.log(a); //  ReferenceError: a is not defined

if (true) {
 var x = 5;
}
console.log(x); //  5

Hoisting (호이스팅)

• 실행전 변수 선언 또는 함수 선언이 코드 최상단으로 끌어올려지는 현상

Const / Let

ES6에 처음 등장한 const, let은 JavaScript의 신뢰성과 예측 가능성을 높히기 위해 도입되었다 (코드의 버그를 줄이고, 스코프를 명확히 하고, 불변성을 보장하려는 목적)

• Block Scope ( 블록 스코프 ) 로, 중괄호({})로 둘러싸인 블록 내부에서만 유효하다. 따라서 해당 블록을 벗어나면 변수에 접근할 수 없다

  function func() {
      let a = 1
      const b = 2
      console.log(a) // 1
      console.log(b) // 2
  }
  console.log(a) // ReferenceError
  console.log(b) // ReferenceError

• let, const도 Hoisting (호이스팅) 이 일어나지만, 변수 선언 전에 접근하면 ReferenceError 가 발생한다. 이는 TDZ(Temporal Dead Zone) 때문이다

  console.log(a) // ReferenceError
  let a
  console.log(a) // undefined
  a = 10
  console.log(a) // 10

  TDZ(Temporal Dead Zone)
  let, const 로 선언된 변수가 호이스팅되어 메모리는 확보되었지만, 최기화되지 않은 상태에서 접근할 수 없는 시간적 구간을 말한다

  console.log(a)  // TDZ 구간
  let a
  a = 1
  console.log(a)

Const

• const 는 불변변수로 재정의, 재할당 모두 불가능하며 선언과 동시에 반드시 초기화해야 한다
• 객체나 배열 같은 참조형 데이터는 내부 프로퍼티 변경 가능 (얕은 불변)

const arr = []
arr.push(1)
console.log(arr) // [1]

let

let 은 가변변수로 재선언은 불가능하지만, 재할당은 가능하다

요약

var는 가급적 사용을 지양하고 let 과 const 의 사용을 권장한다
const를 기본으로 쓰고, 변수 재할당이 필요한 경우 let을 사용한다