let, const, var (scope, hoisting 개념에서의 차이)

1. 중복 선언

var : 중복 선언 가능

let / const : 중복 선언 불가능

2. 재할당

var / let : 값의 재할당이 가능

const : 값의 재할당이 불가능

3. 스코프(Scope) 개념

스코프란 유효한 참조 범위를 말한다. 예를 들어, 함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능하다.
자바스크립트는 var로 선언한 변수의 스코프와 let, const로 선언한 변수의 스코프가 다르다.

스코프 측면에서 var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프이고, let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프이다.

함수 레벨 스코프(function-level scope)

• 함수 내에서 선언된 변수는 함수 내에서만 유효하고 함수 외부에서는 참조할 수 없다.

function func() {
    if (true) {
        var a = "a";
        console.log(a); // a
    }
    console.log(a); // a
}
console.log(a) // Uncaught ReferenceError : a is not defined
func();

let / const 블록 레벨 스코프(block-level scope)

• 함수, if문, for문, try/catch문 등의 모든 코드 블록 내부에서 선언된 변수는 코드블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.

function func() {
    if (true) {
        let a = "a";
        console.log(a); // a
    }
    console.log(a); 
  // Uncaught ReferenceError : a is not defined
}
func();

4. 호이스팅(Hoisting) 개념

• 호이스팅은 무언가를 들어 올리거나 끌어 올리는 동작을 말한다.
• JS에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 말한다.

var 선언 호이스팅

• 코드 실행되면 undefined 가 반환된다.

• 에러가 발생하지 않는 이유는 호이스팅 때문이다.

• JS 인터프린터는 변수 생성의 선언단계와 할당단계를 분할한다.
  선언 부분은 코드 실행 전 현재 범위의 맨 위로 호이스팅 되고 초기 undefined 값이 할당된다.

• 선언단계 : undefined / 할당단계 : hello 값이 할당

• var 경우

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

func(); // hoisting test

function func() {
    console.log("hoisting test");
}

let / const 선언 호이스팅

• let, const로 변수를 선언하여 실제로 변수는 여전히 호이스팅된다.
• 값이 할당되기 전에 콘솔로 출력하려고 하니 에러난다.
• 선언단계부터 할당단계 사이를 TDZ(temporal Dead Zone) 이라고 한다.
  에러가 발생하는 이유를 TDZ이라고 하며 일시적 데드 존은 변수를 사용할 수 없는 일시적인 비활성 상태를 나타낸다

차이점
var : 실제 할당 값이 할당 되기전까지 undefined 값이 할당된다.
let/ const : 변수 초기에 어떤 값도 할당되지 않는다.

• let 경우

console.log(greeting);
// Uncaught ReferenceError: Cannot access 'greeting' before initialization
let greeting = "hello";

결론은 변수 생성할 때 재할당이 필요없다면 const를 사용한다.
재할당이 필요할 경우 let을 사용하지만 변수 scope를 최대한 좁게 만들어 사용하는것이 좋다.