자바스크립트 변수 var, let, const 차이점

어느덧 변수차이도 블로그에 적는 날이 오는구나

뭐가 다른거지? 하고 const만 썻던거 같은데 면접용 말고 한번 정리하면 좋을 듯 싶어서

이해하기 쉽게 정리를 해두려고 한다 

 

---

1. var

예전에는 자바스크립트 변수선언이 var만 가능했다고한다. 

var로 변수 선언을 했을 때의 가장 큰 특징은 중복 선언이 가능하다는 점 

 

var a = 100
console.log(a) //결과값 100

var a = 200
console.log(a) //결과값 200

var a = 300
console.log(a) //결과값 300

 

여기서 변수명을 같은 a로 쓰고 있는데, 같은 변수명을 계속 선언해주어도 에러가 나지 않는다

선언 해줄 때마다 값이 초기화 되는거라 최종적으로 저장되는 값은 마지막에 선언해준 300으로 나오게 된다 

다만, 유연한 변수 선언이 가능하다고 하기엔 중복선언의 위험이 더 크기때문에 ES6 이후에는 이 문제를 보완하기 위해서 let, const가 추가 되었다

 

뭐가 문제야? 라고 생각 할 수 있는데

사람인지라 이전에 내가 쓴 변수를 까먹고 또 쓰게 되면 결과값이 바뀌는 거라 

갠적으로는 엄청 큰 단점이라고 생각함 

 

---

2.let

변수명을 중복으로 선언하게 되면 에러가 발생되어 사용을 못함 

다만, 값을 재할당 하는 것은 가능

 

아래 예시를보면, let a = 200은 에러가 발생이 되는데, a = 200은 에러가 발생이 안된다 

let 선언 없이 재할당 하는 것은 가능하다는 것! 

let a = 100
console.log(a) //결과값 100

let a = 200 
console.log(a) //에러발생 

a = 200
console.log(a) //결과값 200
// let 선언 없이 값을 재할당 하는 것은 가능함!

---

3. const 

let과 동일하게 변수명 중복 사용이 불가능하며, 

let과 다른점은 재할당도 불가능!!!!!!!

let a = 100
console.log(a) //결과값 100

let a = 200 
console.log(a) //에러발생 

a = 200
console.log(a) //에러발생

 

사실 매번 const만 사용해서 코딩을 했는데 

이번 프로젝트를하면서 재할당이 필요한 영역이 있어서 let 사용을 해보았는데 

역시 사람은 사용하면서 이해하게 되는 것 같다 

 

let 사용하여서 값을 재할당 받게 한 예시! 

const editcategory = useSelector((state) => state.post.post.category);
  let stateCategoryValue = "";
  if (editcategory === "study") {
    stateCategoryValue = "공부";
  } else if (editcategory === "exercise") {
    stateCategoryValue = "운동/건강";
  } else if (editcategory === "self-development") {
    stateCategoryValue = "자기개발/취미";
  } else if (editcategory === "living-habit") {
    stateCategoryValue = "생활습관";
  } else if (editcategory === "eco") {
    stateCategoryValue = "에코";
  }