[JS] var, let, const의 차이를 알아보자

var, let, const는 자바스크립트에서 변수를 선언할 때 사용하는 키워드이다.

 

그렇다면 이 세 키워드의 차이는 무엇일까. 바로 변수의 스코프와 값 변경 가능성이다.(스코프란 변수와 함수 등의 식별자가 유효한 범위를 제한하는 개념이라고 할 수 있다.)

 

var 키워드는 ES5 이전부터 사용되던 변수 선언 방식이다. 함수 스코프를 가지며, 변수의 값 변경이 가능하다. var 키워드는 변수를 재선언 할 수 있다.

 

function varTest() {
	var a = 1;
    if(true){
    	var a = 2;
        console.log(a); //2
    }
    console.log(a); //2
}

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

 

 

 

let은 ES6에서 추가된 블록 스코프 변수 선언 방식으로 let으로 선언한 변수는 변수가 선언된 블록 내에서만 유효하며 값 변경이 가능하다. 다만 let은 변수를 재선언 할 수 없다.

 

 

function letTest() {
    let a = 1;
    if (true) {
        let a = 2; //블록 스코프 변수 선언이라 위에 있는 a와 상관없이 선언 가능
        console.log(a); // 2
    }
    console.log(a); // 1
    let a = 3; //error 재선언 불가
}

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

 

 

 

const 키워드는 let과 비슷한 블록 스코프 변수 선언 방식이다. const로 선언한 변수는 선언과 동시에 값을 할당해야 한다. 할당하지 않으면 에러가 난다. 또 한 번 할당된 값은 변경할 수 없다. 즉 const는 상수(Constant)를 선언할 때 사용한다.

 

 

따라서 자바스크립트에서 변수와 상수의 차이점을 생각해볼 필요가 있는데 변수는 값을 저장하는 공간으로, 여러 번 값을 변경할 수 있다. 변수는 var,let 키워드를 사용하여 선언할 수 있다. var 키워드는 함수 스코프, let 키워드는 블록 스코프를 가진다.

 

그에 반해 상수는 값을 한 번만 저장할 수 있는 공간으로 값이 변경되면 안된다. 상수는 const를 사용하여 선언할 수 있다. 상수는 선언할 때 값을 할당해야 하며, 이후에 값을 변경할 수 있다.

 

 

이렇게 생각하면 const로 선언된 변수는 절대 변경이 안된다고 생각해야겠지만 변경할 수 있는 경우가 있다.

 

const로 선언한 변수가 상수인 것은 할당된 값이 상수임을 의미한다. 변수 자체가 상수가 아니라 변수의 참조값이 상수로 지정된 것이다. 따라서 const로 선언한 변수의 참조값은 한 번 할당되면 변경할 수 없지만 변수 자체는 값이 변경될 수 있다.

 

예를 들면 객체의 속성 값을 변경하는 경우이다.

 

 

const bk = {name: "bk", age: 28};

bk.age = 25;
console.log(bk); // {name: "bk", age: 28}

 

 

 

bk는 const로 선언되었지만 age의 속성은 변경된다. 이는 bk 객체가 참조하는 객체의 속성 값을 변경한 것이므로 변수 자체는 변경되지 않은 채로 유지가 된다. 따라서 객체 또는 배열인 경우 해당 변수가 가리키는 객체, 배열 내부의 값은 변경이 가능하다. 또 const로 선언한 변수가 함수인 경우 해당 함수는 변수를 변경할 수 있는 코드를 포함할 수 있다. 이 역시 변수의 값이 아닌 변수에 할당된 함수의 내용이 변경되는 것이기 때문이다.