TDZ와 스코프

Sunghoman·2022년 9월 23일

JavaScript

목록 보기

5/11

TDZ가 뭐야

Temporal Dead Zone: 일시적 사각지대 라고 한다.

저번 호이스팅에서
var는 선언하기 전에 호출할 수 있는데,
그 이유는 호이스팅이 일어나기 때문이라고 했음

호이스팅은 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 끌어올려지는 것을 의미함

??: "근데 변수 값 백날 호출해도 undefined만 뜨던데여?"

ㅇㅇ 왜냐면 TDZ에 갇혀서 그런거임

console.log(name); //TDZ 
const name = "Sungho"; //변수 선언 및 할당
console.log(name); //사용 가능
TDZ 영역에 있는 변수들은 사용 불가능함
왜냐면 let이랑 const는 TDZ에 영향을 받아서임(갇혀있어서)

즉, 참조 오류가 나는 구간인 스코프의 시작부터 초기화 지점까지의 구간
초기화가 되기 전까지 TDZ에서 초기화 될 때까지 "죽은 상태"임
그래서 선언 전까지는 사용이 불가능함

TDZ: 선언 전에 변수를 사용하는 것을 허용하지 않는 개념상의 공간임

이 말은 할당 전까지는 사용할 수 없다는 말인데,
코드를 예측가능하게 하고, 잠재적으로 버그를 줄일 수 있다는 장점이 있음

let age = 27;
function myAge() {
  console.log(age);
}// 안됨

let age = 27;
function myAge() {
  console.log(age);
  let age = 27;
} // 이것도 안됨

스코프가 뭐임?

변수나 함수에 접근할 수 있는 위치를 말하는거임

근데 var는 "함수 스코프",
let이랑 const 는 "블록 스코프"임

뭐가 다르냐면 블록 스코프에서 선언된 변수는
블록 내에서만 유효하며 외부에서 접근이 불가능

즉, 블록 스코프는 지역변수임

여기서 말하는 블록은 function, if문, for문, while문, try~catch문임

근데 함수 스코프는 함수 내에서 선언된 변수만 지역 스코프가 되는거임

const age = 27;

if (age > 19) {
  var txt = 'adult';
}

console.log(txt); //'adult'

이렇게 if문 안에서 var를 통해 선언한 변수는 if문 밖에서도 사용 가능함
근데 let이랑 const는 이렇게 못씀
{} 안에서만 쓸 수 있음

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

에러뜸
var도 함수 내에서 사용되면 함수 밖에서 사용 불가능함

스코프 체인

함수는 전역에서 정의할 수 있고,
함수 내부에서 정의할 수도 있음

함수 내부에서 정의된 것을 '중첩 함수'
중첨 함수를 포함하는 함수를 '외부 함수'라고 함

근데 함수가 중첩되면 스코프도 중첩되는거 아님?

ㅇㅇ 맞음

함수가 중첩 가능하니까
그 함수의 지역 스코프도 중첩될 수 있는데,

이는 스코프가 함수에 의해 계층적 구조를 갖게된다는걸 의미함
이때, 외부함수의 짖역스코프를 중첩 함수의 상위 스코프라고 지칭함.

var x = "global x";
var y = "global y";

function outer() {
  var z = "outer local z";
  console.log(x); //global x
  console.log(y); //global y
  console.log(z); //outer local z
  
  function inner() {
    var x = "inner local x";
    console.log(x); //inner local x
    console.log(y); //global y
    console.log(z); //outer local z
  }
  inner();
}
outer();

console.log(x) //global x
console.log(z) //RefernceError: z is not defined