[JavaScript] const, let, var의 차이점

  JS로도 알고리즘 문제를 풀어보기 시작했습니다. 그런데 for문 안에 const를 넣었더니 이상한 오류가 났어요! let이나 var은 잘 작동되는데 말입다. 단순히 const를 C++에서의 int나 string 정도로 생각했는데 이 참에 알아봐야겠다고 생각했습니다.

---

var, let, const 모두 변수를 선언할 때 쓰입니다. 

var

  var만의 가장 큰 특징은 중복하여 변수 할당이 가능하다는 점입니다. ES6이전, 즉 ES5까지는 var밖에 없었습니다.

var test = 'javascript';
console.log(test); //javascript

var test = 'react';
console.log(test); //react

  이렇게 '같은 변수명'에 다른 값을 할당해주어도 오류가 발생하지 않습니다. 

 이는 디버깅을 매우 힘들게 하며, 코드 길이가 길어져 중복 변수명이 발생했을 때 오류를 잡아내기 힘들게 합니다. 특히, 자바스크립트 특유의 자율성을 고려한다면 오류 발생 가능성은 더더욱 증가할 거에요.

 

이러한 점을 해결하기 위해 ES6부터는 let과 const를 이용하여 변수를 선언할 수 있게 됩니다. const는 C++에도 있죠?

---

let & const

  let과 const는 이렇게 변수를 다시 선언할 수 없게 되었습니다. 즉, let a = 1;을 선언했다면 다시 let a = 2;로 재선언할 수 없습니다. 그렇다면 let과 const의 차이는 무엇일까요?

 

let과 const의 기능적인 차이는 '값 재할당 가능' 여부입니다.

 

let test_1 = 1;

test_1 = 2; //가능

const test_2 = 2;

test_2 = 3; //불가능

  let은 한번 선언된 변수의 값을 바꿀 수 있는 반면, const로 선언된 변수는 값을 바꿀 수 없습니다. 즉 const로 선언된 변수는 immutable합니다. 

 

  사실 React 개발하면서 값이 자주 바뀔 일은 없기 때문에 const만 써왔네요. 그러니 for문과 같이 값이 재할당되어야하는 상황에서는 const로 선언 시 오류가 난 것입니다. 애초에 constant(상수)니까요...

 

---

함수 레벨 스코프 VS 블록 레벨 스코프

 

  var와 let & const의 차이는 하나 더 말할 수 있는데요. 바로 변수가 어디까지 유효한지에서 차이가 있습니다.

var는 함수 레벨 스코프입니다. 같은 함수 내에서는 모두 참조가 가능하며, 함수 외부에서 선언된 변수는 global 변수로 처리됩니다. 반대로, let과 const는 블록 레벨 스코프입니다. for문 if문 등 한 코드 블록 내에서 선언된 변수는 그 블록 안에서만 참조가 가능하고, 외부에서는 참조할 수 없습니다. 

let foo = 123; // 전역 변수

{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

이렇게 보면 이해가 쉬울 것 같습니다.

 

---

마지막 차이점은 호이스팅 시 초기화의 여부입니다. var는 호이스팅 시에 undefined로 초기화가 되는 반면, let과 conse는 초기화되지 않습니다. 호이스팅에 대해서는 다음 포스트에서 다뤄보겠습니다!

 

 

 

 

 

Reference

https://poiemaweb.com/es6-block-scope