var, const, let의 차이
javascript의 변수형에 대해 알아보자
변수란, 데이터를 담는 상자를 의미한다.
"피자"라는 text를 담을 수도 있고, 3 이라는 숫자를 담을 수도 있다.
Javascript에서는 크게 3가지 변수형이 있다. var, const, let이다.
여기에는 문자열을 담을 수도, 숫자를 담을 수도, Object 객체를 담을 수도 있다. Javascript는 굉장히 자유도가 높은 언어이다. 그래서 유연하지만 매우 위험(;;;)하기도 하다. var는 그 중에서도 특히 너무 유연해서, 이제는 잘 쓰지 않는다. 지금은 const와 let만 거의 쓴다고 보면 된다. 이들의 차이를 알아보자.
선언과 할당
변수를 '선언'한다는 것은, 예를 들면 다음과 같다. totoro라는 이름의 박스(변수)를 하나 선언했다.
const totoro
그리고 그 안에 "cute"이라는 글자를 담았다. 이건 '할당'이라고 한다.
const totoro = "cute"
재선언이 가능한 var
똑같은 이름의 변수를 또 만들면 어떻게 될까? 즉, 재선언을 하게 되면 어떻게 될까?
var totoro = "cute" // ok
(... 수많은 코드 중략...)
var totoro = "animation" // ok
var는 똑같은 이름의 변수를 또 다시 재선언할 수 있다. 계속 계속 재선언하면 이전에 선언됐던 값이 덮어씌어진다. 여기서 많은 문제가 발생한다. 이전에 개발했던 다른 동료 개발자가 totoro라는 이름으로 변수를 선언한 게 있는데, 협업하는 과정에서 똑같은 이름으로 변수를 만들 가능성이 있다. 그게 덮어씌어진다면? 예기치 못한 에러가 발생할 것이다. 그래서 요즘엔 var는 잘 안쓴다.
반면 const와 let은 재선언을 하게 되면 에러가 난다.
const mononokehime = "원령공주" // ok
const mononokehime = "모노노케히메" // ERROR!
let starbucks = "스타벅스" // ok
let startbucks = "별다방" // ERROR!
재할당이 불가능한 const
'할당'이란, 값을 넣는 것이다. var와 let은 이미 선언한 변수에 계속 값을 변경할 수 있다. 하지만 const는 재할당 할 수 없다. const라는 단어 자체가 상수(constant)에서 온 이름이기 때문에, 변하지 않는 값을 넣을 때 주로 사용된다. 한 번 담으면, 다른 값으로 바꿀 수 없다. (하지만 Object내의 데이터는 가능하다.)
let myFavoriteCoffe = "Ice Americano"
myFavoriteCoffe = "Cafe Latte" // ok
var myFavoriteCafe = "Starbucks"
myFavoriteCafe = "Paul bassett" // ok
const myFavoriteCafe = "Starbucks"
myFavoriteCafe = "Paul bassett" // ERROR!
함수(function)에서 적용되느냐(=var)
블록(스코프{ })에서 적용되느냐(=const, let)
이게 먼말이냐 하며는,
변수가 적용되는 범위가 다르다는 말이다.
다음과 같은 코드가 있다고 가정해보자.
function abcmart() {
if(true) {
var a = 1;
let b = 2;
const c = 3;
}
console.log(a); // 1
console.log(b); // ERROR: b is not defined
console.log(c); // ERROR: c is not defined
}
abcmart();
지금 if문 안의 스코프, 즉, 중괄호 { } 안에서 변수들이 선언됐다. 변수 선언이 유효한 범위가 function 전체인 var 같은 경우, if 문을 벗어나서 변수에 접근해도 접근이 된다.(a) 하지만 const와 c는 변수 선언의 유효한 범위가 스코프 { } 내로 한정된다. 즉 if 문 안에서 b나 c에 접근했다면 에러가 안났겠지만, 스코프 { } 밖에서 해당 변수에 접근하려니 에러가 난다.
결론: var대신 const와 let을 쓰자
var는 기존의 값을 의도치 않게 덮어씌우거나, 참조하고 싶은 범위가 헷갈릴 수 있으니 가급적 쓰지 않도록 하자. const와 let을 쓰자.
