Javascript 다지기 - var를 쓰지 않고 let, const를 사용하는 이유

 

let, const는 권장하는 데에 비해서 var는 지양한다고 되어있는데 왜 인가에 대해서 알아보는 시간을 가지도록 하겠습니다.

이 챕터를 보기 전에 아래 글을 먼저 읽으시는 것을 권장드립니다.

 

저번 글 Javascript 다지기 - Javascript 다지기- 변수편 변수를 먼저 보시는 게 좋습니다.

 

 

자바스크립트 초기에는 변수를 선언할 수 있는 방법이 var 하나뿐이었지만,
ES6(2015)에서 let과 const가 추가되면서 var의 단점을 보완하게 되었습니다.
그 이유는 크게 세 가지입니다.

1. 함수 범위 vs 블록 범위
2. 호이스팅 초기화 방식
3. 중복 선언 가능 여부

 

저번에 우린 자바스크립트 변수에 대해서 알아봤는데 참고용으로 마지막에 표만 슬쩍 가져와서 보도록 하겠습니다.

선언 방식	사용 권장	특징
var name= "lime";	지양	함수 범위, 호이스팅 이슈 있음
let age= 2;	권장	블록 범위, 값 변경 가능
const  color= "black";	권장	블록 범위, 값 변경 불가능(상수)

함수 범위(Function Scope)와 블록 범위(Block Scope)

 

함수 범위(Function Scope)

var는 함수 범위를 가지고, 변수가 함수 내에서 선언되면, 해당병수는  함수 내부 어디에 서든 접근 가능하며, 외부에서도 접근이 가능

if (true) {
  var x = 10;
}
console.log(x); // 10 (블록 밖에서도 접근 가능)

 

블록 범위(Block Scope)

let, const는 블록 범위를 가지고, 변수가 블록 내에서 선언이 되며, 해당 변수는 블록 내에서만 접근이 가능하며, 외부에서는 접근이 불가능

if (true) {
  var x = 10;
}
console.log(x); // x is not defined (블록 밖에서 접근 불가능)

 

 

이 점의 차이는 블록 범위는 변수의 유효 범위를 명확히 하여 예기치 못한 버그를 줄여주는 효율적인 면을 볼 수 있습니다

 

호이스팅 초기화

var는 선언과 동시에 undefined로 초기화되기 때문에, 선언 전에 접근해도 에러가 나지 않습니다.

console.log(a); // undefined
var a = 5;

선언 전에도 접근해도 에러는 발생하지 않지만, 의도치 찮은 undefined 참조 버그가 발생할 수 있습니다.

 

let과 const도 호이스팅은 되지만, 초기화 전에는 Temporal Dead Zone(TDZ) 상태이므로 에러가 발생합니다.

console.log(b); // ReferenceError
let b = 5;

 

중복 선언

var는 중복 선언이 가능합니다.

var c = 1;
var c = 2; // 에러 없이 덮어씀
console.log(c); // 2

 

let, const는 중복 선언 시 에러 발생합니다.

let d = 1;
let d = 2; // SyntaxError

const e = 1;
const e = 2; // SyntaxError

 

중복 선언은 코드의 가독성을 떨어뜨릴뿐더러, 실수로 값이 변경되는 문제를 만듭니다.

 

간단하게 표로 정리로 해보았습니다.

범위	함수 범위	블록 범위
호이스팅 초기화	undefined로 초기화	초기화 안 됨 (TDZ 발생)
중복 선언	허용	불가
권장 여부	지양	권장

 

결론 

var과 let와 const보다 유연하지만 그만큼 예측 불가능하게 동작하고 버그를 발생시킬 가능성이 크다.

확실하게 안정적이고 유지보수 하기 좋은 코드를 만들기 위해서는 let과 const를 사용하는 것이 현대 자바스크립트에서는 효율적일 것이라는 생각이 들었습니다.