자바스크립트 - var, const, let?

var, let, const 세 가지 변수 선언 키워드의 주요 차이점

---

특징	var	let	const
스코프	함수 스코프(Function Scope)	블록 스코프(Block Scope)	블록 스코프(Block Scope)
재선언	가능	불가능	불가능
재할당	가능	가능	불가능
초기화	선언 시 undefined로 초기화	선언 시 초기화하지 않음(TDZ 적용)	선언과 동시에 초기화 필요
호이스팅	선언이 스코프의 최상단으로 끌어올려짐	선언이 스코프의 최상단으로 끌어올려짐(TDZ)	선언이 스코프의 최상단으로 끌어올려짐(TDZ)
Temporal Dead Zone (TDZ)	적용되지 않음	적용됨	적용됨
- 함수 스코프(Function Scope): var로 선언된 변수는 선언된 함수의 전체 범위에서 유효합니다.

```jsx
var x = 1;

function foo() {
    console.log(x) // 0
}
console.log(x) // 0
```

• 블록 스코프(Block Scope): let과 const로 선언된 변수는 선언된 블록({}로 둘러싸인 범위) 내에서만 유효합니다.

    function foo() {
    let x = 0;
        console.log(x) // 0
    }
    console.log(x) // ReferenceError: x is not defined
  

• 재선언: 동일 스코프 내에서 변수를 다시 선언하는 것. var는 재선언이 가능하지만, let과 const는 재선언이 불가능합니다.

    function foo() {
        var x = 9;
        var x = 0;
        console.log(x) // 0
    }
  
    // let, const 키워드는 스코프 내에 같은 이름 변수 선언이 안된다.
    function bar() {
        let x = 10;
        let x = 0; // SyntaxError: Identirier 'bar' has already been declared
    }

• 재할당: 변수에 새로운 값을 할당하는 것. const는 한 번 선언되면 재할당이 불가능하다.

• 초기화: 변수 선언 시 값을 할당하는 과정. var는 undefined로 초기화되며, let은 초기화되지 않은 상태로 시작한다. const는 반드시 선언 시점에 초기값을 할당해야 한다.

• 호이스팅(Hoisting): 변수 선언이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 JavaScript의 특징이다. let과 const는 호이스팅은 되지만, TDZ로 인해 선언 전에 접근할 수 없다

• Temporal Dead Zone (TDZ): 변수가 선언되었지만 아직 초기화되지 않아 접근할 수 없는 상태를 나타냅니다. let과 const에만 적용된다.

변수 선언시 권장하는 방법

---

• ES6를 사용한다면 var 키워드는 사용하지 않는다.
• 재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
• 변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const 키워드를 사용한다. const는 재할당을 금지하기 때문에 비교적 안전하다.