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

코딩앙마님의 자바스크립트 중급 강좌를 보며 정리한 내용입니다.

변수는 세 가지 단계를 거쳐 할당된다.

1. 선언단계 : 변수를 변수 객체에 등록. 이 변수 객체는 스코프가 참조하는 대상
2. 초기화단계 : 변수 객체에 등록된 변수를 위한 메모리 공간 확보. 이 때 변수는 undefined 로 초기화
3. 할당단계 : undefined 로 초기화된 변수에 실제 값 할당

🚫 Temporal Dead Zone 영역에 있는 변수들은 사용할 수 없음.
let과 const는 TDZ의 영향을 받고, 할당하기 전에는 사용할 수 없음 => 코드를 예측 가능하게 하고, 잠재적 버그를 줄일 수 있음

1) var

• var로 선언된 변수는 선언 단계와 초기화 단계가 한 번에 이루어짐.
• 초기화 단계에서 undefined로 초기화되기 때문에 변수 선언문 이전에는 변수에 접근해도 에러가 발생하지 않고 undefined를 반환함
• 함수 단위로 자신만의 scope를 갖음.

함수 스코프란? 유일하게 벗어날 수 없는 스코프가 함수인 것

//  함수 스코프 안에 선언된 var 은 밖에서 불러올 수 없음
function add(num1, num2) {
  var result = num1 + num2;
}
add(2, 3);
console.log(result) // ReferenceError : result is not defined

// 반면 if 스코프 안에 선언된 var은 밖에서 불러올 수 있음
const age = 30;
if (age > 19) {
  var txt = '어른'; // let, const는 if문 밖에서 변수 사용 불가
}
console.log(txt); // 어른

• 재선언, 재할당 가능

// var는 한번 선언된 변수를 다시 선언할 수 있다
var name = 'Hyunsoo';
console.log(name) // Hyunsoo

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

// 같은 상황에서 let은 에러를 뱉음
var name = 'Hyunsoo';
console.log(name) // Hyunsoo

var name = 'Rio';
console.log(name) // error!!!

• 선언하기 전에 사용할 수 있음 => 호이스팅

var name;
console.log(name); // undefined 선언은 호이스팅되지만 할당은 호이스팅 되지 않았음
name = 'Hyunsoo'; // 할당

// 같은 상황에서 let은 ReferenceError!
console.log(name); // ReferenceError
let name = 'Mike'; 

여기서 호이스팅이란 ? 스코프 내부 어디서든 변수가 최상위에 선언된 것 처럼 행동하는 것 !!

2) let, const (ES6+)

• let 선언된 변수는 선언 단계와 초기화 단계가 분리되어 이루어짐.
• const 로 선언된 변수는 선언 + 초기화 + 할당이 묶여있기 때문에 선언과 할당이 같이 이루어져야함.
• 스코프에 변수를 등록(선언단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어지므로 초기화 이전에 변수에 접근하면 참조 에러(ReferenceError) 발생.
• let : block 단위로 scope를 구분했을 때 예측하기 쉬운 코드를 작성할 수 있음. (재할당 가능)
• const : block 단위로 scope를 구분한다. (재선언, 재할당 불가능)

block 스코프란??

//  함수, if문, for문, while문, try/catch문 등 안에서 선언된 변수는 밖에서 불러올 수 없음
function add() {
	// Block-level Scope
}
if() {
	// Block-level Scope
}
for(let i = 0; i < 10; i++) {
	// Block-level Scope
}

🙋🏻‍♀️ let과 const 가 호이스팅 되지 않는다?? Nope!!

let age = 30;

function showAge() {
    console.log(age); 
  // let은 호이스팅 되었으나 이 부분은 TDZ 
 // let이 호이스팅되지 않았다면 showAge() 가 전역변수 age에 할당된 30으로 에러없이 출력되야함.
    let age = 20;
}
showAge() // error

let name;
name = 'Hyunsoo';

var age;
age = 30;

const hobby;
hobby = diving; // error!! const 는 선언하면서 바로 할당해야함