[JavaScript] Differences of var, let & const

Var

• ES6 이전에는 var 의 사용이 지배적이었으나, 각종 문제점들이 발견 되면서 새로운 변수 선언의 방법에 대한 필요가 생겨났다.

Scope of Var

• scope 란 변수들이 어디서 사용이 가능한지에 대한 정의 이다.
  var 변수 선언은 global 또는 function/local scope 이다.
  -> var 이 함수 내에서 선언되었다면 이는 이 함수 내에서만 사용 가능한 변수가 되는 것 이다.

var x = 2;
function function_name() {
var y = 3;
}

• 위의 예시에서 변수 x는 글로벌 변수이고 변수 y는 함수내에서만 사용이 가능하다.

var 변수는 재선언 및 업데이트가 가능하다.

• 이는

var x = 3;
var x = 4;

var x = 5;
    x = 6; 

와 같은 선언이 같은 스코프 내에서 가능하다는 소리이다.

var 의 Hoisting

Hoisting 이란,

• 코드 실행 이전에 변수나 함수 선언이 해당 스코프 최상단으로 올라가는 JavaScript 메커니즘을 뜻한다.

console.log(x);
var x = "안녕하세요";

가

var x;
console.log(x); //x 는 undefined 이다.
x = "안녕하세요";

라고 컴퓨터가 해석하며 해당 코드의 var 변수는 스코프 최상단으로 호이스팅 되며 undefined 값으로 초기값이 주어진다.

var 의 문제점

    var x = "안녕";
    var counter = 5;

    if (counter > 4) {
        var x = "안녕하세요"; 
    }
    
    console.log(x) // "안녕하세요"

• 위의 예시 코드를 보면 if 문은 항상 true 를 return 하므로 변수 x 는 항상 "안녕하세요" 로 redefined 되지만 이는 만약 변수 x 가 코드의 다른 부분에서 쓰였다면 원하지 않는 결과를 도출 할 수 있다.

Let

• let 은 위에서 다룬 var 의 문제점을 보완한 새로운 변수 선언 형태 이며 더 선호 된다.

let 은 block scoped 이다.

• block 은 {} 내부에 위치한 하나의 코드 덩어리를 뜻한다.
• 하나의 block 안에 let 을 통해 선언된 변수는 해당 block 안에서만 사용이 가능하다.

   let x = "안녕";
   let counter = 5;

   if (counter > 4) {
        let y =  "안녕하세요";
        console.log(y);// "안녕하세요"
    }
   console.log(y) // y is not defined

• 위의 예시 코드에서 변수 y 는 if 조건문으로 감싸진 block 안에서 선언 되었으므로 해당 block 아래에 console.log(y) 로 출력을 하려하지만 정의 되어있지 않으므로 에러가 생성된다.

let 은 업데이트 할 수 있지만 재선언은 할 수 없다.

• var 과 비슷하게, let 으로 선언된 변수는 해당 scope 내에서 업데이트가 가능하다.
• 하지만 var 과 다르게, let 으로 선언된 변수는 해당 scope 내에서 재선언이 불가하다.

let x = "안녕";
    x = "안녕하세요";

-> 이 코드는 작동하지만

let x = "안녕";
let x = "안녕하세요:;

-> 이 코드는 에러를 생성한다.

• 하지만 다른 scope 에서 선언된 변수들은 에러를 생성하지 않는다.

let x = "안녕";
if(true){
	let x = "안녕하세요";
    console.log(x) // "안녕하세요"
}
console.log(x) // "안녕"

-> 이러한 이유로 해당 코드는 에러를 생성하지 않는다.

• 이로 인해 let 은 var 보다 훨씬 더 선호되는 변수 선언 방식이 되었다.

let 의 Hoisting

• var 과 비슷하게 let 도 최상단으로 hoisting 되지만, var은 undefined 값으로 초기값이 주어지는 반면에 let 은 초기값이 주어지지 않으므로 undefined 값으로 코드가 돌아가기보다는 Reference Error 가 생성 되므로 실수를 방지 할 수 있다.

Const

• const 키워드로 선언된 변수는 불변하는 값을 유지한다.

const 선언은 block scoped 이다.

• let 선언과 비슷하게 const 선언은 선언된 해당 block 내에서만 사용이 가능하다.

const 는 업데이트 나 재선언 될 수 없다.

• const 는 말그대로 constant 이므로,,,

• 이러한 이유로 모든 const 선언은 선언과 동시에 값이 주어져야만 한다.

• 이러한 const 의 behavior 은 object 를 선언할때는 조금 달라진다. const 키워드로 선언된 object 는 업데이트 될 수 없지만 해당 object의 properties는 업데이트가 가능하다.

const x = {
	text = "안녕",
    counter : 3
}

에서

x = {
	message: "안녕하세요",
    number: "three"
    } //error: Assignemnt to constant variable.

는 불가능 하지만

x.text = "안녕하세요"; 

는 에러 메세지 없이 const 로 선언된 x object 의 property 인 text 를 에러 없이 업데이트 한다.

const 의 Hoisting

• let 과 같이, const 선언은 최상단으로 hoisting 되지만 초기값이 주어지지 않는다.

Summary

1) var 선언은 globally scoped 또는 locally/function scoped 이며 let 과 const 는 block scoped 이다.
2) var 변수는 해당 scope 내에서 업데이트 및 재 선언이 가능하지만; let 변수는 업데이트는 가능하지만 재 선언은 불가하며; const 변수는 업데이트 재 선언 둘다 불가 하다.
3) var, let, const 모두 해당 scope 의 최 상단으로 hoisting 되지만 var 변수는 undefined 의 초기 값을 가지게 되며, let 과 const 변수는 초기화 되지 않는다. ( 에러가 뜸)
4) var 과 let 은 초기화(선언시 값을 주어주는 것) 없이 선언이 가능하지만 const 는 반드시 선언과 동시에 초기화를 해주어야 한다.