[JavaScript] var, let, const

자바스크립트에서 변수를 선언하는 방법은 var, let, const 세 가지가 있습니다. ES5까지 var가 유일한 변수 선언문이였지만, ES6 이후 var 사용을 지양하고 let, const를 사용합니다.

그 이유는 아래와 같습니다.

1. var는 변수의 중복선언이 가능합니다.
2. 변수 호이스팅(hoisting)이 발생하여, 변수 선언이전에도 사용이 가능합니다.
3. var는 함수레벨 스코프라, 함수 내부의 변수 외에는 모두 전역 변수가 되버립니다.

해당 항목들이 어떤 문제가 생기는지 하나씩 알아보겠습니다.

변수 중복 선언

var는 같은 이름으로 중복선언이 가능합니다. 중복선언을 하게 된다면, 의도치 않게 값이 변경될 수 있고, 이는 오류로 이어질 수 있습니다.

var name = jin;
var name = kim;

var age = 20;
var age; // 초기화문이 없다면 변수 선언문은 무시됩니다.

console.log(name); // kim
console.log(age); // 20

let name = jin;
let name = kim; // Uncaught SyntaxError: Identifier 'name' has already been declared

호이스팅

var로 선언된 변수는 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작합니다.

console.log(hi); // undefined

var hi;
hi = 100;
console.log(hi); // 100

첫 번째 줄에 변수 hi를 호출했습니다. 참조할 변수가 없어 참조 에러가 발생해야하지만, undefined이 출력됩니다. 그 이유는 자바스크립트 엔진의 동작 과정 때문입니다.

• 자바스크립트 엔진 동작 과정
  자바스크립트 엔진이 코드를 실행하기 전에, 먼저 실행되어 소스코드의 평가 과정을 거칩니다.
  평가 과정에서 자바스크립트 엔진은 var, let, const, function, class 등을 소스 코드에서 찾아내 먼저 실행합니다.
  평가 과정이 끝난 이후, 위에서부터 차례대로 한줄씩 코드를 실행합니다.

변수 선언이 어디에 존재하든 어디서든 변수를 참조할 수 있기 때문에, 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징을 호이스팅(hoisting)이라고 합니다.

var가 아닌 let으로 실행하면 어떻게 될까요?

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

let hi; // 변수 선언문에서 초기화 단계가 실행됩니다.
console.log(hi); // undefined
hi = 100; // 변수 할당
console.log(hi); // 100

첫번째 코드에서 참조에러가 발생했습니다. 자바스크립트 엔진 동작과정에서 let으로 선언된 hi라는 변수는 호이스팅되었지만, 초기화는 아직되지 않았습니다. let 키워드는 변수 선언단계와 초기화단계가 분리되고, 변수 초기화 전에 변수에 접근할 수 없기 때문에 위와 같은 에러가 발생했습니다. (var는 변수선언시 초기화 단계가 바로 진행됩니다.)

즉, let으로 선언한 스코프는 호이스팅이 발생하지 않는 것처럼 보입니다.

스코프

var로 선언된 변수는 오로지 함수 블록만 지역 스코프로 인정합니다. if문, for문 등의 경우에는 어디서나 참조 가능한 전역 변수가 됩니다.

var a = 10;

if (true) {
  // 함수 블록이 아니기 때문에, 아래 a는 전역변수이고, 앞서 선언된 a가 있기 때문에, 중복선언이 됩니다. 
  var a = 100;
}

console.log(a); // 100

let으로 선언된 변수는 블록 레벨 스코프를 따릅니다.

let a = 10; // 전역변수

if (true) {
  let a = 100; // 지역변수
  let b = 200; // 지역변수
}

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

요약

변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고, 의도치 않게 상태가 변경될 수 있는 위험이 있기 때문에, 변수의 스코프는 좁을수록 좋습니다. 그렇기 때문에, var 대신 let, const(변하지 않는 값에 const를 사용하지만 우선 기본적으로 const를 사용하고, 재할당이 필요한 경우 let을 사용)를 사용하는 것이 좋습니다.