[JavaScript] let, const의 차이점, 그리고 var를 쓰면 안되는 이유!

요약

자바스크립트 변수 선언할 때 주의할 것!

1. 변수 선언 할 때 var는 사용하지 말자.
2. 기본적으로 변수 선언 할 때는 const를 사용하면 된다.
   -> 그 이유는 의도치 않는 재할당을 방지하기 위해서
3. 재할당이 필요한 변수를 선언할 경우는 let을 쓴다.

---

var를 쓰면 안되는 이유

1. 중복 선언이 가능함.
var는 기존에 선언했던 변수를 다시 선언하여 다른 값을 가질 수 있기 때문에 같은 변수를 재선언 하여 사용하여도 오류가 발생하지 않는다.
그렇기 때문에 프로젝트를 진행할 때 로직이 꼬여도 오류를 발견하기 힘들다.

var a = 1
console.log(a) // 1
var a = 2
console.log(a) // 2

2. 호이스팅 (선언들을 함수 유효 범위 최상단에 선언)
mdn에서 자바스크립트의 호이스팅이란 '인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 (변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것)'라고 정의했다.
var는 function-scoped로 선언한 변수를 호이스팅 하게 되면 undefined로 변수를 초기화 한다.
호이스팅 덕분에 var 선언이 최상단으로 올라가 참조할 a 변수는 있으나 값이 같이 올라가지는 않기 때문에 undefined로 출력 됨

// 선언된 var가 맨 위로 끌어올려져 undefined 출력
console.log(a) // undefined
var a = 1; 

// 호이스팅 해석
var a;
console.log(a) // undefined

// 함수 안에서 var 호이스팅
var b = 1
function testVar() {
    // (var b) -> 호이스팅
    console.log(b) // undefined
    var b = 2;
    console.log(b) // 2
}

3. for 문에서의 이슈
var는 block이 아닌 function 단위로 scope를 가지는 function-scope이다. 그렇기 때문에 var는 함수에서만 지역변수, 그 외에서는 전역변수로 취급되어서 반복문이나 조건문 밖에서도 접근이 가능하다.

for(var i=0; i < 5; i++) {
    console.log(i); // 0,1,2,3,4
}
console.log(i); // 5

위 코드를 확인해보면 반복문 안의 console.log에는 0~4까지가 출력된다.
그런데 위의 코드에서 var는 전역변수가 되어서 반복문 외부에서도 사용이 가능하여 5가 출력이 된다.

4. 총체적 난국의 var 사용

function test() {
	// (var i) -> 호이스팅으로 인해 맨 상단 선언
	console.log(i) // 호이스팅으로 인한 undefined 
    var i=1;
    for(var i=0; i<3; i++) {
    	console.log(i) // 0,1,2
        if(true) {
        	var i = 2; // var 재선언
            console.log(i);
        }
     }
     console.log(i) // 3 , 함수 내의 전역변수로 선언되어 반복문 밖에서도 가능
 }
 test();
 console.log(i); // Uncaught ReferenceError: i is not defined, 함수 내에서만 사용 가능하므로 함수 밖에서는 에러
 

es6 문법에서는 이러한 var를 대체할 수 있는 let과 const가 나왔다!!

---

let, const와 var와의 차이점

1. 중복선언 불가능

2. 함수 스코프가 아닌 블록 스코프

for(let i=0; i<3; i++) {
	console.log(i) // 0,1,2
}
console.log(i) // Uncaught ReferenceError: i is not defined
 

3. 호이스팅은 되지만 에러가 뜸
모든 변수는 호이스팅으로 최상단에 선언이 되지만, var는 호이스팅으로 인해 에러 없이 선언이 이루어지고, let과 const는 ReferenceError가 뜬다.

이것은 TDZ(Temporart Dead Zone)와 관련이 있다.
변수 생성은 선언(Declaration) -> 초기화(Initialization) -> 할당(Assignment) 세가지 단계로 진행이 된다.
실행할 변수를 실행컨텍스트에 선언하고, 선언한 변수를 메모리에 할당하여 초기화(undefined)를 한 다음 할당된 메모리에 값을 등록하면 변수를 사용할 수 있다.

a = 1;
let a = 0; // Uncaught ReferenceError: Cannot access 'a' before initialization
  

초기화 전에 'a'에 접근할 수 없다는 에러가 뜬다.
선언과 초기화가 동시에 이루어지는 var와 달리 let과 const는 선언은 되었지만, 초기화가 되어있지 않은 것이다.
선언 -> TDZ -> 초기화, 선언은 되었지만 초기화가 되기 전의 구간을 TDZ라고 이해하는 것이 간편하다.

let

변수 선언을 할 때 재할당이 필요한 경우, let을 사용하면 된다.
다만, 재할당은 가능하지만 재선언은 불가능하다.

let a = 1;
a = 2; // -> 재할당 가능

let a = 3; // Uncaught SyntaxError: Identifier 'a' has already been declared -> 변수가 이미 선언되었다는 에러

cosnt

const는 constant(상수)라는 뜻으로 변하지 않는 고정값이다. 그렇기 때문에 const는 let과 달리 재할당도 불가능하다.

const a = 1;
a = 2; // Uncaught TypeError: Assignment to constant variable. at <anonymous> -> 재할당 불가능