[JS] 변수 선언 : var / let / const의 차이점[ES6]

특징	var	let	const
변수재선언	재선언가능	재선언불가능	재선언불가능
변수재할당	재할당가능	재할당가능	재할당불가능

var >> let >> const
갈수록 엄격해지는 특징

---

1. 변수 재선언 / 재할당이 가능한 var의 문제점

 var test = "first";
 console.log(test) // first
 
 var test = "second";
 console.log(test) // second
 
 test = "third"
 console.log(test) // third
 
 yes = "third";
 var yes;

변수 재선언 / 재할당 가능
이미 test라는 이름이 존재해도 전혀 에러가 나지 않을 뿐더러,
기존 변수에 재할당하는 것도 가능하다.
또한, 해당 코드의 yes는 호이스팅 되어 var를 쓰지 않아도 에러가 나지 않는다.

그리고 var의 또 하나의 문제점은 보통 언어들처럼 {}로 scope를 규정하는게 아니라
function단위의 scope를 가지고 있다. 이게 무슨 의미일까.

 var test = "first";
 
 if(true) {
  var test = "second";
 }
 console.log(test); // second

이런 결과가 나오는 이유는 var를 사용한 변수가 {}로 묶여서 규정되는 게 아니기 때문이다.
그런가보다 하면서 쓸 수 있겠지만 콘솔창에서의 단순한 test가 아니라
프로젝트할 때의 방대한 코드양을 생각하면 문제가 많다.
그래서 ES6에서는 let과 const라는 변수 문법이 탄생하게 되었다.

2. 변수 재선언 불가능한 let / const

 /* let */
 let test = "first";
 console.log(test) // first
 
 let test = "second";
 Uncaught SyntaxError: Identifier 'test' has already been declared
 
 
 /* const */
 const test = "first";
 console.log(test) // first
 
 const test = "second";
 Uncaught SyntaxError: Identifier 'test' has already been declared

let과 const 둘다 변수 재선언이 불가능하다.

 

3. 변수 재할당 가능한 let / 변수 재할당 불가능한 const

 

 /* let */
 let test = 'first';
 console.log(test); // first

 test = 'second';
 console.log(test); //second


 /* const */
 const test = 'first';
 console.log(test); // first

 const = 'second';
 console.log(test); 
 // Uncaught TypeError: Assignment to constant variable.

let은 변수재할당이 가능하지만, const는 불가능하다.

각각 특징에 맞게 쓰는 것이 좋다.
var : 짧은 코드를 쓰거나, 콘솔에서 테스트를 할 때 주로 사용
let : 프로젝트시 재할당이 필요한 경우 사용
const : 프로젝트시 재할당 사용을 금지하는 경우에 사용