[JavaScript] 변수 선언자 var, let, const의 차이점과 사용법

프로그래밍 언어에서 데이터를 담을 때는 변수를 선언해야 합니다. 변수는 데이터를 담는 그릇이라고 생각하시면 되고 자바스크립트에도 당연히 변수라는 개념이 존재합니다. 자바스크립트에서 변수를 선언할 때는 var, let, const라는 세 가지 키워드를 활용하여 변수를 선언하는데요. 이 세 가지 키워드들은 그 특성에 차이점이 존재합니다. 이번 포스팅에서는 var, let, const의 차이점과 사용법에 대해 알아보겠습니다.

 

---

 

 키워드 var의 특징  

var는 ES6의 등장 이전에 변수를 선언하는 데 사용되었던 초기 JavaScript에서의 변수 선언자입니다. 

 

var는 재선언이 가능하다.

var x = 10;
var x = 20; // 재선언 가능
console.log(x); // 20

일반적인 프로그래밍 언어에서는 기존에 선언된 변수는 재선언이 불가능합니다. 하지만 자바스크립트의 var는 변수의 재선언이 가능합니다. 이 때문에 의도치 않은 변수 재선언이나 값의 덮어쓰기가 일어날 수 있어 오동작의 소지가 있습니다. 특히 오픈소스 라이브러리에서도 var를 많이 사용하는데 이 라이브러리를 사용만하고 내부는 잘 들여다보지는 않죠? 그래서 이 오픈소스 라이브러리 안에서 사용하는 변수를 외부에서 재선언 하는 실수를 많이 하고는 합니다. 이 경우 치명적인 문제가 발생할 수 있겠습니다.

 

var의 사용범위 

function example() {
    var x = 10; 
    if (true) {
        var y = 20;
        console.log(x); // 10
    }
    console.log(y); // 20
}
console.log(y); // Uncaught ReferenceError: y is not defined

일반적인 프로그래밍 언어에서 변수는 그 변수가 선언된 { } 스코프 내에서만 사용이 가능합니다. 하지만 var의 범위는 전역 범위 또는 함수 범위로 지정됩니다. var 변수가 함수 외부에서 선언되면 범위는 전역이고 함수 내에서 사용되면 함수 범위로 한정됩니다. 위의 예시를 보시면 example() 함수의 if문 { } 블록에서 선언된 var y는 사용범위가 함수내부이기 때문에 example() 함수에서는 사용이 가능하지만 외부에서는 접근이 불가능합니다. 

 

for (var i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
console.log(i); // 3

이렇게 { } 스코프 외부에서도 그 변수를 참고할 수 있다는 점은 문제가 될 수 있는데요. 예시로 위의 for문을 보시면 i는 for문에서만 사용할 수 있는 변수가 아니라 범위가 전역으로 되어 i 변수는 이 페이지 어디서든지 사용할 수 있게 됩니다. 실제로 외부에서 i 변수를 사용하였는데도 값이 잘 찍히죠. 이 경우에도 변수의 값이 누출되기 때문에 프로그래밍적으로 문제가 발생할 수 있습니다.

 

var의 호이스팅

호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.

console.log (message);
var message = "hello world!"

타 프로그래밍 언어에서는 위의 코드처럼 변수를 선언하기 전에 그 변수를 참조하면 에러가 발생하겠지만 자바스크립트에서는 에러가 발생하지 않습니다.

 

var message;
console.log(message); // message is undefined
message = "hello world!"

에러가 발생하지 않는 이유는 호이스팅이 발생하여 위의 코드처럼 동작을 인식하였기 때문입니다.

 

※ 이처럼 var에는 다양한 문제점들이 있어서 코드의 동작을 이해하기 어렵거나 예기치 않은 문제점이 발생하고는 하였습니다. 그래서 ES6(ECMAScript 2015)에서는 let과 const라는 변수 키워드가 추가되었습니다. let과 const는 다른 프로그래밍 언어에서처럼 { } 스코프 내에서만 사용이 가능하고 let은 재선언이 불가능한 변수이며 const는 한 번 할당한 후 재할당이 불가능한 상수를 선언합니다. 최근에는 var는 점점 사용하지 않는 추세이고 이 let이나 const를 사용해서 코딩을 많이 합니다.

 

---

 

 키워드 let의 특징  

let은 ES6에서 도입된 새로운 변수 선언 키워드입니다. let으로 선언된 변수는 재선이 불가능하고 재할당만 가능합니다.

 

재선언 불가능

let x = 30;
let x = 40; // Error: Identifier 'x' has already been declared
console.log(x); // 30

let은 기본적으로 var와 사용법은 유사하지만 var와는 다르게 변수를 재선언할 수 없다는 특징이 있습니다. 즉 한 번 선언한 변수를 또다시 같은 스코프에서 선언할 수 없습니다.

 

재할당은 가능

let x = 30;
x = 40;
console.log(x); // 40

다만 같은 변수에 값을 변환하는 재할당은 가능합니다.

 

let의 사용 범위

 if (true) {
    let x = 10; // 블록 스코프를 가짐
}
console.log(x); // Error: x is not defined (블록 외부에서 접근 불가)

let은 var와는 다르게 선언된 변수의 블록 안에서만 사용할 수 있기 때문에 블록 외부에서 접근하면 에러가 발생합니다.

 

let의 호이스팅

console.log(x); // Error: Cannot access 'x' before initialization
let x = 5;
console.log(x); // 5

let도 var와 마찬가지로 호이스팅이 발생하기는 합니다. 이유는 JavaScript 엔진이 코드를 실행하기 전에 변수 선언을 해당 스코프의 최상단으로 끌어올리기 때문입니다. 자바스크립트 설계상 어쩔 수 없는 부분입니다. 하지만 let의 경우에는 호이스팅이 발생하더라도 선언 시점에서 초기화가 이루어지지 않고 변수 선언 라인이 되어야 초기화가 진행됩니다. 위의 예시에서 let x = 5;의 선언은 호이스팅 되지만, 초기화는 진행되지 않습니다. 그래서 첫 번째 console.log(x)에서 변수 x에 접근하면 초기화되지 않아 ReferenceError가 발생합니다.

 

---

 

 키워드 const의 특징  

const는 ES6에서 도입된 새로운 변수 키워드이며 상수를 선언하는 데 사용됩니다. 선언과 동시에 값을 할당해야 하며, 이후에는 값을 변경할 수 없습니다.

 

재선언 및 재할당 불가능

const x = 30;
x = 40; // Uncaught TypeError: Assignment to constant variable.
console.log(x);

const는 값이 한번 정의되면 변경될 수 없는 불변성의 특성을 가지고 있습니다. 예측 가능한 동작을 하기 때문에 많이 사용됩니다. 

 

const의 사용 범위

 if (true) {
    const x = 10; // 블록 스코프를 가짐
}
console.log(x); // Error: x is not defined (블록 외부에서 접근 불가)

const도 let과 마찬가지로 선언된 변수의 블록 안에서만 사용할 수 있기 때문에 블록 외부에서 접근하면 에러가 발생합니다.

 

const의 호이스팅

console.log(x); // Error: Cannot access 'x' before initialization
const x = 5;
console.log(x); // 5

const도 let처럼 호이스팅이 발생하기는 하지만 초기화가 이루어지지는 않습니다. 그래서 let과 마찬가지로 선언된 변수가 선언 전에 접근되면 ReferenceError가 발생합니다.