var, let, const 차이

🤠var, let, const는 변수 선언 방식이다. 그 차이를 정리해보자
변수할당, 스코프, 호이스팅 여부의 차이로 정리!

🤔var

• 변수 중복 선언을 허용하여 의도치 않은 재할당을 발생시킨다

• var로 선언된 변수는 함수 레벨 스코프만 지역스코프로 인정한다

var a = "aaa"; // 함수 외부
function callB() {
    var b = "bbb";
    console.log(a);        //aaa - 전역변수
    if(b) {
        var c = "ccc";
        console.log(b);    //bbb- 함수 내 선언한 변수라서 가능
    }
    console.log(c);        //ccc- 함수 내 선언한 변수라서 가능
}
callB();
function callC() {
    var d = "ddd";
    console.log(a);    //aaa - 전역함수
    console.log(b);    //b is not defined
    console.log(c);    //c is not defined
   	console.log(d);    //ddd- 함수 내 선언한 변수라서 가능
}
callC();

//코드블록
if(a){
    var e = "eee"
}
 console.log('코드 블록내에 있다', e) 
//코드블록에 var 키워드로 e를 선언했지만 전역 변수가 됨

• 변수 호이스팅 발생
  - 호이스팅이란 선언문이 코드 제일 상단에 끌어올려진 것처럼 보이는 것
  - 선언 단계과 초기화단계가 동시에 일어난다 (변수를 선언하는 동시에 초기화하여 undefined로 만든다)

🤔let

• ES6부터 나온 것으로 var 대체제이다

• 변수 중복 선언 금지시킨다(문법 에러 발생시킴)

• 모든 코드 블록(함수, if문, for문, while문 ..등) 지역 스코프로 인정하는 블록 레벨 스코프 안에서도 지역변수로 인정

• 변수 호이스팅: 선언 단계와 초기화 단계가 분리되어 진행
  - 런타임 이전에 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다
  - 일시적 사각지대(TDZ)가 존재
  - 변수 호이스팅이 일어나지 않는 것처럼 보인다
  

🤔const

• let과 마찬가지로 ES6부터 나왔다

• const는 반드시 선언과 할당이 동시에 이루어져야 한다

• 재할당이 금지되었다

• 상수이다(재할당이 금지된 변수)

• const 키워드로 선언된 변수에 객체를 할당한 경우는 값 변경 가능

• 블록레벨 스코프를 가진다

• 변수 호이스팅이 일어나지 않는 것처럼 보인다
  

정리해보면

• 어디서 값이 바뀌었는지 모르는 재할당의 문제를 가지고 있는 var를 let과 const가 그 문제를 해결해준다고 볼 수 있겠구나!
• var는 변수 재선언, 재할당 가능 / let은 재할당가능/ const는 둘다 불가능
• var는 함수레벨스코프에서만 지역변수, let과 const는 블록레벨스코프와 함수레벨스코프에서 지역변수로 인정
• var는 호이스팅 현상이 일어나는 것처럼 보임, let과 const는 호이스팅 현상이 일어나지 않는 것처럼 보임
• ❔변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다고 한다 -> const로 선언하면 원시값을 사용하기에 let보다는 더 나은 것일까..?

---

출처 : https://nuhends.tistory.com/111
https://poiemaweb.com/es6-block-scope