var, let, const

서론)

 

현재 JS로 진행 중인 ‘우주두잇’ 프로젝트에 여러 명의 개발자가 참여하고 있습니다. 각자의 코드 스타일이 있기 때문에 코드가 난잡해졌습니다. 그 중에서도 const, let을 구분하지 않고 사용하는 경향이 있었습니다. 사실, 저는 var의 사용을 지양하고 let과 const를 적극 사용하고 있었는데, const와 let을 구분 해야 하는 정확한 이유를 몰랐습니다. (단순히 상수 선언에만 const로 선언을 해야한다라고 생각했었음). 그래서 이번 기회에 위 세 키워드의 차이점을 공부하고, 정리하는 시간을 갖습니다. 

최종적으로 const와 let 중 언제, 무엇을 사용해야 하는 지를 알 수 있을 것입니다.

---

본론)

var

var youCanChangeMe = 'flexible';

if(true) var youCanChangeMe = 'changed';

var change = function () { var youCanChangeMe = 'changed again'}

change();

youCanCangeMe; //changed

위의 소스를 통해서 var는 다음과 같은 특징을 갖는 것을 알 수 있습니다.

• 어디에서든 선언하고 할당 할 수 있다.
• functional scope를 갖는다.
• 함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없다.

var와 관련 되어 우리에게 익숙한 단어가 바로 Hoisting 입니다. (Hoisting: 현재 scope 내에서 변수 선언을 가장 위로 끌어올리는 행위 (할당은 안함))

var cat = 'cat';
cat; // cat
dog; //undefined, no errors!
var dog = 'dog';

---

ES6에서 var의 단점을 해결해주는 새로운 키워드들을 소개하는 데, 그들이 let과 const 입니다. 이 둘의 var와 다른 가장 큰 특징은 Block scoped 입니다. 또한, var와 달리 let과 const로 선언된 변수는 Hoisting 대상이 아닙니다.

let

let man = 'man';
if (true) { let man = 'man2'}
man; // man

let 선언 시, 자신만의 block scope를 가집니다.

let man = 'man';
if (true) { man = 'man2'}
man; // man2

함수 내의 새로운 선언이 없고, 할당만 할 경우 man의 값이 변경됩니다.

const

const cat = 'cat';
cat = 'cat2' // TypeError: Assignment to constant variable.

const는 constant(상수)의 줄임말 입니다.

여러 번 할당을 할 수 있는 let, var와 달리, 처음 선언할 때 할당을 하고 나서 다시 할당할 수 없습니다.

예외적으로, Object 와 Array를 할당 시에는 수정이 가능합니다

const animals = {};
animals.cat = 'cat';

var 대신 const, let을 사용해야 하는 이유

var bunny = "eat carrot";

if(bunny) {
  var bunny = "eat twig";
  console.log(bunny) //  "eat twig"
}

console.log(bunny)// "eat twig"

// When using let what do we get?
let bunny2 = "eat carrot";

if(bunny2) {
  let bunny2 = "eat twig";
  console.log(bunny2) // "eat twig"
}

console.log(bunny2)// "eat carrot"

var로 선언된 bunny는 if절을 거치면서 예상치 못한 bunny의 값을 보여줍니다.

scope를 그냥 무시해 버리죠. 그렇기 때문에, 얘기치 못한 문제가 발생할 수 있습니다. 

또한 개발 시에 혼란스러움을 가증 시킬수도 있겠죠.

이러한 이유로 var 대신 const, let을 사용하기로 합니다.

---

결론)

그렇다면 서론에서 질문하였던 const와 let을 언제 어디서 구분해야 할까요??

우선적으로 const를 사용합니다. 잠재적인 문제를 피하기 위해서 read-only인 const를 사용합니다. 변수에 동적인 값이 할당될 수 있을 때, let을 사용합니다.

코드베이스를 처음 접하는 개발자가 해당 키워드를 통해 변수의 동작을 예측할 수 있도록 const와 let을 구분해서 사용합시다.

---

*참고:

https://medium.com/free-code-camp/learn-es6-the-dope-way-i-const-let-var-ae828580472b

https://codeburst.io/const-let-and-var-which-and-when-541a2721c18