📝var vs let vs const (호이스팅, TDZ)
진행하기 전에 호이스팅 및 TDZ라는 개념을 알아야하는데 호이스팅이란 스코프 단위로 선언한 변수를 최상위로 올리는 단계를 의미하고 TDZ(Temproal Dead Zone)의 경우 값을 사용할 수 없는 영역이라고 생각하면 된다.
각 변수 타입에 따른 값 할당에 대한 단계가 존재한다
var 변수 (호이스팅 작동)
- 선언 및 초기화 단계 [var name = 'Mike'을 읽고 var name;으로 호이스팅 시켜 선언 및 초기화(undefined) 작업]
- 할당 단계 [var name = 'Mike' 실행 단계에 오면 호이스팅 시킨 변수에 값을 할당한다]
console.log(name); //undefined [호이스팅으로 사용 가능]
var name = 'Mike'
console.log(name); // Mike
var name = 'Bob' // 이런식으로 재할당 가능
console.log(name); // Bob
/** ----- var는 블록 스코프 밖에서도 사용 가능 ----- **/
const age = 30;
if(age > 19){
var txt = '성인';
}
console.log(txt); // 성인또한 var name = 'Bob'으로 재할당이 가능하다 이로 인해 일반적으로 작동하는 프로그래밍 단계에서 이상한 현상이 발견 될 수 있고 또한 var는 블록스코프 내에서 선언한 것도 cosnt와 let하고 다르게 사용이 가능하기 때문에 생각한대로 프로그램 로직이 안 돌 수 있기 때문에 var 사용을 지양한다 [다만 함수 스코프 내에서는 밖에서 사용 불가능]
let변수 (호이스팅 작동 + TDZ에 선언)
- 선언 단계 [let name = "Mike"를 읽고 let name;으로 호이스팅 시키지만 TDZ에 선언 되어 사용 불가]
- 초기화 단계 [let name = "Mike" 실행 단계에 오면 호이스팅 시킨 변수에 undefined으로 초기화]
- 할당 단계 ['Mike'라는 값을 할당하게 된다]
console.log(name); // Error 발생 (TDZ에 선언 되어서 사용 불가)
let age;
let name = "Mike";
let name = "Bob"; // Error 발생 (Identifier 'name' has already been declared)
const 변수 (호이스팅 작동 + TDZ에 선언)
- 선언 + 초기화 + 할당 [const name = "Mike"를 읽고 호이스팅 후 TDZ에 선언한다]
console.log(name); // Error (Cannot access 'name' before initialization)
const name = "Mike";
name = "Bob"; // Error (Assignment to constant variable)
const age; // Error 반드시 선언 즉시 값 할당 필요
📝null
null이라는 값이 할당된 경우
📝undefined
선언은 되었지만 아무런 값도 할당되지 않은 경우
📝NaN
경우 문자를 숫자로 나누려는 등의 행동
📝지역 변수, 전역변수
function car(){
var carName = "matiz";
}
console.log(carName); // 에러 carName이 지역변수이기 때문에
var carName ="matiz";
console.log(carName); // matize 전역변수를 호출했기 때문에 가능하다.
// 지역변수 전역변수지역변수란 그 지역에서만 쓸 수 있는 걸로 function car(){ var carName ="matize } carName이 function안에
선언되어있죠? 이처럼 한정된 중괄호 지역에서 쓸 수 있는 게 지역변수 입니다. 그리고 어디서나 쓸 수 있는게 전역변수입니다.
🔗 참고 및 출처
https://www.youtube.com/watch?v=ocGc-AmWSnQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4