[JavaScript] - var를 말고 const, let을 써 야하는 이유

자바스크립트를 공부하면서 많이들 var로 변수를 선언하지 말고 const와 let을 사용하라고 한다.
왜 var를 지양하는지 정리해보려고 한다.

var로 선언된 변수의 문제점

1) 중복 선언

var로 선언된 변수는 중복 선언이 가능하다.

var name = "kim";

console.log(name); // kim

var name = "lee";

console.log(name); //lee

위의 예제와 같이 name을 중복해서 선언해도 에러가 발생하지 않는다.
이는 개발자가 의도치 않게 변수명을 똑같이 선언하고 값을 재할당할 수 있게 되고 문제가 발생할 수 있다.
let과 const는 같은 스코프 내에 중독 선언을 허용하지 않는다.
let과 const로 선언된 변수는 SyntaxError가 나오게 된다.

let name = "kim";

console.log(name);

let name = "lee"; //SyntaxError: Identifier 'name' has already been declared

console.log(name);

2. 함수 레벨 스코프

var : 함수 레벨 스코프
let 과 const : 블록 레벨 스코프
var로 선언된 변수는 함수의 코드 블록만 지역 스코프로 인정된다.
그래서 함수 외부의 var로 선언된 변수는 전역 변수가 되고 전역 변수를 남발하여 사용하면 개발에 있어 문제가 될 수 있다.
아래 예시를 보자

var i = 10;

for (var i =0; i<3; i++){
    console.log(i) // 0 1 2
}

console.log(i); // 3

for문 안에서도 var 키워드는 전역 변수가 되어 기존의 값을 바꿔버린다.

3. 변수 호이스팅

호이스팅이란?

변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라한다. - 모던 자바스크립트 Deep Dive, p43

자세히 알고 싶은 분은 여기에서 호이스팅 파트를 보기 바란다.

나도 조만간 호이스팅에 관해서 공부한 내용을 정리할 예정이다.

var 키워드 호이스팅 예제

console.log(num); // undefined

num = 10;

console.log(num); // 10
var num;

변수 호이스팅에 의해 선언문이 스코프의 위쪽으로 끌어올려진 것처럼 동작한다.
에러를 발생시키지는 않지만 프로그램의 흐름에 맞지 않고 가독성을 떨어뜨리고 오류를 발생할 여지를 남긴다.

let으로 선언된 변수는 ReferenceError가 나오게 된다.

4. 결론

1. 중복 선언
2. 함수 레벨 스코프
3. 변수 호이스팅
   의 문제점으로 var로 변수를 선언하는 것을 지양해야 한다.
   let과 const를 사용하여 의도치 않은 오류를 줄일 수 있다.

let과 const 차이점

그럼 let과 const의 차이점은 무엇이고 둘 중에서는 어떤 것을 사용할지 알아보고 끝내자.

공통점

1. 같은 변수명 중복 선언 안됨
2. 블록 레벨 스코프
3. 변수 호이스팅이 안되는 것처럼 동작 (이부분은 위의 링크나 따로 글로 정리할 예정이다.)

차이점

let은 재할당이 가능하고 const는 재할당이 불가능하다.

let foo = 1;
foo = 2;

const bar = 1;
bar = 2; // TypeError: Assignment to constant variable.

두 키워드는 대부분 특성이 비슷하지만 let은 변수 const는 상수를 선언하기 위해 사용한다.
재할당을 하려고 하면 위 예제와 같은 에러가 발생한다.

진짜 결론

버전 문제가 없다면 var는 사용하지 않는다.
변수의 재할당이 필요한 경우에만 let을 사용한다.
변수 선언 시에는 변수가 재할당이 필요한지 모르는 경우가 많아 그냥 const를 쓰고 재할당이 필요하면 그때 let으로 바꿔도 늦지 않다.