[JavaScript] var, let, const 간단하게 알아보기

 

변할 수 있는 임의의 값, '변수'를 생성하기 위해 자바스크립트는 var, let, const 라는 키워드를 제공한다. ES5까지는 var 키워드만 사용되었는데, ES6부터는 let과 const도 이용하여 변수를 생성할 수 있다.

 

그렇다면 왜? 굳이 let과 const라는 키워드를 추가하여 변수를 만들 때 셋 중 하나를 선택하게 해두었을까?

 

 

 

var

 

아이스크림이라는 변수를 var로 생성하고, 500이라는 값을 주었다. 따라서 콘솔로 찍어보면 아이스크림은 500이라는 값이 나온다.

 

이때, 변수 빵이 가지고 있는 값이 1000 이상이라면, 아이스크림이라는 변수를 다시 선언하여 1000이라는 값을 부여한다. if문의 괄호 시작, 끝 점이 끝났으므로 if문 안에서 선언된 var 아이스크림 = 1000;은 괄호 밖에서 사용되지 않았으면 싶다. 하지만 괄호 밖에서 콘솔을 찍었음에도 불구하고 아이스크림값은 1000이 나온다.

 

var는 함수 안에서 선언한 변수도 전부 동일한 중요도로 처리하기 때문이다. (스코프 개념과 연관되어 있으나 공부 초반인 지금은 간단하게 짚고 넘어가는 것이 목표이므로 더 세부적으로 정리하지 않았다.)

 

코드가 예제코드같이 6줄, 7줄이 아니라 1만줄, 2만줄이라면? 이전에 같은 이름으로 선언된 변수가 있는지 확인하기도 어려울 것이고, 다른 사람과 함께 작업하다보면 변수가 섞여 위와 같이 내가 원하는 값이 나오지 않을 수도 있다.

 

이러한 문제점을 해결하기 위해 추가적으로 제공된 것이 let과 const이다.

 

 

 

let

 

위의 var와 동일한 코드를 작성하였다. 나는 if의 괄호가 끝나는 시점에는 if{} 안의 변수가 바깥에 영향을 주지 않았으면 좋겠다. 이때 let을 사용하면 해결할 수 있다.

 

아이스크림에 let 키워드를 붙여 변수를 선언하고, 500이라는 값을 주었다. 그 뒤 빵이라는 변수의 값이 1000원과 같거나 크다면 아이스크림은 500이 아닌 1000이라는 값을 붙이려 한다.

 

let으로 변수를 선언한 후에 콘솔을 찍어보면, 원하는 결과값을 출력할 수 있다. if{} 안에서 다시 선언된 let 아이스크림 = 1000;은 괄호가 끝나면 더이상 괄호 바깥의 코드에 영향을 주지 않고, 맨 위에 작성했던 500값이 그대로 출력되는 것을 확인할 수 있었다.

 

 

 

 

또한 let은 var의 문제점으로 말했던 '같은 레벨 내의 중복선언' 도 해결할 수 있다. 위와 같이 같은 레벨(노란색)에서 아이스크림 변수를 선언한 후, 이후에 다시 동일한 변수명으로 중복 선언을 하면 아이스크림 변수는 이미 사용되었다 ('아이스크림' has already been declared)는 에러를 띄워준다.

 

따라서 코드가 아주 길어지더라도 내가 할당한 값이 변하지 않도록 let이 자체적으로 걸러 도움을 주는 것이다.

 

 

 

const

 

내가 변수에 할당하려는 수가 상수, 즉 항상 똑같은 수일 경우 const 키워드를 이용해 변수를 선언하면 된다.

 

가격은 1만원, 부가가치세율은 0.1(10%) 이다. 가격은 물건에 따라 언제든지 변동될 수 있지만 부가가치세율이 10%라는 것은 변하지 않는다. 따라서 const 키워드를 이용해 부가가치세는 0.1이라는 값을 할당한다.

 

이후 기존에 이미 선언한 부가가치세율의 값을 0.2로 변경해 재할당하려고 하면, 자바스크립트는 너가 const로 선언한 부가가치세율값은 바꿀 수 없는 값인데 왜 바꾸려고 하니? 라며 에러를 띄워준다.

 

 

따라서 유연하지만 너무나도 유연해서 코드가 길어지면 내가 원하는 의도와 다른 값을 띄워줄 수 있는 var보다, 상황에 따라 let과 const 키워드를 이용해 변수를 선언하면 '유연하면서도 견고하게' 코드를 짤 수 있다.

 

let과 const가 var와 정확히 어떤 차이가 있는건지 항상 헷갈렸는데, 쉬운 코드로 정리해보면서 개념을 정립할 수 있었다. 웹개발종합반 1회독이 끝나면 변수 키워드를 배우면서 같이 습득한 '스코프', '호이스팅'에 대해서도 깊게 정리해보고 싶다.

 

 

---

[참고자료]

https://youtu.be/61iolhWgQt0

유튜브 @생활코딩

https://youtu.be/ZU4MXkwDb9g

유튜브 @우아한Tech