호이스팅과 TDZ

📌 호이스팅(Hoisting)

: 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

var는 함수 스코프. 함수 내에서 선언되면 함수 밖에서 사용할 수 없다. let, const는 블록 스코프. 모든 코드 블록에서 선언된 변수는 코드 블록 내에서만 유효하며 외부에서는 접근할 수 없다.

자바스크립트에서는 아래와같이 작성해도 에러가 나지 않는다.

console.log(name);   // undefined
var name = "홍길동";

파이썬에서는 에러 발생

print(name)     # NameError: name 'name' is not defined
name = "홍길동"

자바스크립트에서 선언과 할당을 나중에 해주었는데도 오류가 나지 않는 이유는 호이스팅(Hoisting)때문이다. 실제로 동작하는 모습은 다음과 같다.

var name;
console.log(name);
name = "홍길동";

변수의 선언 부분이 맨 위로 끌어올려지는 것을 호이스팅이라고 한다. undefined가 출력되는 이유는 변수의 선언만 올려지고 할당은 올려지지 않기 때문이다. 즉, 선언은 호이스팅 되지만 할당은 호이스팅 되지 않는다.

그러나

let과 const의 경우 에러가 발생한다.

console.log(a);
const a = "AAA";
console.log(a);

var와는 다른 결과를 내는 이유는 let과 const가 TDZ의 영향을 받기 때문이다. TDZ (Temporal Dead Zone)는 변수 선언 이전에 변수를 참조하는 영역이다. 해당 영역에서 선언 이전에 참조한 변수는 참조 에러가 발생한다. 위의 코드의 경우 첫번째 줄이 TDZ에 해당한다.

일반적으로 변수의 생성과정은 3단계로 나눌 수 있다.

1. 선언
2. 초기화
3. 할당

var는 선언과 동시에 undefined로 초기화가 이루어진다. let은 선언과 초기화가 분리되어 진행된다. 호이스팅되면서 선언단계가 이루어지지만 초기화 단계는 실제코드에 도달했을 때 이루어지기 때문에 ReferenceError가 발생한다. const는 선언과 할당을 같이 해주어야한다.

이러한 이유로 var는 에러가 발생하지 않지만 let과 const는 에러를 발생시킨다.

📌 스코프

스코프란? 변수에 접근할 수 있는 범위

var : 함수 스코프 (function-scoped)

함수 스코프란? 함수 안에서 선언되면 함수 밖에서 사용할 수 없다.

const age = 30;

if (age > 19) {
  var txt = "성인";
}

console.log(txt);

// 결과
성인

var를 let으로 바꾸면 에러 발생.

let, const : 블록 스코프 (block-scoped)

블록 스코프란? 모든 코드 블록에서 선언된 변수는 코드 블록 내에서만 유효하며 외부에서는 접근할 수 없다.

말 그래도 {}이 생성될 때마다 새로운 스코프가 형성된다. 블록을 벗어나면 사용할 수 없다.

function add() {
   // Block Level Scope
}

if () {
   // Block Level Scope
}

for (let i = 0; i < 10; i++) {
   // Block Level Scope
}