👉🏻 JS : 변수 선언 방식 var, let, const 비교

sebinnnnn·2023년 1월 2일

JavaScript 기초

목록 보기

3/8

[ 자바스크립트의 변수 선언 방식 let, const, var 키워드의 차이점과 호이스팅 개념 ]

자바스크립트 변수 선언 방식에 대해 공부를 하다가 궁금한 점이 생겼다.
‘ 자바스크립트 변수 선언 방식에는 let, const, var 이렇게 3가지가 있는데, 이들의 차이점은 무엇이고 어떤 걸 사용하는 게 좋을까? ‘
강의를 듣다 보면 대부분이 “ var은 예전 선언 방식이니 최대한 let을 사용하세요 “라고 말씀해 주시는데, 단지 예전 방식이라고 사용하지 말라고 하는 게 맞는 걸까 하는 생각이 들었다.
사실, 아직도 완벽하게 이해하지는 못했지만 대략 ‘ 아… 그래서 그랬구나…’ 정도의 수준은 되는 것 같아서 나의 이해 방식이 다른 이들에게도 조금 도움이 되지 않을까 하고 남겨보게 되었다.

💡 var 선언 방식

자바스크립트 초기에는 var 방식으로만 변수를 선언할 수 있었다.
하지만 자바스크립트 안에서 많은 업데이트가 진행되면서 새로운 변수 선언 2개가 더 생겨나게 되었다. 그러다 보니, var은 최근 2개의 변수 선언 방식에 비해 문제가 많은 변수 선언 방식이 되었다.

중복 선언이 가능하다?
: let과 const가 등장하게 된 가장 큰 계기일 것이다.
바로, var은 중복 선언이 가능하다는 점이다. 테스트 용으로서는 크게 문제가 없지만 만약 코드가 하염없이 길어지고 코드를 하나하나 짚어보기가 힘들 때, 중복 선언으로 인한 에러가 생기면 그야말로 멘붕 그 자체일 것이다. 이처럼 코드가 짧고 간결할 때는 큰 문제가 되지 않겠지만 실제 프로젝트에서는 변수를 중복으로 선언하는 것은 아주 큰 문제가 될 수 있다.
( 나도 모르게 똑같은 변수명으로 변수를 선언하는 실수를 저질를 수 있으니… 대부분의 강의들에서 var 사용을 자제하라고 하신 게 아닐까 싶다…)
var의 호이스팅 문제
: 여기서 말하는 호이스팅은 스코프의 선두로 옮긴 것과 같이 동작하는 것을 말한다. 즉, 아직 선언하지 않은 변수를 출력하고 출력 후에 변수를 선언해도 에러가 발생하지 않는다는 것이다.
⇒ var 선언이 스코프의 선두로 올라갔기 때문!
```
console.log(one); // undefined -> 에러 메시지가 뜨지 않는다!

var one;
console.log(one); // undefined

one = 7; // 변수에 값을 할당
console.log(one); // 7
```
이렇게 에러 메시지가 나타나지 않는 var과 다르게, let과 const는 선언되지 않았다는 에러 메시지를 띄운다.
```
console.log(two); // ReferenceError: foo is not defined -> 에러 메시지

let two; // 변수 선언
console.log(two); // undefined

two = 7; // 값 할당
console.log(two); // 7
```