변수에 대하여

⤴️ 호이스팅

 

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

var name

console.log(name) //undefined

name ="Mike" //할당

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

 

 

[let]

console.log(name) //ReferenceError

let name ="Mike" //할당

같은 상황에서 let은 error가 발생한다.

 

그렇다면 let은 호이스팅이 되지 않나? 그렇지 않다. let도 호이스팅이 발생한다.

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

 

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

 

 

 

[TDZ (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문 등등)
블록 스코프는 코드 블록내에서 선언한 변수(지역변수)는 코드블록 내에서만 유효하다.
외부에서는 접근할 수 없다.