지금까지 자바스크립트를 공부하며 var 키워드 사용을 지양해야하는 이유를 수 없이 접했을겁니다. 이번에 var
키워드를 사용하면 어떤 문제가 있는지 한방에 정리해보겠습니다.
var
키워드로 선언한 변수는 중복 선언이 가능합니다. (let
과 const
키워드는 중복 선언 X)
var x = 1;
// 중복 선언
var x = 100;
console.log(x); // 100
var y = 1;
// 중복 선언
var y;
console.log(y); // 1
위 예시의 y 변수처럼 값을 할당하지 않는 변수 선언은 무시됩니다.
var
키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정합니다.
let
과 const
키워드는 블록 레벨 스코프로 함수 뿐 아니라 for
, if
, while
문 등에서도 지역 스코프로 인정합니다.
var i = 10;
for (var i = 0; i < 3; i++){
console.log(i); // 0 1 2 3
}
console.log(i) // 3
위 예시의 for문 안에서 선언된 i
는 var
키워드로 선언하였기 때문에 전역 변수가 되어 중복 선언이 됩니다.
var
키워드로 변수를 선언하면 변수 호이스팅에 의해 스코프의 선두로 끌어 올려진 것 처럼 동작합니다. 에러를 발생시키지는 않지만 프로그램의 흐름상 맞지 않고 오류를 발생시킬 확률이 높습니다.
⬆️ var 키워드 사용하여 실행 된 후 선언한 것은 오류를 나타내지 않고 undefined를 반환합니다.
⬆️ 반면 let 키워드로 변수를 실행 후에 선언하면 ReferenceError를 반환합니다.
일반적으로 const
키워드는 변수에 담긴 값을 상수처럼 사용하고자할 때 사용합니다.
const
키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야합니다. 초기화란 변수에 값을 할당하는 것을 의미합니다.
⬆️ 그러지 않으면 에러가 발생합니다.
⬆️ const
키워드 또한 let
키워드와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것 처럼 동작합니다.
const
키워드는 변수에 값을 재할당 할 수 없습니다. (var
와 let
은 재할당 가능합니다.)
재할당을 할 수 없기 때문에 const
키워드로 선언한 변수는 상수처럼 사용이 가능합니다.
일반적으로 상수의 이름은 대문자로 선언하여 상수임을 명확히 나타냅니다.
const
키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않습니다.
const
키워드로 선언된 변수에 원시값을 할당할 경우 값을 재할당할 수는 없지만 const
키워드로 선언된 변수에 객체가 할당된 경우 값을 변경할 수 있습니다. 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능합니다.
우선 ES6를 사용한다면 var키워드를 사용하지 않는것을 권장합니다.
변수를 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋습니다. const 키워드를 사용하면 의도치 않은 재할당을 방지하기 때문에 더 안전합니다.
출처 : 자바스크립트 DEEP DIVE