정의

var는 변수를 선언하는 키워드이며, ES6부터 let과 const가 추가되었다. var는 함수 스코프를 가지고 let과 const는 블록 스코프를 가진다. 여기서 스코프란 코드가 실행되는 유효범휘이다.

블록 스코프는 중괄호{}로 감싸진 범위를 말한다. 아래는 조건문(if), 반복문(for), 함수(function)가 블록 스코프를 가지고 있는 모습이다.

if (true) {
    // 블록 스코프
}

for (var i = 0; i < 10; i++) {
    // 블록 스코프
}

function func() {
    // 블록 스코프
}

var

기존의 var는 위 세개중 함수에서만 스코프를 가진다.

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

for (var i = 0; i < 1; i++) {
    var b = 2;
}
console.log(b);
// 2

function func() {
    var c = 3;
}
console.log(c);
// Uncaught ReferenceError: foo is not defined at window.onload

var는 중복 선언이 가능하다.

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

let, const

ES6부터 추가된 let, const는 조건문과 반복문에도 스코프를 가진다.

if (true) {
    let a = 1;
    const b = 2;
    console.log(a); // 1
    console.log(B); // 2
}
console.log(a);
// Uncaught ReferenceError: a is not defined at window.onload
console.log(b);
// Uncaught ReferenceError: a is not defined at window.onload

for (var i = 0; i < 1; i++) {
    let c = 3;
    const d = 4;
    console.log(c); // 3
    console.log(d); // 4
}
console.log(c); // Uncaught ReferenceError: a is not defined at window.onload
console.log(d); // Uncaught ReferenceError: a is not defined at window.onload

function func() {
    let e = 5;
    const f = 6;
    console.log(e); // 5
    console.log(f); // 6
}
func()
console.log(e);
// Uncaught ReferenceError: foo is not defined at window.onload
console.log(f);
// Uncaught ReferenceError: foo is not defined at window.onload

let과 const의 차이는 const 가 좀 더 엄격하다. let은 중복선언이 되지만 const는 중복선언이 안되기 때문에 변수가 선언될 때 값을 할당하여야 한다. const는 DB환경정보, API응답값 등 변하지 않을 값을 담을 때 사용한다.

let a;
a = 1;
console.log(a);
// 1

const b;
b = 2;
// Uncaught TypeError: Assignment to constant variable.

결론

var은 함수 스코프에서만 유효
let, const는 블록 스코프에서 유효
const는 선언과 동시에 할당이 일어나야하고, 재할당이 불가

References

자바스크립트 변수와 스코프(유효범위)