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

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

변수 let const 는 ES6 부터 생긴 것입니다. 이전에는 var 를 사용했습니다. var 는 let 과 크게 다르지 않습니다. 다른 점이 있다면 var 는 한번 선언된 변수를 다시 선언할 수 있습니다.

// var 는 아래처럼 동작하지만

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

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

// let 은 아래처럼 에러가 납니다.

letname = 'Mike';
console.log(name); // Mike

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

var 는 선언하기 전에 사용할 수 있습니다. 아래에 같이 써도 에러가 나지 않고 undefined 가 나옵니다.

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

// 위 코드는 아래와 같이 동작합니다.

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

var 로 선언한 모든 변수는 최상위로 올라간 것처럼 동작합니다. 이를 호이스팅 hoisting 이라고 합니다. 선언만 호이스팅 되고 할당은 호이스팅 되지 않아서 undefined 가 나오게 됩니다.

같은 상황에서 let 은 에러가 납니다.

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

let 도 호이스팅 되었지만 TDZ Temporla Dead Zone 때문에 에러가 발생합니다. TDZ 영역의 변수들은 사용할 수 없습니다. let 과 const 는 TDZ 의 영향을 받습니다. 할당을 하기 전에는 사용할 수 없습니다. 이는 코드를 예측 가능하게 하고 잠재적인 버그를 줄여줍니다.

let age = 30;
function showAge(){
	console.log(age);
}

// 위 코드는 문제가 되지 않지만 아래 코드는 문제가 된다. 

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

// 함수 안의 스코프 영역에서 호이스팅 되는데 TDZ 콘 때문에 작동 안하는 것

변수는 3단계 생성과정을 거칩니다. 1.선언 2.초기화 3.할당 (초기화는 undefined 를 할당 해주는 단계)
var 는 선언 및 초기화가 동시에 진행되고 할당이 진행되지만, let 은 선언, 초기화, 할당이 분리 되어서 진행됩니다. 호이스팅 되면서 선언은 하지만 초기화는 실제 코드에 도달해야 진행됩니다. 위에서 var 와 다르게 error 가 발생한 이유입니다.

const 는 선언, 초기화, 할당이 동시에 진행됩니다. let 과 var 는 선언만 해두고 나중에 할당하는 것을 허용하지만 const 는 안됩니다.

const gender;
gender = 'male';

// 선언하면서 바로 할당하지 않아서 에러!

var 는 함수스코프 functional-scoped 이고 let const 는 블록스코프 block-scoped 입니다. 블록스코프는 코드블록 내부에서 선언한 변수는 지역변수로 코드블록 내에서만 유효합니다. 외부에서 접근할 수 없습니다. 여기서 코드블록은 함수, if문, while문, try/catch문 을 의미합니다.

반면 함수스코프는 함수 내에서 선언된 변수만 지역변수가 됩니다. 아래처럼 if문 안에서 var 로 변수를 선언하면 중괄호 밖에서도 해당 변수를 사용할 수 있습니다.

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

// 아래처럼 함수안에서 선언해야 밖에서 사용할 수 없습니다.

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

예측 가능한 결과를 내고 버그를 줄이기 위해서는 const 를 사용하고, 변수가 바뀔 가능성이 있을 때 let 을 사용하고, var 는 사용하지 않는게 좋습니다.