javascript var let const

3가지의 차이점은 아래와 같은 관점으로 비교할 것입니다.

1. 스코프 (함수 스코프와 블록 스코프가 있으며, 둘의 차이점은 글 맨 마지막에 설명합니다.)
2. 값 변경 가능여부
3. 다중 선언 가능 여부
4. 변수의 생성과정
   1. 선언 : 변수 선언단계입니다.
   2. 초기화 : 선언 단계의 변수를 undefined로 초기화하며 메모리를 할당하는 단계입니다.
   3. 할당 : 초기화된 값(메모리)에 다른 값을 할당하는 단계입니다.
5. 호이스팅, TDZ관여 여부

---

1. var

• 함수 스코프
• 값 변경가능
• 다중 선언 가능

var name = 'Hye';
var name = 'Su';

• 변수의 생성과정

1. 선언 및 초기화(undefined)
var name; // undefined

2. 할당
name = 'Hye';

• 호이스팅(끌어올리기) 가능 = 선언하기 전에 사용가능

console.log(name); // undefined
var name = 'Hye';
--------------------------------------------------------
// 위 코드가 사실상 아래와 같다.
var name; // 선언만 될 뿐 할당은 안 됩니다.
console.log(name); // undefined
var name = 'Hye';

* 호이스팅은 스코프 내에서 이루어집니다.

 

2. let

• 블록 스코프
• 값 변경가능
• 다중 선언 불가

let name = 'Hye';
let name = 'Su'; // error

console.log(name); // error

• 변수의 생성과정

1. 선언 및 초기화(undefined)
let name; //undefined

2. 할당
let name = 'Hye';

• 호이스팅이 가능하지만, Temporal Dead Zone(일시적인 사각지대)때문에 에러가 납니다.

* TDZ란? 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미합니다.

//Temporal Dead Zone
name; // error

let name; // 초기화 지점

 

3. const

• 블록 스코프
• 값 변경불가능
• 다중 선언 불가
• 변수의 생성과정

1. 선언 + 초기화 + 할당 한번에 해야만 합니다.
const name = 'Hye';

• 호이스팅이 가능하지만, Temporal Dead Zone(일시적인 사각지대)때문에 에러가 납니다.

 

---

스코프

function sample() { // *** 함수 스코프
	if(true) {
    	var a = 'Hye';
    }
    console.lo(a); // Hye
    
    if(true) { // *** 블록 스코프
    	let bb = 'Hye';
        const cc = 'Su';
        
        console.log(bb); // Hye
        console.log(cc); // Su
    }
    console.log(bb); // error
    console.log(cc); // error
    
}