JavaScript - var 와 let, const

ES6문법이 사용되기 전에는 "var"을 사용했습니다. ES6문법이 사용되면서 변수 선언할 때 var, let, const를 사용합니다. var를 사용했을 때와 let, const를 사용했을 때 차이가 있습니다.

1. 변수선언, 할당

---

• var는 변수 선언할 때 사용한 이름으로 다시 선언할 수 있습니다. 그리고 이미할당된 변수에 다시 값을 할당할 수 있습니다.

var korean = "Hangeul";
console.log(korean) // Hangeul
var korean = "Hangug-eo";
console.log(korean) // Hangug-eo

• let, const는 변수 선언할 때 사용한 이름으로 다시 선언할 수 없습니다. 이미 같은 이름의 변수가 있어서 에러가 발생합니다.

let korean = "Hangeul";
let korean = "Hangug-eo"; 
// Uncaught SyntaxError: Identifier 'korean' has already been declared
const ganadara = "ga,na,da,ra";
const ganadara = "ma,ba,sa"; 
// Uncaught SyntaxError: Identifier 'ganadara' has already been declared

• let, const에도 차이가 있습니다. let은 값을 다시 할당할 수 있고, const는 변수 선언하면서 값을 할당해야지 그렇지 않으면 에러가 발생합니다.

// let //
let korean = "Hangeul";
console.log(korean); // 'Hangeul'
korean = "Hangug-eo";
console.log(korean); // 'Hangug-eo;
// const // 
const ganadara;
// Error message ---> Uncaught SyntaxError: Missing initializer in const declaration
const ganadara = "ma,ba,sa";
ganadara = "ganadara";
// Error message ---> Uncaught TypeError: Assignment to constant variable.

2. 함수 스코프와 블록 스코프

---

• 함수 내부에서 var, let, const로 선언한 변수는 함수 내부에서만 사용할 수 있습니다.

  var wolf = 3;
  let sheep = 0;

  function fence () {
	var wolf = 0;
    console.log('wolf_of_fence =', wolf); // wolf_of_fence = 0
	let sheep = 17;
	console.log('sheep_of_fence =', sheep); // sheep_of_fence = 17
  }
fence();
console.log('wolf_outside =', wolf); // wolf_outside = 3;
console.log('sheep_outside =', sheep); // sheep_outside = 0;

• 블록 스코프(if문, for문, while문, try/catch문 등) 내에서 선언한 변수는 블록 스코프 내에서 사용할 수 있습니다. var로 블록 스코프 내에서 변수 선언하면 전역 변수로 인식됩니다.

var a = 1;
console.log(a); // 1
if (true) {
	var a = 1234;
	console.log(a); // 1234
}
console.log(a); // 1234

• let과 const는 블록 스코프 내에서 변수 선언하면 블록 스코프내에서만 사용할 수 있고, 블록 스코프 외부에는 영향을 주지 않습니다.

let b = 1;
console.log(b); // 1
if (true) {
	let b = 1234;
	console.log(b); // 1234
}
console.log(b); // 1

---

참고
https://poiemaweb.com/es6-block-scope
https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
https://blueshw.github.io/2017/03/28/ES-var-VS-const-VS-let/