[ECMAScript] Var, Let, Const 차이점

var 변수 선언과 Let, Const 변수 선언의 차이점

1. 변수 값의 변화

기존의 자바스크립트에서는 var를 이용하여 변수를 선언하였다. var로 선언한 변수의 경우 할당되는 값이 유동적으로 변경이 가능하였다.

var hello="hello";
console.log(hello);     //result : hello
var hello="hi";
console.log(hello);        //result :hi

예를 들어 위의 경우처럼 최초 hello 변수를 선언할 때, 값을 "hello"로 할당을 해준 후, 밑에서 해당 변수의 값을 "hi"로 바꾼다고 하여도, 에러 없이 값이 바뀐다.

하지만 let과 const로 변수를 선언한 경우는 값을 바꿀 수가 없다.

let hello="hello";
console.log(hello); //result : hello
let hello="hi"; //Uncaught SyntaxError: Identifier 'hello' has already been declared
 

const hello="hello";
console.log(hello); //result : hello
const hello="hi"; //Uncaught SyntaxError: Identifier 'hello' has already been declared
 

let이나 const를 이용하여 변수를 선언한 경우 위와 같이 '이미 선언된 변수' 라는 에러 메시지가 뜬다.

2. 호이스팅 

var를 이용하여 선언한 경우, 기본적으로 호이스팅이 일어난다.  

console.log(hello); //result : undefined
var hello="hello";
console.log(hello); //result : hello
 

위의 코드와 같이 var를 이용하여 hello라는 변수를 선언할 경우, var 변수를 선언하기 전에 hello 변수를 보면 "undefined" 가 나온다. 즉, 호이스팅이란, 변수를 선언하면 그 변수가 유효 스코프 범위의 최상단으로 끌어 올려진다고 보면 된다( 함수도 마찬가지로 호이스팅이 일어난다.) 

하지만 let 과 const 변수의 경우는 var 변수 선언과는 다르다.

console.log(hello); //Uncaught ReferenceError: hello is not defined
let hello="hello";
console.log(hello); 
 

console.log(hello); //Uncaught ReferenceError: hello is not defined
const hello="hello";
console.log(hello);
 

위의 코드를 보면 console에서 "hello" 라는 변수가 정의 되지 않았다라는 에러메시지가 뜬다.  let의 경우 블록의 최상단으로 호이스팅이 일어나지만, 블록 내에서 변수가 선언되기 전에 변수를 console에 찍을 경우에는 에러가 뜬다. 그러한 이유는 TDZ (Temporal Dead Zone : 임시적 사각지대) 때문이다.

3. 유효범위

var 변수의 경우 유효범위는 함수 스코프가 유효범위이지만, let과 const의 경우에는 블록 스코프가 유효 범위이다. 

var foo = "This is String.";
if(typeof foo === 'string'){
    var result = true;
} else {
    var result = false;
}
console.log(result);    // result : true
 

위의 경우 코드의 경우 result 라는 변수는 항상 보던 바와 같이 if 안에서 사용하더라도 문제없이 값을 받을 수 있다. 하지만 let과 const 의 경우는 var 변수와는 다른점이 있다.

var foo = "This is String.";
if(typeof foo === 'string'){
    const result = true;
} else {
    const result = false;
}
console.log(result);    // result : result is not defined
 

var foo = "This is String.";
if(typeof foo === 'string'){
    let result = true;
} else {
    let result = false;
}
console.log(result);    // result : result is not defined
 

이러한 이유는 let이나 const의 경우 if절 속의 블록스코프({ '변수선언' }) 의 영향을 받아서이다.