[JS] 변수, 호이스팅, TDZ (코딩앙마 자바스크립트 중급)

김다빈·2023년 8월 6일

자바스크립트

목록 보기

27/36

🚩 변수 호이스팅

var는 선언 전에 사용할 수 있다.

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

변수의 선언보다 출력을 먼저 작성했음에도 에러가 발생하지 않는다.
이유는 var로 선언된 변수는 호이스팅 되기 때문.

실제로 var가 동작하는 방법
var name; //선언
console.log(name)
name = 'Mike' //할당

그럼 왜 console.log 찍으면 Mike가 안나오고 undefined가 출력되냐?
⇒ 선언은 호이스팅되지만 할당은 호이스팅되지 않음.

그럼 let 과 const 도 호이스팅 될까? ⇒ 가능!!

console.log(name) //Uncaught ReferenceError: Cannot access 'name' before initialization 
let name = 'Mike'

console.log(age) //Uncaught ReferenceError: Cannot access 'age' before initialization
const age = 30

엥 근데 왜 에러가 발생하느뇨...? 호이스팅 안되는거 아님? 😡
⇒ let 과 const 도 호이스팅 되는데 걔네는 TDZ 영향 받아서 그럼!
⇒ TDZ가 뭔데??!!!!

🚩 TDZ(Temporal Dead Zone)

TDZ란?
스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미

TDZ 영향을 받으면 호이스팅되어서 변수의 선언이 끌어올려져도 실제 값이 할당되기 전에는 변수 사용 불가능!

✅ 변수의 생성 과정

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

var는 선언과 초기화가 동시에 된다.
그래서 선언과 동시에 undefined까지 할당이 완료된 상태이기 때문에 할당 전에 호출해도 에러가 발생하지 않음.

let은 선언 단계와 초기화 단계가 분리되어 진행된다.
호이스팅될 때는 선언만 끌어올려지므로 초기화되지 않음(=undefined 조차 할당되지 않음) 따라서 ReferenceError가 발생

const는 선언 + 초기화 + 할당 모두 동시에 진행된다.

🚩 스코프 Scope

✅ 블록 스코프

코드 블록 내에서만 사용할 수 있음 (=블록 범위를 벗어나면 사용할 수 없음)
let, const 해당

예제
const age = 30

if(age > 19){
  var txt_V = '성인'
  const txt_C = '성인'
  let txt_L = '성인'
}

console.log(txt_V) //성인
console.log(txt_C) //ReferenceError!
console.log(txt_L) //ReferenceError!
var 는 블록을 벗어나도 실행되지만 const 와 let 은 주어진 블록을 벗어나면 에러가 발생한다.

✅ 함수 스코프

함수 내에서만 사용할 수 있음 (=함수 범위를 벗어나면 사용할 수 없음)
var 해당

예제
function add(num1, num2) {
  var result = num1 + num2
}

add(2,3)
console.log(result) //ReferenceError!
var는 함수 밖을 벗어나면 사용할 수 없다. (const 와 let 역시 불가능)