javascript - var, let, const

Var, Let, Const의 차이점은?

Var, Let, Const의 차이점은?

 

 var, let, const의 차이에 대해 잘 설명된 글이 있어서 가져와봤다.

 

 javascript에서 변수를 선언하는 방법은 세가지가 있다. var, let, const인데, 원래 javascript에는 var밖에 없었다고 한다. ES2015(ES6)에서 let과 const가 도입되었다. var, let, const에는 각각 어떤 특징이 있고 어떤 차이점이 있는지 알아보자.

 

 먼저 변수의 재선언과 재할당의 관점에서 세 방법의 차이점을 이야기할 수 있다.

 

 우리가 변수를 선언할 때는 "var 이름 = 값" 의 방식으로 선언한다.

 "var 이름" 을 선언, "이름 = 값" 을 할당이라고 한다.

 

 변수의 재선언은 이미 선언된 변수를 다시 한번 선언하는 것이다.

// 변수 재선언
var variable = 0;
var variable = 1; // OK

let variable2 = 0;
let variable2 = 1; // error

const variable3 = 0;
const variable3 = 1; // error

 var는 변수를 재선언할 수 있다. 반면에 let과 const는 변수를 재선언할 수 없다.

 

 변수의 재할당은 이미 할당된 변수를 다시 한번 할당하는 것이다.

// 변수 재할당
var v1 = 0;
v1 = 1; // OK

let v2 = 0;
v2 = 1; // OK

const v3 = 0;
v3 = 1; // error

 var와 let은 변수를 재선언할 수 있다. 반면에 const는 변수를 재선언할 수 없다.

 애초에 const라는 이름은 상수 constant라는 뜻이다. 

 

 

 

 var, let, const의 차이점을 이야기하는 다른 관점은 변수의 사용 범위이다.

 var로 선언된 변수의 사용 범위는 전역 또는 함수 내부이다. 무슨 말이냐면, 함수 내부에서 var로 선언된 변수는 함수 내부에서만 쓸 수 있다. 그렇지 않고 함수 밖에 var로 선언된 변수는 전역에서 사용할 수 있다.

 var를 전역에서 사용할 수 있고, 재선언 및 재할당이 가능하다는 점 때문에 온갖 버그의 원흉이 되었다고 한다.

  // var 변수의 문제
  var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

 위의 코드와 같이, 내가 if문 안에서 사용하려고 어떤 변수를 var로 선언했는데, 이미 전역에서 같은 이름을 사용하는 var 변수가 선언되어 있었다면, 나는 의도치 않게 전역 변수를 건드리게 된다.

 

 let과 const로 선언된 변수는 사용 범위가 블록 내부이다. 위의 코드에서라면 if문 안에서만 변수의 사용범위가 제한되는 것이다. 따라서 var변수 때문에 생기는 여러 문제를 방지하기 위해, 변수를 let으로 선언하여 변수의 사용범위를 명확하게 제한할 수 있다.

 

 var, let, const의 또 다른 차이점은 바로 초기화값이다. var 변수는 선언시에 값을 할당하지 않으면 undefined로 초기화되지만, let과 const는 선언시에 값을 할당하지 않으면 에러가 발생한다.

 

 

 

요약하자면 var, let, const의 차이점은 아래의 표와 같이 나타낼 수 있다.

	var	let	const
재선언	가능	불가능	불가능
재할당	가능	가능	불가능
초기화	undefined	필수	필수
범위	전역 또는 함수	블록	블록