[JS] var, let, const 왜 쓸까? 변수 선언방법 차이점

오늘은 JS에서 가장 의문이 드는 let, const를 설명해드리겠습니다.
보통은 'var쓰면 되는데 왜? let이나 const를 쓰라고 하는걸까?'라며 궁금하며 이해도 되지 않습니다.

저도 물론 이 셋의 차이점을 알아봐도 '차이는 알겠는데 왜 쓰는거지?' 라는 의문점은 사라지지 않았습니다.
그래서 오늘은 차이점에 중점을 두는 것이 아닌 왜 쓰는 걸까?에 중점을 두고 글을 작성하겠습니다.

메모리 할당

'변수 선언방식을 설명하는데 메모리할당?' 요런 생각 하실지도 모르겠지만
3가지 방식에서는 메모리 할당에서도 차이점을 말해주고 있습니다.

console.log(a);

var a = 10; // undefined 

위같은 경우에는 a를 선언하기 전에 console.log로 호출한 경우이지만 호이스팅이라는 개념으로
var에는 실제 값이 없지만 선언이 맨 위로 올라가 a라는 변수가 존재는 하지만 undefined가 출력되게 됩니다.
이런 상황이 일어날 수 있는 것은 호이스팅이라는 개념과 var는 선언과 동시에 값이 있는가 없는가 상관없이 메모리가 할당되어
console.log에서 출력이 될 수 있었던 것입니다.

그렇다면 let과 const는 어떤 일이 일어날까요?

console.log(a);

let a = 10; // Cannot access 'a' before initialization
// or
const a = 10; // Cannot access 'a' before initialization

let, const 모두 초기화 하지 않은 a는 호출할 수 없다며, 사용이 불가합니다.
let은 값 없이 선언만은 가능하지만 값이 없다면 메모리를 할당해주지 않습니다.
const는 변수를 선언하더라도 값이 없다면 변수를 선언할수도 없으며 물론 메모리또한 할당되지 않는것이죠

var는 왜 쓰면 안될까?

var a = 10;
console.log(a); // 10

var a = 20;
console.log(a); // 20

뭔가 이상하지 않나요? 다른 언어에서라면 변수를 재할당은 가능하지만 재선언은 불가능할 것입니다.
JS에서 var의 경우 재선언, 재할당 모두 가능합니다. 그럼 JS에서는 재선언이 가능한건가? 할 수 있지만
재선언은 불가능하지만 재할당은 가능한 let과 둘다 안되는 const 이런식으로 또 차이점이 있죠

'그럼 둘다 되는 var쓰면 안돼요?'라고 말할 수 있겠지만 팀 규모로 작업을 하게 된다거나,
혼자서 하더라도 변수 이름이 겹치는 경우가 발생한다면 이 a라는 변수에 담긴 값은 알지 못하게 되는것이죠
코드를 짜면서 모든 변수 이름을 외울수는 없으니까요 항상 나오는 이야기지만 짧은 코드라면 상관없지만 몇백줄이라면 어렵겠죠?

그리고 변수를 선언하게 되면 최대한 스코프를 작게 가져가는것이 좋습니다. 스코프란 중괄호 안의 공간을 의미하는데
간단하게 생각하면 변수가 살아 숨쉬는 공간이라고 생각하시면 편할것입니다. 이 스코프가 중요한 이유라면
같은 이름의 변수라도 스코프가 다르다면 충돌하지 않는다는 것이죠 하지만 var로 선언한 변수라면 이 의미가 달라지겠죠?

그렇다면 어떻게 하는것이 좋을까?

변수를 선언하게 된다면 되도록 var 사용을 지양하시면서 let이나 const 사용을 권장드립니다.
그리고 변수를 선언하기전 사용방법에 대해 생각하시면서 재할당이 필요하다면 let을 사용하시면서
재할당이 필요없으시다면(ex : 모듈 불러오기) const로 선언하는 것을 습관화하시면 변수 이름 충돌을 미연에 방지할 수 있습니다.

간단하게 정리를 하자면 변수 선언은 const를 사용하자, 재할당이 필요하다면 let을 사용하자, var 사용을 지양하자,
변수를 선언할 때는 최대한 스코프를 작게 생성하자, 팀프로젝트라면 충분한 소통으로 충돌을 사전에 방지하자

그럼 오늘도 포스팅을 읽어주셔서 감사하며 잘못된 개념이 있거나 궁금한점이 있으시다면 댓글로 달아주시고 감사합니다.