[JavaScript] let과 var 그리고 const의 차이점

 

 

결론 먼저.

1. 변수 선언에는 기본적으로 const를 사용합시다.

2. 재할당이 필요한 경우에 한정해 let을 사용하는 것이 안전한 방법입니다.

3. var는 할 수 있다면 사용 하지 맙시다!

 

간단하게 이유를 이야기 해보자면.

const를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전합니다.

단, 재할당이 의도적으로 필요한 경우에는 let을 사용해줍시다. 예를 들어 for 문 안에서 혹은 값이 증거되어야 하는 경우입니다. 이런 경우 당연히 let을 사용해야 합니다.

(재할당이 필요한 대표 예시들)

 

 

자세하게 알아봅시다.

var, const, let의 차이를 제대로 알기 위해서는 호이스팅(Hoisting)을 알아야 합니다.

 

호이스팅(Hoisting)이란,

자바스크립트의 함수가 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아 유효범위 최상단에 선언되는 것을 말합니다. var 선언문이나 function 선언문 등이 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말하는 거죠.

즉, 필요 변수들을 유효범위의 최상단으로 "끌어 올린다." 라고 보며 됩니다.

 

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅합니다.

 

동작 방식이 같은 듯 보이지만, var 로 선언된 변수와는 달리 let 으로 선언된 변수들은 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생합니다. 즉 순서가 중요하다는 이야기죠. 값이 들어가기 전에 선언이 되어 있어야 한다는 이야기 입니다. 당연한 이야기 같지만, 자바스크립트에서는 그러지 않아요. 위에서 말한 호이스팅 때문입니다. 순서가 엉망진창이 되어도 var는 동작해요. 

var가 function-scoped로 hoisting이 되었다면,

let과 const는 block-scoped단위로 hoisting이 일어납니다.

이로 인해 let 으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지게 됩니다.

 

let은 값을 할당하기전에 변수가 선언 되어있어야 한다!

그렇지 않으면 에러가 발생하는 겁니다.

 

이건 const도 마찬가지인데 좀 더 엄격합니다.

const는 선언과 동시에 할당이 이루어져야 해요.

 

참고로, 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데, var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어집니다.(덕분에 선언 안해도 그냥 쓸 수 있음.)

하지만, let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다.

 

let과 const에는 분명한 차이점이 아래와 같이 한가지 더 존재합니다.

- const는 재할당이 불가능!

- let은 재할당이 가능!
요론 차이점이죠.

 

 

참고

1 : velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

var, let, const 차이점

2 : gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

javascript var, let, const 차이점