var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.

✅ var

1. scope : 전역 범위/함수 범위

1. 함수 외부에서 선언될 때는 전역 범위
   함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 전체 윈도우 상에서 사용할 수 있음

2. 함수 내에서 선언될 때는 함수 범위
   해당 함수 내에서만 사용 및 접근 가능

  var greeter = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }

위 코드에서 hello는 함수 범위, greeter는 전역 범위

	var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

hello는 newFunction() 함수 밖에서 사용할 수 없으므로 에러 발생

2. 재선언 허용

같은 범위 내에서면 var를 중복으로 선언하여 수정이 가능

 	var greeter = "hey hi";
    var greeter = "say Hello instead";

	var greeter = "hey hi";
    greeter = "say Hello instead";

3. 호이스팅

호이스팅이란 변수와 함수 선언이 맨 위로 끌어올려져 먼저 실행되는 자바스크립트 매커니즘

   	console.log (greeter);
    var greeter = "say hello"

위 코드를 자바스크립트는 아래처럼 해석하여

	var greeter; // 변수 선언이 맨 위로 호이스팅
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

var 변수는 범위 내에서 맨 위로 올라가고, 값은 undefined로 초기화

4. 문제점

	 var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

times>3가 true를 반환하여 greeter는 "say Hello instead"로 재정의 된다.
의도적으로 하지 않았을 경우 문제가 되기도 하고, 이런 var의 특성은 많은 버그를 발생시킬 수 있기에 ES6에서 let과 const가 등장하게 되었다.

✅ let

1. scope: 블록범위

{}로 바인딩된 코드 덩어리를 의미하며, 중괄호 안에 있는 것은 모두 블록 범위다.
let으로 선언된 변수는 해당 블록 {} 내에서만 사용 가능하다.

	let greeting = "say Hi";
   	let times = 4;

   	if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   	console.log(hello) // hello is not defined

if문 안에서 선언된 hello는 if문 블록 밖에서 사용할 수 없다.

2. 재선언 불가

let은 해당 범위에서 업데이트는 가능하지만, 재선언은 불가하다.

	let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: 		Identifier 'greeting' has already been declared

다른 블록 범위에서는 같은 이름의 변수를 선언할 수 있다.

3. 호이스팅

var 처럼 let 선언은 맨 위로 호이스팅 되지만, var와 다르게 undefined로 초기화되지 않는다. 선언 이전에 let 변수를 사용하려 하면 Reference Error가 발생한다.

✅ const

1. scope : 블록 범위

let과 동일

2. 업데이트 및 재선언 불가

const로 선언된 변수는 일정한 상수 값을 유지하기 때문에, 값을 변경할 수도 재선언할 수도 없다.
그렇기에 선언과 동시에 초기화가 되어야 한다.

const 개체는 업데이트할 수 없지만, 개체의 속성은 업데이트할 수 있다.

아래처럼 const greeting을 선언 및 초기화 했다면,

	const greeting = {
        message: "say Hi",
        times: 4
    }

아래처럼 greeting 객체의 속성을 직접 업데이트하는 것은 불가하지만,

 	greeting = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.

아래처럼 하는 것은 가능하다.

	greeting.message = "say Hello instead";

3. 호이스팅

let처럼 const 선언도 맨 위로 호이스팅만 되고 초기화 되지는 않는다.

💭 총 정리

📌 scope : var는 전역/함수범위고 let과 const는 블록 범위다.
📌 업데이트/재선언 : var는 둘 다 가능하고 let은 업데이트만 가능하고 const는 둘 다 불가하다.
📌 호이스팅: 셋 다 최상위로 호이스팅 되지만, var 변수만 undefined로 초기화 된다.
📌 const만 선언과 초기화를 동시에 해야한다.

출처

freeCodeCamp