[JavaScript] 변수, 호이스팅, TDZ

변수

- 한번 선언된 변수를 다시 선언할 수 있다. (let은 두 번 선언할 시에 error 발생)

var name = "Mike"; 
console.log(name); // Mike

var name = "Jane";
console.log(name); // Jane

- 선언하기 전에 사용할 수 있다. -> 호이스팅(hoisting) 선언은 호이스팅 되지만, 할당은 호이스팅 되지 않는다. 

 

호이스팅 이란? 

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

var name; 

console.log(name); // undefined 할당은 호이스팅 되지 않기때문에 값은 undefined

name = 'Mike'; // 할당

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

위와 같이 var는 호이스팅 되지만, let의 경우에는 error를 출력한다. 

let, const 도 호이스팅이 되지만, let이 할당받기 전의 영역은 Temporal Dead Zone(TDZ)의 영향을 받아 변수를 사용할 수 없다.

-> 코드를 예측 가능하게 하고, 잠재적인 버그를 줄일 수 있음. 

 

 

자바스크립트에서 변수의 생성과정

크게 다음과 같은 3가지로 나눌 수 있는데, 

1. 선언 단계

2. 초기화 단계

3. 할당 단계

 

var는 선언 단계와 초기화 단계가 동시에 일어난다. -> undefined로 초기화 

 

let은 선언 단계와 초기화 단계가 분리되어 진행된다. -> 실제 코드에 도달했을 때, 초기화가 진행되기 때문에 위처럼 reference error를 발생시킨다.

 

const는 1. 선언 + 초기화 + 할당이 동시에 일어나 (var, let처럼 선언, 초기화를 하고 할당을 나중에 할 수 없음)

let name;
name = 'Mike';

var age;
age = 30;

const gender;
gender = 'male'; // 선언 하면서 할당을 하지 않아 Syntax Error 발생

 

var

: 함수 스코프(function-scoped) -> 함수 내에서 사용한 변수는 그 함수 내에서만 지역변수가 된다.

 

 

let, const

: 블록 스코프(block-scoped) -> 블록 단위 내에서만 let, const로 선언된 변수(블록 내 지역변수)를 사용 가능하다. (try-catch, if, for, while문 등)

 

// 블럭 스코프

const age = 30;
if(age>19) {
	var txt = '성인'
}
console.log(txt); // 성인

txt가 let, const로 선언되면 if 블록 중괄호 안에서만 사용 가능

// 함수 스코프

function add(num1, num2) {
    var result = num1 + num2;
}
add(2, 3);
console.log(result); // ReferenceError

var로 선언된 변수는 함수 밖에서 사용될 수 없다. -> 유일하게 벗어날 수 없는 scope는 함수라고 생각하자.