var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 알아보기

우리가 프로그래머스라는 코딩 테스트 연습하는 웹 사이트들을 살펴보다 보면 Javascript로 초기 설정 값이 var 로 되어있는것을 볼 수 있다.

function solution(grid) {
    var answer = [];
    return answer;
}

하지만 요즘 프론트 개발에서나 javascript 를 사용하는 프로젝트에서 오히려 let, count를 정말 많이 보이는데 그렇다면 왜 var는 사라지고 let, count를 사용하는 것일까? 이를 중복 선언 허용, 스코프, 호이스팅 관점에서 알아보려고 한다.

 

중복 선언 (Redeclaration)

var

동일한 스코프 내에서 여러 번 선언할 수 있는 특징을 가지고 있습니다

let

동일한 스코프 내에서 중복 선언이 불가능합니다.

const

let 과 마찬가지로 동일한 스코프 내에서 중복 선언이 불가능합니다. 또한 선언 시 초기화를 강제하며, 한 번 할당된 값은 변경할 수 없습니다.

var varVariable = "test";
var varVariable = "test2"; // 가능

let letVariable = "test";
let letVariable = "test2"; // 타입에러 : 이미 위에 letVariable을 선언 하여 중복선언이 불가능합니다.

const constVariable = "test";
const constVariable = "test2"; // 타입에러 : 이미 위에 constVariable을 선언하여 중복선언이 불가능합니다.

스코프 (Scope)

var

함수 레벨 스코프(function-level scope)를 가집니다. 함수 내부에서 선언된 변수는 함수 내부 에서만 유효하며, 함수 외부에서는 접근할 수 없습니다.

let,const

let, count는 블록 레벨 스코프(block-level scope)를 가집니다. 이는 {}로 둘러싸인 블록 함수 내에서만 유효합니다.

function testFunction() {
    var varVariable = "inside function";
    if (true) {
        let letVariable = "inside block";
        const constVariable = "also inside block";
        
        console.log(varVariable); // "inside function"
        console.log(letVariable); // "inside block"
        console.log(constVariable); // "also inside block"
    }
    console.log(varVariable); // "inside function"
    console.log(letVariable); // ReferenceError 에러출력
    console.log(constVariable); // ReferenceError 에러출력
}

호이스팅

호이스팅은 변수 선언을 코드의 상단으로 끌어올리는 것처럼 동작하는 자바스크립트의 특성입니다.

var

호이스팅 발생, 변수 선언이 스코프의 최상단으로 끌어올려집니다. 초기화는 호이스팅되지 않습니다.

let, const

let과 count는 호이스팅이 발생하지만, TDZ(Temporal Dead Zone)로 인해 선언전에 접근할 수 없습니다.

TDZ(Temporal Dead Zone)

TDZ는 변수가 선언되기 전의 시간과 공간을 말합니다. 이 구간에서 해당 변수에 접근하려고 하면 참조 에러(Reference Error)가 발생합니다. var 키워드와는 달리 let과 count로 선언된 변수는 선언 전에는 사용할 수 없습니다. 

console.log(varVariable); // undefined
var varVariable = "defined";

console.log(letVariable); // ReferenceError 참조에러 발생
let letVariable = "defined";

console.log(constVariable); // ReferenceError 참조에러 발생
const constVariable = "defined";

 

이처럼 var에서는 변수 선언만 스코프의 최상단으로 끌어올려지지만 "denfined"는 호이스팅 되지않기에 undefined를 출력합니다.

let, count는 TDZ가 발생하면서 참조 에러가 발생하고 있습니다.

 

정리

var에서는 초기 자바스크립트에서 블록 레벨 스코프를 지원하지 않았기 때문에 var는 함수레벨 스코프만을 지원하였습니다. 이는 변수가 함수 전체에서 유효하다는 것을 의미하고 있으며,또한 호이스팅 때문에 var 선언은 실행 컨텍스트의 생성 단계에서 메모리에 저장되고 실제 코드 실행 전에 처리됩니다.

let과 const는 ES6에서 도입되었으며, 블록 레벨 스코프를 지원하면서 코드를 더 예측 가능하고 관리하기 쉽게 만들어 주었습니다. TDZ는 스코프의 시작부터 변수 선언까지의 구간을 의미하기 때문에, 이 구간에서는 변수에 접근할 수 없습니다. 이는 선언되지 않은 변수의 사용을 방지하여 더 안전한 코드를 작성할 수 있게 도와줍니다.

 

참고 문서 : https://medium.com/swlh/the-difference-of-var-vs-let-vs-const-in-javascript-abe37e214d66