자바스크립트 var, let, const

var는 ES6이전에 있던 변수이고 let, const는 ES6에서 새로 생긴 변수입니다.

var는 function-scope이고 let, const는 block-scope입니다.

 

var

for(var i=0;i<10;i++){
    console.log('for', i);
}
console.log('first',i);
function ms(){
  for(var j=0; j<10; j++) {
    console.log('ms for', j)
  }
}
ms()
console.log('second', j)

for 0
for 1
for 2
for 4
for 5
for 6
for 7
for 8
for 9
first 10
ms for 0
ms for 1
ms for 2
ms for 3
ms for 4
ms for 5
ms for 6
ms for 7
ms for 8
ms for 9
VM3645:11 Uncaught ReferenceError: j is not defined
    at <anonymous>:11:23

var는 function-scope이기 때문에 함수가 실행된 이후에는 변수에 할당된 값이 사라지게 됩니다.

 

var a=1;
console.log(a);
var a=2;
console.log(a);
a=3;
console.log(a);
1
2
3

위의 예시와 같이 a라는 변수를 재선언할수도 있고 재할당 할수도 있습니다.

이는 편하지만 문제를 일으킬 수 있습니다.

그래서 생긴게 let과 const입니다.

 

let, const

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 상위 블록과 같은 변수!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 상위 블록과 다른 변수
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

function ConstTest() {
  const x = 1;
  if (true) {
    const x = 2;  // 상위 블록과 다른 변수
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

모질라에서 참고한 코드입니다. 이를 보면 let, const는 block-scope임을 알 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

let

 

let a=1;
let a=2;
VM175:2 Uncaught SyntaxError: Identifier 'a' has already been declared
const b=1;
const b=2;
VM256:2 Uncaught SyntaxError: Identifier 'b' has already been declared

let a=1;
a=2;
const b=1;
b=2;
VM422:4 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:4:2

let과 const는 둘다 재선언 불가능 합니다. 그리고 let은 재할당이 가능하고 const는 재할당이 불가능 합니다.

 

let a;
const b;
VM623:2 Uncaught SyntaxError: Missing initializer in const declaration

let는 선언하고 뒤에 할당하는것이 가능하지만 const는 선언하는 동시에 할당을 해야 합니다.

(빈 배열로 선언하는 것은 가능합니다.)