[Javascript] var, let, const 차이점

자바스크립트에서 변수를 선언할 때 var, let, const이 3가지 키워드를 사용해야 한다.

ES5까지 변수를 선언할 수 있는 방법은 var 키워드였고, var 키워드의 문제점을 보완해 ES6부터 나온것이 let, const 키워드이다.

 

let과 const 키워드의 특성은 거의 동일해서 마지막에 const 키워드만의 특징을 간략하게 얘기하고, var와 let 키워드의 차이점을 3가지 관점에서 먼저 알아보겠다.

[ 변수 중복 선언 ]

var는 변수 중복 선언이 가능하다. 그래서 동일한 이름의 변수가 먼저 선언되었는지 모르고 변수를 중복 선언하면서 값까지 할당하면 의도치 않게 먼저 선언된 변수 값이 바뀌는 부작용이 발생한다.

 

하지만 let키워드는 변수 중복 선언이 금지되어있어 같은 이름의 변수를 중복 선언하면 문법 에러가 발생한다.

[ 스코프 ]

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 즉, 함수 레벨 스코프를 따른다. 따라서 함수 외부에서 var 키워드로 선언한 변수들은 모두 전역변수가 된다. 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다.

 

하지만 let 키워드는 모든 코드 블록(함수, if문, for문, while문, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

[ 변수 호이스팅 ]

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 자세히 말하면 var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계"와 "초기화 단계"가 한번에 진행된다. 선언단계를 이후 초기화 단계에서 undefined로 변수를 초기화한다. 그래서 변수 선언문 이전에 변수에 접근해도 에러가 나지않는다.

// 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다. (1. 선언 단계)
// 변수 foo는 undefined로 초기화된다. (2. 초기화단계)
console.log(foo); // undefined

// 변수에 값을 할당 (3. 할당 단계)
foo = 123;
console.log(foo); // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;

하지만 let 키워드는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. "선언 단계"와 "초기화 단계"가 분리되어 진행되기 때문이다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. 그래서 변수 선언문 이전에 변수에 접근하게 되면 에러가 나고, 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간은 일시적 사각지대라고도 한다.

// 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
// 초기화 이전의 일시적 사각지대에는 변수를 참조할 수 없다.
console.log(foo); // ReferenceError : foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

const만의 특징을 알아보자.

1. const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
2. var, let 키워드와 달리 재할당도 금지된다. 이러한 특징으로 상수를 표현할 때 사용된다. (변경이 발생하지 않고 읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다.)
3. const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없다. 하지만 객체를 할당할 경우 값을 변경할 수 있다. const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않기 때문이다.