[JavaScript] var, const, let 키워드 차이점

 

var, let, const 키워드의 차이점

 

 

var

유효 범위 : 블록스코프 / 함수 스코프

값 재할당 : X

재선언 : X

호이스팅: O

 

const

유효 범위 : 함수 스코프

값 재할당 : O 

재선언 : O

호이스팅: X

 

let

유효 범위 : 블록 스코프 / 함수 스코프

값 재할당 : O 

재선언 : X

호이스팅: X

 

 

 

 

[변수 재선언]

 

    var a = 'a'
    console.log(a) // a

    var b = 'b'
    console.log(b) // b

 

a라는 변수를 한 번 더 선언했습니다.

하지만 에러가 나오지 않고 각각 다른 값이 출력되고 있습니다.

에러가 나지 않아 편리하고 빠르게 코딩을 이어나갈 수 있지만 코드량이 방대하다면 a라는 변수가 어디에서 어떤 의미를 가지고 사용되기 파악하기 힘들고 값이 바뀔 불안전한 상황이 생깁니다.

 

 

    let a = 'a'
    console.log(a) // a

    let a = 'b'
    console.log(a) 
    // Uncaught SyntaxError: Identifier 'a' has already been declared

let을 사용할 시에는  a는 이미 선언 되었다는 에러 메세지가 나옵니다.

(const도 동일합니다.)

 

변수를 재선언 할 수 없습니다.

 

 

 

[블록스코프]

 

 

블록스코프란 {블록}내부에서 선언된 변수는 해당 블록에서만 접근 가능한 것을 의미합니다

 

{
    var a = "a";
};
console.log(a); // a

 

var 키워드를 사용하여 변수를 선언하게 되면 블록 안에서 변수를 선언하였어도 전역 스코프로 취급하여서 a라는 값이 출력됩니다.

 

{
    let a = "a";
};
console.log(a); // ReferenceError: a is not defined

 

let 키워드를 사용하여 변수를 선언하게 되면 해당 변수는 블록 스코프를 가지게 되어 블록 내에서만 접근 가능하여 에러가 발생하게 됩니다.

(const도 동일합니다.)

 

 

 

 

[호이스팅]

 

 

JavaScipt 엔진은 함수선언문 해석-> 변수 초기화 -> 코드실행 의 순서로 이루어집니다.

 

console.log(a); // undefined

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

a = 1;
console.log(a); // 1

 

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

let a;
console.log(a); // undefined

a = 1;
console.log(a); // 1

 

var은 변수 초기화 단계에서 undefined로 초기값을 설정합니다.

let과 const는 초기값을 아예 설정하지 않아 일시적 사각지대(Temporal Dead Zone, TDZ)에 빠지게 됩니다.

 

 

 

 

 

 

 

정리

 

var 키워드 보다는 let과 const 키워드를 사용하는게 좋습니다.

재할당이 필요하다면 let, 상수라면 let 보다는 const 키워드를 사용하는 것이 안전합니다.