변수

호이스팅

[var]
한번 선언된 변수를 다시 선언할 수 있다.
var는 선언하기 전에 사용할 수 있다.

var name

console.log(name) //undefined

name ="Mike" //할당

var로 선언한 모든 변수는 최상위로 끌어올리는 것처럼 동작한다.
(호이스팅 현상이 발생함)
하지만 할당은 호이스팅이 되지 않았다.

[let]

console.log(name) //ReferenceError

let name ="Mike" //할당

같은 상황에서 let은 error가 발생한다.
let은 호이스팅이 되지 않나? No
(호이스팅: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동)

그렇다면 왜 var처럼 동작하지 않고 error가 발생하는가?

Temporal Dead Zone

• let, const는 TDZ의 영향을 받는다.
  할당을 하기 전에는 사용할 수 없다.
  이는 코드를 예측 가능하게 하고 버그를 줄일 수 있다.
  

//동작 함
let age = 30
function showAge(){
	console.log(age);
}

showAge()

//동작 안함
let age = 30
function showAge(){
	console.log(age);
	let age = 20 //X
}

showAge()

호이스팅은 scope단위로 일어나게 된다.
호이스팅이 되지 않았다면 함수 밖에서 선언한 age 30이 정상적으로 찍힌다.

---

변수 생성과정

1. 선언단계
2. 초기화단계
3. 할당단계

let name;
name = "mike"

var age;
age = 30

const gender //X
gender = 'male'

[var]
1. 선언 및 초기화 단계
2. 할당 단계

선언과 초기화가 동시에 된다.
할당 전에 호출하면 에러가 아닌 undefined가 나온다.

[let]
1. 선언단계
2. 초기화단계
3. 할당단계
선언과 초기화가 분리되어 진행된다.
호이스팅이 되면서 선언단계가 이루어지지만,
초기화 단계는 실제 코드에 도달했을 때 나타나기 때문에
reference error가 나타난다.

[const]
1. 선언 + 초기화 + 할당

선언과 할당이 동시에 되어야 한다.
let과 var는 선언만 해두고 나중에 값을 추가하거나 값을 바꿀 수 있지만 const는 선언과 할당이 동시에 되어야 한다.

---

스코프

function add(num1, num2){
    var result = num1 + num2 //함수문 내에서만 사용
}

add(2, 3)

var: 함수 스코프
유일하게 함수 내에서 선언한 변수만 그 지역변수가 된다.
나머지 블록 문에서는 블록 문 외에서도 사용할 수 있다.

const age = 30 // 중괄호 안으로 들어가야만 사용할 수 있음

if(age > 19){
    var txt = '성인' //if문 밖에서도 사용 가능
}

console.log(txt)//성인

let, const: 블록 스코프(함수, if, for, while, try/catch문 등등)
블록 스코프는 코드 블록내에서 선언한 변수(지역변수)는 코드블록 내에서만 유효하다.
외부에서는 접근할 수 없다.