[JavaScript] var의 문제점 (var, let, const)

들어가며

자바스크립트의 변수 선언 방법에는 var와 let, const가 있다는 사실은
자바스크립트를 조금 공부하기 시작하면 금방 알게되는 사실이다.
그리고 var 키워드를 지양해야한다는 것을 대략적으로 습득하게 된다.
조금 더 검색을 해봤다면 const 키워드는 재할당이 불가능하니 되도록 const 키워드를 지향하고,
재할당이 필요한 경우에만 let 키워드를 사용하는 것이 좋다는 사실까지 알 수 있다.
여기까지 좋다. 그렇다면 어떤 이유 때문일까?

내 머릿속을 정리하기 위해서 몇가지 개념과 함께 이를 알아보고자 한다.

 

 

그래서 var 키워드는 뭐가 문제일까?

변수 중복 선언이 가능

먼저 let과 const 키워드로 변수를 중복 선언할 경우에는 이미 선언되었다는 에러가 뜨지만,
var 키워드로 선언한 변수는 같은 이름으로 중복해서 선언을 할 수 있다.

var hello = 'hi';
var js = 'javaScript';

var hello = 1;
var js;

console.log(hello); // 1
console.log(js); // javaScript

let hi = 123;
let hi = 456; // Uncaught SyntaxError: Identifier 'hi' has already been declared

const num = 123;
const num = 'number'; // Uncaught SyntaxError: Identifier 'num' has already been declared

그러나 var 키워드를 사용한 변수 hello는 먼저 hi를 할당받았음에도 다시 선언된 중복 변수로 덮어씌워진 것을 볼 수 있다.
이런 경우 의도치 않게 값이 바뀔 가능성이 커져버리고 예측 불가능한 코드가 될 수 있다.

즉 다양한 에러가 발생할 가능성이 높아진다는 것이다.

 

 

 

전역 변수의 남발

let, const 키워드는 블록 레벨 스코프, var 키워드는 함수 레벨 스코프이다.
스코프를 간략하게 얘기하면 다음과 같다.

스코프

• 자바스크립트에서의 스코프는 유효범위. 즉, 변수, 함수 등 식별자를 참조할 수 있는 범위를 말한다.
• 이 식별자들은 자신이 선언된 위치에 따라 스코프가 결정된다.

지역 스코프

• 해당 코드 블록 내부가 유효범위인 스코프.

함수 레벨 스코프

• 블록 레벨 스코프와 반대된다. 함수 몸체만을 지역 스코프로 인정하는 스코프.

블록 레벨 스코프

• 중괄호로 경계가 묶이는 모든 코드 블록. (if,for,while,switch,try/catch...등등)

 

블록 레벨 스코프인 let과 const 키워드

let a = 'a';

function print(){
    const b = 'banana';
    let a = 'apple';

    if(true){
        const a = 'abc';
        console.log(a);
    }

    console.log(a);
}

print();
console.log(a);
console.log(b);

let, const로 선언된 변수는 코드 블록 안에서만 유효한 것을 볼 수 있다.

블록 레벨 스코프에서는 지역을 벗어나면 지역변수가 자동으로 소멸되기 때문에 외부에서는 접근할 수 없다.

 

 

함수 레벨 스코프인 var 키워드

function print(){
    var coke = 'zero';
    console.log(coke);
}

if(true){
    var juice = 'orange';
}

print();
console.log(coke); // Uncaught ReferenceError: coke is not defined
console.log(juice); // orange

var로 선언된 변수는 함수 내부에서 사용될 때만 유효하고,
그 외의 if문, for문 등의 경우는 어디서나 참조가 가능한 전역 변수가 된다.
전역 변수는 모든 스코프에서 참조가 가능하기 때문에 쉽게 변경될 수 있고,
가장 마지막에 검색되기 때문에 속도와 성능면에서 문제가 된다.

 

 

 

변수의 호이스팅

자바스크립트는 코드를 위에서 아래로 읽어가며 한 줄씩 실행하는 인터프리터 언어이다.
변수를 선언문과 초기화 단계(할당)로 나눌 수 있는데,
호이스팅은 런타임 이전에 내부적으로 선언문을 모두 최상위로 끌어올려버리는 것을 말한다.
이런 호이스팅이 var 키워드에서 발생한다.

console.log(hello); // undefined

hello = 'hi'; // 할당
var hello;  // 선언

console.log(hello); // hi

첫번째 출력에서 변수 hello는 아직 값을 할당받지 않았음에도 undefined를 반환한다.
이 undefined은 var에서는 변수의 선언과 초기화 단계가 한번에 이루어지기 때문에 나오는 값이다.

 

 

반면에 let, const 키워드는 변수의 선언 단계와 초기화 단계가 나뉘어서 진행된다.
선언은 var 키워드처럼 런타임 이전에 실행되지만 초기화는 변수 선언문에서, 할당은 할당문에서 실행된다.

console.log(kiwi); // Uncaught ReferenceError: kiwi is not defined

let kiwi = 'kiwi'; // 선언과 할당
console.log(kiwi); // kiwi

첫번째 출력에서 변수가 아직 초기화 되지 않았기 때문에 참조할 수 없다는 에러가 발생하는 것을 볼 수 있다.
위에서 시작부터 변수 kiwi가 선언되기 전까지, 참조에러가 발생하는 이 구간을 TDZ(Temporal Dead Zone). 일시적 사각지대라고 한다.
이 구간에서 에러가 발생하기 때문에 다양한 문제를 사전에 방지할 수 있다.

 

 

그렇다면 let과 const 키워드에서는 변수 호이스팅이 발생하지 않는 걸까?
발생하지 않는 것처럼 보일 뿐이다.

let a = 'apple'; // 전역 변수

function print(){
    console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
    let a = 'at'; // 지역 변수
}

위의 코드에서 호이스팅이 일어나지 않는다면 전역 변수 a의 값인 apple이 출력될 것이다.
하지만 참조 에러가 발생한다.

호이스팅은 스코프에 따라 함수 내부에서도 발생하기 때문에,

지역 변수 a가 아직 초기화 되지 않아 참조 에러가 발생한 것이다.

 

 

정리하자면 다음과 같다.

var

• 변수의 중복 선언이 가능하다.
• 함수 레벨 스코프이기 때문에 함수 내부의 변수 외에는 모두 전역 변수가 되어버린다.
• 변수 호이스팅이 발생해서 선언 이전의 변수도 사용이 가능하다.

let과 const

• 변수의 중복 선언이 불가하다.
• 블록 레벨 스코프라 지역 스코프 이외의 변수는 참조가 불가능하다.
• 호이스팅이 발생하지만 TDZ 때문에 발생하지 않는 것처럼 보인다.
• const는 재할당이 불가능한 변수를 위한 키워드다.