변수 선언의 세 가지 방법

자바스크립트에서는 변수를 var, let, const라는 세 가지 키워드로 선언할 수 있습니다. 각각의 차이점을 변수의 스코프, 중복선언 가능 여부, 호이스팅 관점에서 알아보겠습니다.

중복 선언

var

var 키워드로 선언한 변수는 중복 선언을 허용합니다. 다음과 같이 중복된 식별자로 여러번 선언을 해도 에러가 나지 않습니다.

var x = 10;
console.log(x);  //10

var x = 0; 
console.log(x);  //0

const, let

var과 다르게 const와 let키워드는 중복 선언이 불가능합니다.

let x = 10;
console.log(x);

let x = 0; //**Syntax Error**
console.log(x);

스코프

var

var 키워드로 선언된 변수는 함수레벨 스코프를 가집니다. 자신이 선언된 함수 내부에서 참조 가능하게 됩니다. 만약 함수 내부가 아닌 곳, 즉 전역 코드에서 선언되었다면 해당 변수는 전역스코프를 가집니다.

const, let

const, let으로 선언한 변수들의 경우, 블록레벨 스코프를 가집니다. 자신이 선언된 블록 내부에서만 유효한 것이지요. 그래서 for문의 iterator 변수는 혼동이 없게끔 let으로 선언하는 것입니다. var로 선언했다면 for문 밖에서도 유효해지기 때문에 혼동을 야기할 수 있습니다.

호이스팅

자바스크립트가 소스코드를 실행하기 전, 전역 코드 평가단계를 거치는데, 이 때 호이스팅이라는 동작을 통해 선언된 변수들을 맨 위로 끌어올리는 작업을 하게 됩니다.

var

var로 선언된 변수는 호이스팅의 대상이 됩니다. 따라서 선언문을 만나기 전에 참조를 한다 해도 에러는 발생하지 않습니다. 자바스크립트가 이미 해당 선언문을 코드 실행 전에 호이스팅해서 변수의 값이 들어갈 자리를 마련해 놓았기 때문입니다. 하지만 초기화나 할당이 미리 이루어지지는 않습니다. 호이스팅된 변수들은 할당문, 초기화문을 만나기 전에 undefined값으로 호이스팅 됩니다.

const, let

var로 선언된 변수와 달리 const, let으로 선언된 변수들은 호이스팅의 대상이 아닙니다. 따라서 선언하기 전에 참조한다면 Reference error가 뜹니다.

const vs let

앞서 진행한 비교에서 항상 const와 let이 함께 묶여있었습니다. 위 세 관점에서는 모두 동일한 결과가 나오기 때문입니다. 하지만 이 두 키워드간에도 차이가 있습니다. 바로 선언과 할당에 있어서의 차이입니다.

const

const 키워드는 사실 constant의 약어로 만들어졌습니다. 상수라는 뜻을 가지고 있는데, 프로그래밍 언어 관점에서 엄밀히 보면 변수가 맞긴 합니다. 하지만 const로 선언된 변수는 재할당을 할 수 없습니다. 상수처럼 값이 바뀌지 않는 변수라는 것입니다. 다음과 같은 코드는 에러를 발생시킵니다.

const a = 10; 
a = 11;  //TypeError: Assignment to a constant variable

또한 const키워드로 변수를 선언시에 항상 초기화가 동반되어야 합니다. 다음 코드도 에러를 발생시킵니다.

const a; //Uncaught SyntaxError: Missing initializer in const declaration

let

let 키워드는 const와 다르게 재할당이 가능하고, 초기화 없이 선언문만 작성해도 값이 undefined로 자동 초기화 되어 에러를 발생시키지 않습니다.