변수 키워드(var , let, const) 차이에 관하여

1. var

var는 자바스크립트에서 가장 처음에 나온 변수 키워드이다. 스코프를 다루면서 봤듯이 var는 다른 변수키워드와 다른 점이 많은데 그렇기 때문에 치명적인 단점으로 작용할 가능성이 있다.

 

1.1. 변수 중복 선언 가능

var 키워드로 변수를 중복 선언하게 되면 초기화 문(변수선언+할당문)일경우 재할당 되고 선언만 했을 경우 무시된다. 아무런 에러가 발생하지 않는다. 이러한 특징은 의도치 않게 변수 값을 변경할 위험이 있다.

var num=10;
console.log(num); //10
var num=50; //초기화문이기 때문에 var 키워드를 무시하고 재할당하는 것으로 작동된다.
console.log(num); //50

var num=10;
console.log(num); //10
var num; //단순 선언문이기 때문에 무시된다. 
console.log(num); //10

 

var 키워드는 함수 레벨 스코프를 따른다. 함수 외에 코드블록으로 작성된 문(for, while, if문 등)은 전역스코프를 따른다. 의도치 않게 전역변수가 중복선언될 수 있다.

 

1.2. 함수 레벨 스코프

var 키워드는 함수 레벨 스코프를 따른다. 함수 외에 코드블록으로 작성된 문(for, while, if문 등)은 전역스코프를 따른다. 의도치 않게 전역변수가 중복선언될 수 있다.

var num=50;
if (true){
var num=100;
}
console.log(num); //100

 

1.3. 변수 호이스팅

var 로 선언한 변수는 호이스팅에 의해서 런타임 이전에 선언되고 초기화된다.(이후에 초기화됨) 따라서 변수 선언문 이전에 변수를 참조하더라도 에러가 발생하지 않고 undefined를 반환한다.

 

2. let

2.1. 변수 중복 선언 불가

let 키워드를 이용해 변수를 중복선언하려고 하면 에러가 발생한다. 단 재할당은 가능하다.(중복선언!=재할당)

let num=50;
console.log(num); //50
let num=100; //Error
num=100; //재할당
console.log(num); //100

 

2.2. 블록 레벨 스코프

 

let 키워드는 블록 레벨 스코프를 따른다. 코드블록으로 작성된 모든 문(for, while, if문 등)은 지역스코프를 따른다. 중첩된 코드블록 또한 새로운 지역 스코프를 따른다.

if (true){
let num=100;
}
console.log(num); //Error

 

2.3. 변수 호이스팅

변수 호이스팅이 일어나긴 하지만 var과는 다른방식으로 일어나서 혼동을 막는다.

var 식별자를 쓰면 런타임 전에 변수 선언과 초기화(undefined)가 동시에 일어난다. 그리고 나서 한줄씩 코드를 읽으면서 변수 할당문을 만나면 그제서야 변수가 할당된다.

 

<var의 변수 호이스팅 방식>

변수 선언 => 초기화 => 런타임 => 변수 할당

 

하지만 let과 const 의 경우 런타임 전에는 변수 선언만 일어난다. 그리고 런타임에 한줄씩 코드를 읽으면서 변수선언문을 만나면 변수가 초기화되고 변수 할당문을 만나면 변수가 할당된다. 따라서 변수 선언문을 만나기 전에 변수를 참조하려고 하면 변수가 초기화되지 않아서 에러가 발생하는데 이 때를 일시적 사각지대라고 한다.

 

<let , const 의 변수 호이스팅 방식>

변수선언 -> (일시적 사각지대) -> 런타임 -> 변수 선언 -> 변수 할당

 

이러한 특징으로 인해서 let과 const 에는 마치 변수 호이스팅이 일어나지 않는것처럼 보인다. 그리고 변수 선언문 전에 변수를 참조하려고 하는 의도치 않은 실수도 에러를 통해 잡아주기 때문에 도움이 된다.

 

3. const

3.1. 선언과 초기화

const 키워드로 선언할 때는 반드시 초기화문으로 작성해야 한다. 반드시 선언과 동시에 초기화를 해야한다는 뜻이다.

const num=50;
const num; //Error

 

3.2. 재할당 금지

​const는 변수 중복 선언 금지 뿐만 아니라 재할당도 금지된다. const 키워드 변수에 원시값을 할당할 경우, 원시타입은 원래 불변성을 가지고 있고 재할당 또한 불가하므로 원시값을 변경할 방법은 아예 없다. 상수처럼 사용이 가능하다. const도 constant에서 따온 말인 듯 하다.

이런 특성은 예기치 않은 값의 재할당으로부터 자유롭다.

다만 변수에 객체를 할당한 경우 재할당은 금지지만 원래 객체타입 자체가 변경가능한 값이기 때문에 값 자체 변경이 가능하다.

키워드	스코프	원시 값 자체 변경	객체 값 자체 변경	재할당으로 변경 가능 여부	중복 선언
var	함수 레벨	불변값	변경 가능한 값	재할당 가능	중복 선언 가능
let	블록 레벨			재할당 가능	중복 선언 불가
const	블록 레벨			재할당 불가=> 상수로 사용 가능	중복 선언 불가

 

표로 정리하면 다음과 같다. 

결론적으로는 기본적으로 const를 쓰되 재할당이 필요한 경우에만 let 을 쓰는 것이 좋다. let을 쓸때도 지역스코프에서 쓰도록 하고 범위를 아주 좁게 하는 것이 좋다. 이렇게 하면 의도치않은 값의 재할당으로부터 자유로울 것이다.