JavaScript - var, let , const 차이

최근 자바스크립트를 공부하면서 세개의 차이가 궁금해졌다.

 

const의경우는 다른 언어들에도 많은 한 번 결정되면 절대 변하지 않는 변수임을 당연히 알고 있다.

 

var과 let의 차이는 뭘까?

 

1. 범위

 

function varScope() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10 - 함수 스코프를 가지므로 접근 가능
}

function letScope() {
    if (true) {
        let y = 10;
    }
    console.log(y); // ReferenceError - 블록 스코프를 가지므로 접근 불가
}

varScope();
letScope();

 

var는 함수 범위를 가지기 때문에 블록을 벗어나도 접근이 가능하다. 그러나 let은 불가능하다. let이 더 지역적이다.

 

2. 호이스팅

 

var는 호이스팅 되어 초기화 전에도 접근이 가능하다. 그러나 let은 레퍼런스 오류가 발생한다.

console.log(a); // undefined - 호이스팅으로 인해 선언은 되었지만 초기화되지 않음
var a = 5;

console.log(b); // ReferenceError - 호이스팅되었지만 TDZ에 있음
let b = 5;

 

3. 전역 변수

var globalVar = 'var';
let globalLet = 'let';

console.log(window.globalVar); // 'var'
console.log(window.globalLet); // undefined

 

var는 전역 변수 초기화가 가능하지만 let은 불가능하다.

 

위와 같은 이유로 var가 더 간편해보이지만 코드의 예측을 어렵게 하고 자칫 잘못하면 큰 오류가 발생하기 쉽다. 그래서 ES6이후는 let을 권장하고 있다.