1. 변수, 호이스팅, TDZ(Temporal Dead Zone)

var, let, const

• let, const : ES6이상 버전부터 사용

var, let 차이

var

• 변수 재선언 가능
• 변수 선언 전 사용 가능 (호이스팅)

// var 변수의 호이스팅
console.log(name);  // undefined
var name = 'Mike'; 

/*
실제로는 
var name;
console.log(name);  // undefined
name = 'Mike';
와 같이 동작함
*/

• var : 변수 선언은 호이스팅 되지만, 값 할당은 호이스팅되지 않음.

let

• 변수 재선언 불가능

console.log(name);  // ReferenceError
let name = 'Mike'; 

let은 에러 발생

• let, const도 호이스팅 됨. 근데 왜 error가 발생할까? --> TDZ(Temporal Dead Zone)때문

호이스팅

• 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동
• 호이스팅은 스코프 단위로 일어남

let age = 10;

funtcion showAge(){
  console.log(age);
  let age = 20;
}

showAge();  //  error!

• let도 호이스팅됨. 만약 호이스팅이 발생하지 않았다면, 함수 밖에서 선언한 age = 10이 출력되었을것.
  

TDZ (Temporal Dead Zone)

TDZ

• 스코프의 시작 지점부터 초기화 시작 지점까지의 구간
• TDZ영역의 변수는 사용할 수 없음
  - let, const는 TDZ의 영향 받음
• 값 할당 전에 변수를 사용할 수 없기 때문에 TDZ가 생김

TDZ장점

• 코드를 예측 가능하게 만들어줌
• 잠재적 버그를 줄일 수 있음

변수의 생성 과정

1. 선언
2. 초기화 (변수 선언 후 처음으로 값을 저장하는 것. 이 단계에서 할당된 메모리는 undefined로 초기화됨)
3. 할당

• var : 선언 + 초기화 -> 할당
  • var는 변수 선언만 해도 초기화가 동시에 진행됨.
  • var로 생성한 변수는 호이스팅 될 때 초기화까지 진행되기 때문에 에러 발생하지 않음.
• let : 선언 -> 초기화 -> 할당
  • 변수 선언과 초기화가 동시에 진행되지 않음.
  • let으로 생성한 변수는 호이스팅 될 때 초기화가 되지 않으므로 값이 들어가있지 않음. 때문에 에러 발생.
• const : 선언 + 초기화 + 할당
  • const는 선언과 동시에 값을 할당해줘야함. (var와 let은 변수 선언만 한 후, 값을 나중에 할당하는 것이 가능. 값을 언제든지 변경할 수 있기 때문)

var, let희 호이스팅 차이

스코프

var : 함수 스코프 (function-scoped)
let, const : 블록 스코프 (block-scoped)

함수 스코프 : 함수 내에서 선언된 변수만 지역 변수가 됨.

블록 스코프 : 코드블록 내에서 선언된 변수는 코드블록 내에서만 유효하며, 외부에서 사용할 수 없음.

• 코드블록 : 함수, if문, for문, while문, try/catch문 등

---

// 블록 스코프
const age = 30;

if (age>19){
  var txt = '성인입니다.'; 
  let isAdult = true;
}

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

// 함수 스코프
function add(num1, num2){
  var resule = num1 + num2;
}

add(2,3);

console.log(result);  // error. result is not defined

• if문 안에서 var로 선언한 변수는 if문 밖에서도 사용 가능함
• if문 안에서 let으로 선언한 변수는 if문 밖에서 사용할 수 없음 (블록 스코프)
• 함수 안에서 var로 선언한 변수는 함수 밖에서 사용할 수 없다.