var, let, const의 차이 (자바스크립트 ES6)

자바스크립트 ES5까지 변수를 선언할 수 있는 유일한 방법은 var을 사용하는 것이었다. 그러나, 다른 var 키워드는 다른 언어와는 다른 특별한 특징들이 있어, 주의를 기울이지 않으면 몇가지 부작용이 발생할 수 있다. 따라서 이러한 단점을 보완하기 위해서 ES6에서는 새로운 변수 선언 키워드인 let, const를 도입하였고, 이 글에서는 이 세가지 키워드에 따른 작동 방식 및 차이에 대해서 소개하려고 한다.

Var 키워드의 특징

1. 중복 선언 허용

var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. 따라서 의도치 않게 변수값이 재할당될 수 있다.

var x = 1;
var y = 2;

console.log(x); // 2

 

2. 함수 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하여, 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

var x = 1;

if (true) {
  var x = 10;
  // 코드 블럭 내에서 선언하여도 전역 변수로 취급
}

console.log(x); // 10

var i = 10;
for (var i = 0; i<5; i++) {
  console.log(i); // 0 1 2 3 4 
  // for문 내에서 변수를 선언해도 전역 변수로 취급
}

console.log(i); // 5

 

3. var로 선언한 전역 변수

var 키워드로 전역 변수를 선언할 경우에는 전역 객체 window의 프로퍼티가 된다. 따라서 window.x와 같이 접근할 수 있다. 

 

let 키워드의 특징

1. 변수 중복 선언 금지

변수를 중복 선언하면 var과 다르게 에러가 발생한다.

let x = 1;
let y = 2; // SyntaxError : Identifier 'x' has already been declared

 

2. 블록 스코프

let 키워드는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let foo = 1; // 전역 변수

{
  let foo = 2; // 지역 변수
}

console.log(foo); // 1

 

3. 변수 호이스팅 동작 방식

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 따라서 변수 선언 이전에 참조하면 참조 에러가 발생한다.

console.log(foo) // ReferenceError: foo is not defined
let foo;

 

 

var 변수의 변수 호이스팅 동작 방법과 비교해보자.

 

var 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 한번에 진행된다. 선언 단계에서 변수 식별자를 등록하고, 즉시 초기화 단계에서 undefined로 변수를 초기화한다. 따라서, 변수 선언 이전에 값을 참조해도 에러가 발생하지 않고 undefined를 반환한다.

 

 

let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 '일시적 사각 지대'(Temporal Dead Zone)라고 부른다. 이 구간에서는 변수를 참조할 수 없어, 마치 변수 호이스팅이 발생하지 않는 것처럼 보인다.

 

 

다음 1 ~ 7 까지 어떤 일이 일어나는 지 살펴보자.

console.log(foo); // 1

let foo; // 2
console.log(foo); // 3

foo = 1; // 4
console.log(foo); // 5

{
  console.log(foo); // 6
  let foo = 2; // 7
}

1. 런타임 이전에 선언 단계가 실행되지만, 변수는 초기화되지 않아 일시적 사각지대에 해당한다. 따라서 변수를 참조할 수 없고 ReferenceError: foo is not defined 에러가 발생한다.
2. 변수 초기화 단계가 실행되어 undefined로 초기화 된다.
3. undefined가 출력된다.
4. 할당문에서 변수 할당 단계가 실행된다.
5. 1이 출력된다.
6. 변수 호이스팅이 발생하지 않았다면 전역 변수를 참조하여 1을 출력해야한다. 하지만 7번의 선언 때문에, 지역 스코프에서 호이스팅이 발생하기 때문에 일시적 사각지대에 해당하고, ReferenceError: foo is not defined 에러가 발생한다.
7. 변수 선언 & 할당이 일어난다.

4. let 키워드로 선언한 전역 변수

let 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티가 아니다. 따라서 window.x와 같이 접근할 수 없다.

 

const 키워드의 특징

const 키워드는 let 키워드와 대부분 동일하게 동작한다. let 키워드 특징 1,2,3,4와 동일한 특징을 가진다. let 변수와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다. let키워드와 다른 점은 다음과 같다.

 

1. 선언과 동시에 초기화 할 것

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 하고, 그렇지 않으면 에러가 발생한다.

const foo; // SyntaxError: Missing initializer in const declaration

 

2. 재할당 금지

const는 변수 재할당이 금지된다. 원시 값을 할당한 경우 변수 값을 변경할 수 없다. 물론 const 변수에 객체를 할당한 경우에는 값을 변경할 수 있다. 객체의 참조값을 변경되지 않기 때문에, 프로퍼티의 동적 생성, 삭제를 통해서 객체 변경은 가능하다. 즉, 재할당을 금지할 뿐 '불변'을 의미하지는 않는다.

const foo = 1;
foo = 2; // TypeError: Assignment to const variable

const person = {
  name: 'Lee'
};

person.name = 'Kim';

 

만약 불변 객체를 만들고 싶다면, Object.freeze를 사용할 수 있다. 그러나, 이는 중첩된 객체까지 적용되지는 않으므로 외부 라이브러리 등을 사용해야 한다.

정리

	var	let	const
중복 선언	가능	불가능	불가능
재할당	가능	가능	불가능
코드 스코프	함수 스코프	블록 스코프	블록 스코프
전역 변수 선언 시	window 객체의 프로퍼티가 된다.	X	X
변수 호이스팅	'선언 단계'와 '초기화 단계'가 한번에 진행된다. 변수 선언 이전에 값을 참조해도 에러가 발생하지 않고 undefined를 반환한다.	선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 일시적 사각 지대 구간에서는 변수를 참조할 수 없어, 마치 변수 호이스팅이 발생하지 않는 것처럼 보인다.	선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 일시적 사각 지대 구간에서는 변수를 참조할 수 없어, 마치 변수 호이스팅이 발생하지 않는 것처럼 보인다.

 

 

* 모던 자바스크립트 Deep Dive 15장