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

Javascript 변수선언방식인 var, let, const는 크게 다음과 같은 차이점을 갖고 있다.  

 

	재선언	재할당	스코프
var	O	O	함수블록단위
let	X	O	블록단위
const	X	X	블록단위

재선언

:변수를 다시 선언하는 것

 

var abc;
let abc2;
const abc3;

 

var O, let X, const X

 

let, const와 달리 var는 변수 재선언이 가능하기때문에 선언을 여러 번해도 에러없이 각기 다른 값이 출력할 수 있다.

이는 필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수 도 있지만,

같은 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다고 할 수 있다.

 

재선언이 불가능한 let과 const의 경우 변수 재선언이 이루어질 경우 다음과 같은 오류를 뱉어낸다.

Uncaught SyntaxError: Identifier 'abc' has already been declared

재할당

:변수에 값을 다시 할당하는 것

 

var abc = 30;

abc = 50;

 

var O, let O, const X

변수에 새로운 값을 다시 할당하는 재할당은 const를 제외한 var와 let인 경우 가능하다.

const는 재할당 역시 불가능하기 때문에 변하지 않는 값을 다룰때,

또는 DOM선택자를 담는 변수로 사용하는 경우가 많다.

 

var abc;

var abc=10;
console.log(abc); //10

var abc='hahaha';
console.log(abc); //'hahaha'

 

스코프

{}으로 묶인 것을 블록이라고 하게 되는데

var는 function블록단위의 scope를,

let과 const는 블록단위의 scope를 갖는다.

 

즉, if나 for같이 생긴 블록단위는 해당하지 않고 딱 함수에 해당하는 scope를 갖는것이다.

함수 단위의 scope를 갖는다는 뜻은 함수 내에서 변수가 할당되는 것만 지역변수로 해당이 되고 그 외에 모든 곳에서 일어나는 변수 할당은 전역변수에 해당하기 때문에 전역 변수를 남발할 가능성을 높인다.

(변수의 스코프는 좁을수록 좋다.)

 

function varEx(){
    var abc=10;
    console.log(abc); //10
}
console.log(abc); //undefined

if(~~~){
    var abc='hahaha';
}
console.log(abc); //hahaha

function varEx2(){
    var abc=2021;
    console.log(abc); //2021
}
console.log(abc); //hahaha

 

: 블록단위의 scope를 가져 if문, for문 같은 코드블럭내에서 선언한 변수는 모두 지역변수이다.

 

 

[결론]

ES6를 지원하는 환경이라면

var의 사용보다 let과 const의 사용을 더 권장하며

재할당이 필요없는 경우 const를 사용해 불필요한 변수의 재사용을 방지하고,

재할당이 필요한 경우 let을 사용하는 것이 좋다!