자바스크립트를 배우면서 가장 먼저 배웠던 var, let, const 키워드와 scope 개념에서 각 키워드의 차이에 대해 정리한다.

var, let, const

var와 let

변수를 선언할 때는 var 또는 let 키워드를 사용한다. 두 변수 선언 키워드의 기본적인 차이점은 재선언 여부에 있다. 재선언이란 이미 선언되어 있는 변수명을 사용해 다시 변수를 선언하는 것을 말한다.

var는 재선언이 가능하지만, let은 재선언이 불가능하다.

var name = "cabbage";
var name = "cabbage";

• var로 name 변수를 재선언하였다.
• name 변수를 재선언했음에도 에러가 발생하지 않는다.

let name = "cabbage";
let name = "cabbage"; // SyntaxError: Identifier 'name' has already been declared. (2:4)

• let으로 name 변수를 재선언하였다.
• name 변수를 재선언하면 에러가 발생한다.

두 키워드 모두 변수 선언을 위해 사용하므로 재할당은 가능하다.

var name = "캐비지";
name = "cabbage";

let bootcamp = "코드캠프";
bootcamp = "codecamp";

var와 let의 재선언, 재할당 여부를 정리하면 아래와 같다.

var

• 재선언 가능
• 재할당 가능

let

• 재선언 불가능
• 재할당 가능

const

const 키워드는 상수를 선언하기 위해 사용한다.

const 키워드로 상수를 선언할 때 값을 초기화하지 않으면 에러가 발생하므로 상수 선언 시 항상 값을 초기화해야 한다.

const name; // SyntaxError: Missing initializer in const declaration. (1:10)

const name = "cabbage";

const는 상수를 선언하기 위해 사용하므로 재할당이 불가능하다.

const

• 재선언 불가능
• 재할당 불가능

scope 개념에서의 var, let, const

스코프는 변수 참조의 유효범위를 말한다. 스코프에는 두가지 종류가 있다.

1. 전역 스코프
2. 지역 스코프

그리고 지역 스코프에는 두가지 종류가 있다.

1. 함수 레벨 스코프
2. 블록 레벨 스코프

여기서 var와 let, const 키워드의 차이점이 나타난다.

var 키워드는 함수 레벨 스코프만 따른다.
let, const 키워드는 함수 레벨 스코프와 블록 레벨 스코프를 모두 따른다.

함수를 정의하면, 함수는 지역 스코프인 함수 레벨 스코프를 생성한다. 함수 레벨 스코프는 함수를 정의할 때 사용한 중괄호 내부라고 생각할 수 있다.

const foo = function () {
  var x = 1;
}

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

• foo 함수는 함수 레벨 스코프를 생성한다.
• var 키워드는 함수 레벨 스코프를 따른다.
• 따라서 var 키워드로 선언한 변수 x는 foo 함수의 함수 레벨 스코프에 속한다.
• 변수 x를 함수 레벨 스코프 외부에서 참조하려고 하면 에러가 발생한다.

if문, else문, for문 등을 사용할 때 중괄호 내부에도 스코프가 생성되는데, 이것을 블록 레벨 스코프라고 한다. var 키워드가 특이한 점은 블록 레벨 스코프를 따르지 않는다는 점이다. 따라서 블록 레벨 스코프 내부에 선언한 var 변수를 블록 레벨 스코프 외부에서 참조할 수 있다.

if (true) {
  var x = 10;
}

console.log(x);  // 10

if (false) {
  var y = 100;
}

console.log(y);  // undefined

• if문의 블록 레벨 스코프가 아닌 스코프에서 변수 x를 참조하면 10을 출력한다.
• if문을 통과하지 않더라도 변수 y를 참조하면 undefined를 출력한다.

위 코드를 통해 var 키워드는 블록 레벨 스코프를 따르지 않는다는 것을 알 수 있다.

let, const 키워드는 함수 레벨 스코프와 블록 레벨 스코프를 모두 따른다.

const foo = function () {
  let a = 1;
  const b = 2;
}

console.log(a);  // ReferenceError: a is not defined
console.log(b);  // ReferenceError: b is not defined

• foo 함수 레벨 스코프에서 선언된 변수 a와 상수 b를 foo 함수 레벨 스코프가 아닌 스코프에서 참조하면 에러가 발생한다.

if (true) {
  let a = 1;
  const b = 2;
}

console.log(a);  // ReferenceError: a is not defined
console.log(b);  // ReferenceError: b is not defined

• if문의 블록 레벨 스코프에서 선언된 변수 a와 상수 b를 if문의 블록 레벨 스코프가 아닌 스코프에서 참조하면 에러가 발생한다.

var, let, const 키워드 정리

var

• 재할당 가능
• 재선언 가능
• 함수 레벨 스코프를 따름
• 블록 레벨 스코프를 따르지 않음

let

• 재할당 가능
• 재선언 불가능
• 함수 레벨 스코프와 블록 레벨 스코프를 따름

const

• 재할당 불가능
• 재선언 불가능
• 함수 레벨 스코프와 블록 레벨 스코프를 따름

var 키워드는 재선언이 가능하고 블록 레벨 스코프를 따르지 않는다. 따라서 코드의 예상치 못한 동작의 원인이 되기 때문에 사용을 지양하는 것이 좋다.