📚 var, let, const 차이점

📕 var

var키워드의 문제점은 크게 3가지 존재한다.

1. 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.

var a = 1;
console.log(a); // 1

var a = 2;
console.log(a); // 2

2. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.

var a = 1;

if (true) {
    var a = 2;
}

console.log(a); // 2

3. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 변환한다.

console.log(a); // undefined

var a = 1;

---

📕 let, const

ES6에서 나온 let과 const 키워드가 3가지 문제점을 해결했다.

1. 변수 중복 선언 불가

1-1 let

• let키워드는 변수 재선언이 불가하지만 재할당은 가능하다

// 변수 선언
let a = 1;
console.log(a); // 1;

// 변수 재선언
let a = 2;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

// 변수 재할당
a = 3;
console.log(a); // 3

1-2 const

• const키워드는 변수 재선언 불가 또 재할당 불가

// 변수 선언
const a = 1;
console.log(a); // 1;

// 변수 재선언
const a = 2;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

// 변수 재할당
a = 3;
console.log(a); // Uncaught TypeError: Assignment to constant variable.

• 선언과 초기화를 동시에 진행해야한다

const a;    // Uncaught SyntaxError: Missing initializer in const declaration
const a = 1

• 객체의 재할당은 가능하다.

const a = {
    b: 2,
};
a.b = 3;

console.log(a); // {b: 3}

2. 블록 레벨 스코프

let a = 1

if (true) {
  let a = 5
}

console.log(a) // 1

• let, const 키워드로 선언한 변수는 모두 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

3. 변수 호이스팅

3-1 let

• 선언 단계와 초기화 단계가 분리되어 진행, 선언단계가 먼저 실행되었지만 초기화 단계가 실행되지 않았기때문에 참조 에러 발생

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

let a = 1;

3-2 const

• 선언과 초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행될 수 없다. 따라서 초기화가 진행되지 않은 상태이기 때문에 에러 발생

console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization

const a = 1;

📕 정리

변수 선언에는 기본적으로 const 사용,
재할당이 필요한 경우 let

📕 참조

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://www.howdy-mj.me/javascript/var-let-const