TIL #5 변수,호이스팅,TDZ

keyword

• variables
• hoisting
• TDZ

lecture

• youtube - 코딩앙마

var는 한번 선언된 변수를 다시 선언할 수 있다. 반면 let는 한번 선언된 변수는 다시 선언할 수 없다.

var name = "Mike";
console.log(name);
var name = 'Jane'

let name = "Mike";
console.log(name); // Mike
let name = 'Jane' // error

var는 선언하기 전에 사용할 수 있다. 선언만 Hoisting 되고, 할당은 hoisting 되지 않는다.

호이스팅: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동!

console.log(name) //undefined
var name; 
name = 'Mike'

let 같은 경우 , error가 나온다. 그렇다면 let은 hositing이 되지 않는 걸까?

console.log(name);// ReferenceError: Cannot access 'name' before initialization
let name = 'Mike'

왜냐하면, let과 const는 TDZ (Temporal Dead Zone)의 영향을 받기 때문이다.

코드를 좀 더 예측가능하게 하고, 오류를 줄일 수 있다.

console.log(name); // 사용 불가 
const name = 'Mike' // 함수 선언 및 할당
console.log(name) //사용 가능 

let age = 30; 
function isAdult(){
  console.log(age); //erorr 발생 TDZ 이기 때문 
  let age = 20; 
}
isAdult();

변수 생성과정

var

1. 선언 및 초기화 단계 (함께 일어남)
   • let name; //값을 할당 안해도 초기값이 undefined 설정되어있다.
2. 할당 단계

let

1. 선언 단계
2. 초기화 단계 (선언과 초기화 단계가 따로 일어남. 실제 코드에 도달 했을 때 발생)
3. 할당 단계

const

1. 선언 + 초기화 + 할당

스코프

var

: 함수 스코프 (function scoped)

let,const

: 블록 스코프 (block-scoped)

함수, if문, for문, while 문, try/catch 문

function add(){
	//block-level scope
}
if(){
	//block-level scope
}
for(let i = 0 ; i < 10 ; i++){
	//block-level scope
}

const age = 30; 
if(age> 19){
  var txt = '성인입니다.'
}

console.log(txt); //'성인입니다'

//if문 안에 있는 var는 밖에서 부를 수 있다. let과 const는 안된다. 

function add(num1,num2){
  var result = num1 + num2;
 
}

add(2,3);

console.log(result) // error

//다만 함수안에서 var는 예외다. 함수 밖에서 부를 수 없다.