var를 사용하면 안되는 이유

가짜 개발자·2022년 11월 29일

let const var scope 호이스팅

🍅 var를 사용하면 안되는 이유

우선 var를 사용하면 안되는 이유를 알기전 var와 let의 차이, 스코프, 중복선언, 호이스팅에 대한 개념이해가 필요합니다.

var, let의 차이점

var와 let의 차이는 3가지 측면으로 이야기 할 수 있습니다.

스코프 (Scope)
중복선언 (Variable redeclaration)
호이스팅 (Hoisting)

🐻 스코프 (Scope)

스코프란 변수가 접근 할 수 있는 범위를 뜻 합니다. 크게 세가지 범위로 나눌 수 있습니다. 함수범위(Function Scope), 블록범위(Block Scope), 전역범위(Global Scope)

var는 함수 스코프, let은 블록 스코프 접근이 가능합니다. 이점을 생각하면서 스코프에 대해 이해를 해봅시다.

// 예제1 - var (함수 밖)
function testFn(){
    var x = 'hello World'
}

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

예제 1에서 x라는 변수에 참조 할 수 없음 에러가 나옵니다. 그이유는 var는 함수 스코프여서 함수 내부에서만 접근 가능하기 때문입니다. 그렇다면 어떻게 하면 정상적으로 출력 할 수 있을까 ? 아래 예제 2를 봅시다.

// 예제2 - var (함수 내)
function testFn(){
    var x = 'hello World'
    console.log(x)
}

testFn()
// hello world

위와 같이 함수안에서 변수에 접근하여 콘솔이 정상적으로 찍히는 것을 볼 수가 있습니다. 이로서 var는 변수가 함수 내부에서 선언되어야 변수에 접근 할 수 있습니다.

// 예제3 - var (함수 내 if 절 추가)
function testFn(){

    if(true){
        var x = 'hello World'
    }
    console.log(x)
}

testFn()
// hello World

위의 예제도 마찬가지입니다. var를 사용해서 선언한 변수는 함수 스코프 내에서 접근이 가능하며 함수 내부라면 변수 밖이여도 어디서든지 변수에 접근 할 수 있습니다. 그렇다면 let은 어떨까요 ?

// 예제4 - let을 사용한 경우
function testFn(){

    if(true){
        let x = 'hello World'
    }
    console.log(x)
}

testFn()
// Uncaught ReferenceError: x is not defined

let은 var와 다르게 참조에러가 나옵니다. 이는 let으로 선언한 변수는 블록스코프 내에서 접근이 가능하기 때문입니다. 명확한 이해를 위해 아래 예제5를 확인 해 봅시다.

// 예제 5 - let (if절 추가)
function testFn(){

    let x = "hello joy"
    if(true){
        let x = 'hello World'
        
    }
    console.log(x)
}

testFn()
// hello joy

위와 마찬가지로 let변수는 블록 스코프내에서 접근을 하기 때문에 같은 블록안에 있는 "hello joy"가 출력됩니다. 그렇다면 여기서 let을 var로 바꾸면 어떻게 될까?

🐱 중복선언 (Variable redeclaration)

// 예제 6 - var 중복 선언
function testFn(){

    var x = "hello joy"
    if(true){
        var x = 'hello World'
    }
    console.log(x)
}

testFn()
// hello World

var는 같은 스코프 내에서 변수의 중복 선언을 허용합니다. 때문에 아래 있는 변수가 위에 있는 변수 선언을 덮어 씌우게 됩니다.

이것이 var를 쓰지 않는 이유 중 하나입니다. 중복 선언을 허용하게 되면 의도치 않은 버그를 유발하기 때문입니다. 중복 선언에 관한 또 다른 예제를 봅시다.

// 예제 7 -  var 중복 선언 o
var x = '안녕하세요'
var x = '제가 출력됩니다.'

console.log(x)
//제가 출력됩니다.

// 예제 8 - let 중복 선언 x
let x = '안녕하세요'
let x = '제가 출력됩니다.'

//Uncaught SyntaxError: Identifier 'x' has already been declared