강의를 듣다 보면 "var는 쓰지 마세요. let이랑 const만 쓰세요." 라고 말하는 모습을 자주 볼 수 있다. 하지만 강의 자료나 다른 코드들을 보면 var를 쓰는 경우도 꽤 있다.
그런데 왜 var를 쓰지 말라고 하는 걸까?
1. 호이스팅 문제
우선 호이스팅 문제 때문이다. 호이스팅은 간단히 말하자면 코드를 실행하기 전에 변수 선언부를 맨 위로 끌어올리는 현상이다.
console.log(result);
var result = 10;여기서 출력 결과는 undefined가 된다. 여기서 한 가지 궁금증이 생길 수도 있다.
"undefined인데 뭐가 문제야? 실제 값이 할당된 건 아니잖아."
하지만 이렇게 호이스팅이 되면 내가 원하는 대로 코드가 동작하지 않을 수 있다.
if (result) {
console.log("Hello");
}
var result = 10;이 코드는 에러가 나야 정상이지만 result가 undefined이기 때문에 에러가 나지 않고 그냥 넘어간다. 하지만 let과 const를 사용하면 참조 에러가 발생해 실수를 잡아낼 수 있어 코드를 더 안전하게 작성할 수 있게 해준다.
참고로 let과 const도 호이스팅이 되지만 초기화가 이루어지지 않아 참조 에러가 발생한다.
2. 함수 스코프를 갖는다.
var는 함수 스코프를 가진다. 반면, let과 const는 블록 스코프를 가진다. 함수 스코프란 말 그대로 함수 내부에서만 유효한 범위를 의미한다. 하지만 블록 스코프는 { }, 즉 블록 내부에서만 유효하다.
for (var i = 1; i < 10; i++) {
// 함수 내부
}
console.log(i); // 10여기서 내가 원하는 건 i가 출력되지 않는 건데 for문에서 선언된 i가 for문 외부에서도 작동하는 것을 볼 수 있다. 이는 개발자에게 의도치 않은 효과를 줄 수 있다.
예를 들어, i라는 변수가 반복문 안에서만 사용되어야 하는 값이라고 가정한다. 그런데 실수로 for문 바깥에서도 i를 사용하면 기존에 사용 중이던 i가 엉망이 될 수 있다.
3. 재할당 가능
var는 같은 이름으로 변수를 여러번 선언할 수 있다. 그래서 아래처럼 다소 기묘한 코드도 동작한다.
var result = 10;
console.log(result); // 10
var result = 20;
console.log(result); // 20이걸 보고 "오히려 이게 더 편하지 않나? 변수 이름 걱정을 안 해도 되고" 라고 할 수도 있다. 그러나 코드가 3000줄 정도 된다고 가정하면 어떤 변수가 잘못 선언됐는지 찾는 건 정말 끔찍하다...
var는 과거에 널리 사용되었지만, 호이스팅 문제, 함수 스코프의 문제, 재선언 가능 때문에 지금은 거의 사용되지 않는다. 그러니 코드를 작성할 때는 var 대신 let과 const를 사용하자!!!
