Javascript - var / let / const

열심히 TypeScript를 하다가 문득 생각이 났다.

"이거 var / let / const 차이가 뭐지"

대충은 알고 있었다. let에는 대입을 해도 되고 const에는 안 된다.
const에는 write가 안 되기 때문에 더 효율적이다 정도.
하지만 어떤 상황에서 써야하는지, 어떤 차이가 있는지는 정확히 몰랐다.

---

스코프의 차이

var은 함수 레벨 스코프이고, let, const는 블럭 레벨 스코프이다.

이게 무슨 뜻이냐면, 함수 레벨 스코프는 함수 내에서라면 어디서든 쓸 수 있다.
즉, if문이나 for문 안에서 선언했더라도 함수 안에만 있으면 사용할 수 있다.

블럭 레벨 스코프는 블럭 안에서만 사용할 수 있다. 블럭은 { }라고 생각하면 된다.

function varUsed() {
  var a = 5;
  
  if (a > 5) {
    var b = 10;
  }
  
  console.log(b) // 가능
}

function letConstUsed() {
  const a = 5;
  
  if (a > 5) {
    const b = 10;
  }
  // b를 선언한 블럭이 종료
  
  console.log(b); // 불가능
}

---

선언 전에 사용 할 수 있다 VS 없다

var로 선언된 변수는 선언 전에도 사용할 수 있다. 이게 무슨 말이냐면

a = 5;
var a;

이게 가능하다. let과 const는 불가능 하다.
보면 알다시피 코드가 그지같기 때문에 var를 안 쓰는게 아닌가 싶다.

정확히는 var로 선언이 되면, undefined로 메모리가 할당 된다.
let과 const의 경우에는 초기 값이 없다면 자동으로 할당되지 않는다.

그렇다면 선언할 때 초기값을 넣으면 선언 전에도 사용할 수 있을까?

a = 5;
let a = 10;

저런. 안타깝게도 되지 않는다. 사실 이게 맞는거 같다

---

같은 이름으로 재선언이 가능하다

이게 뭔 개또라이같은 경우인지는 모르겠지만 왜 이런걸 허용했는지도 잘 모르겠다.
딱 봐도 이런 문제점이 생기기 쉬워 보인다.

function stringBuilding() {
  var result = "";

  result += list.join(", ");

  ... 대충 엄청 긴 코드

  var result = ""
  result += something;
  
  ... 또 엄청 긴 코드

  return result;
}

다행히 이런 경우는 let과 const가 처리했으니 안심하라구! (재선언 불가)

---

초기 값을 주어야 하는가? 할당된 값을 바꿀 수 있는가? (var & let VS const)

var과 let은 초기값을 주지 않아도 가능하고, const는 반드시 주어야 한다.
또한 var과 let은 값을 변경할 수 있으며, const는 변경할 수 없다.(object안의 property에 대해서는 제외)

요약하면 const는 선언문 이외에는 대입 연산자(=)를 사용할 수 없다. 나머지는 되고.

---

출처

https://medium.com/@yeon22/javascript-var-let-const%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-9fab5c264c9c

(JavaScript) var, let, const의 차이점

https://eblee-repo.tistory.com/37

[JavaScript] ES6 블록 레벨 스코프에 대해 알아보자!! (feat.let, const)

https://curryyou.tistory.com/192

[자바스크립트] 변수 선언 방식 차이: var / let / const