var 키워드로 선언한 변수의 문제점
var 키워드는 ES5까지 변수를 선언할 수 있는 유일한 방법이었습니다. 하지만 이는 많은 문제점을 내포하고 있습니다.
변수 중복 선언 허용
var 키워드의 변수는 중복 선언이 가능합니다. var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작합니다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드기 없는 것처럼 동작하고 초기화문이 없는 변수 선언문은 무시됩니다.
함수 레벨 스코프
var 키워드의 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정합니다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 됩니다.
변수 호이스팅
변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올라진 것처럼 동작합니다. 실제 변수를 선언하기 전이더라도 변수를 참조하면 undefined를 반환합니다. 이는 코드의 가독성을 저하시키고 오류를 발생할 여지를 남니다.
let 키워드
ES6에서 새롭게 도입된 변수 선언 키워드인 let에 대해 알아보도록 하겠습니다.
변수 중복 선언 금지
let 키워드의 경우 같은 이름의 변수를 중복 선언하면 문법 에러가 발생합니다.
블록 레벨 스코프
모든 코드 블록(함수, if 문, for 문, while 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따릅니다.
변수 호이스팅
let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 것처럼 동작합니다. 변수 선언 이전에 변수를 참조할 경우 참조 에러를 발생시킵니다. let 키워드로 선언한 변수는 “선언 단계”와 “초기화 단계”가 분리되어 진행됩니다. 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대라고 부릅니다.
전역 객체와 let
var 키워드로 선언한 전역 변수와 전역 함수, 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체 window의 프로퍼티가 됩니다. 하지만, let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아닙니다.
const 키워드
let 키워드와 대부분 같지만 차이점을 기반으로 알아보도록 하겠습니다.
선언과 초기화
const 키워드의 변수는 선언과 동시에 초기화해야 합니다. 그렇지 않은 경우, 문법 에러가 발생하게 됩니다. 또한 let 키워드와 마찬가지로 블록 레벨 스코프를 가지며 변수 호이스팅이 발생하지 않습니다.
재할당 금지 및 상수
const 키워드의 변수는 재할당이 불가합니다. 또한, const 변수는 상수로 값의 변경이 불가합니다. 한 번 초기화된 상수는 재할당이 금지됩니다.
const 키워드와 객체
const 키워드로 선언된 변수에 원시 값을 선언한 경우에는 값을 변경할 수 없지만 객체를 선언한 경우 값 변경이 가능합니다. const 키워드는 재할당을 금지하는 것이며 값이 변하는 ‘불변’을 의미하지 않기 때문에 객체의 프로퍼티 생성, 삭제, 변경은 가능합니다. 하지만, 변수에 할당된 참조 값의 변경은 불가합니다.
var vs let vs const
변수 선언 시에는 const를 우선적으로 사용하고, 값의 변경이 있을 수 있는 경우 let을 사용하는 것이 좋습니다. 변수의 스코프는 최대한 좁게 설정하고 var 키워드의 사용을 지양하는 것이 좋은 코딩 습관입니다.
참고
이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 15_let, const 키워드와 블록 레벨 스코프(p.208 - 218)