자바스크립트 호이스팅 이해

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보자~중급자 개발자 (자바스크립트 기본 문법 이해 필요)

핵심 요약

• 호이스팅(Hoisting)은 var 변수와 함수 선언을 컴파일 단계에서 스코프 상단으로 이동시키는 자바스크립트의 기본 동작
• let/const는 TDZ(Temporal Dead Zone)로 인해 선언 전 접근 시 ReferenceError 발생
• 함수 선언(function declaration)은 전체 코드(이름 + 본문)가 호이스팅되어 실행 전에 호출 가능

섹션별 세부 요약

1. 호이스팅 정의

• 정의: 자바스크립트는 코드 실행 전에 선언만 호이스팅하고 초기화는 실행 단계에서 처리
• var: 선언 시 undefined로 초기화, 선언 전에 접근 가능
• let/const: 선언은 호이스팅되지만 TDZ에 머무름, 초기화 전 접근 시 에러 발생

2. 호이스팅 실행 단계

• 컴파일 단계:

- var 변수: 메모리 할당 후 undefined로 초기화

- let/const: TDZ 상태로 메모리 할당 없음

- 함수 선언: 함수 이름과 본문 전체가 호이스팅

• 실행 단계:

- var 변수: 할당값이 적용됨

- let/const: 선언 위치에서만 초기화

- 호이스팅된 함수: 선언 전에 호출 가능

3. TDZ(Temporal Dead Zone) 예시

• let/const 접근 시:

- 선언 전: ReferenceError

- 선언 후: 정상 접근 가능

• 예시 코드:

```javascript

console.log(a); // undefined (var 호이스팅)

console.log(b); // ReferenceError (let TDZ)

console.log(greet()); // "Hello" (함수 호이스팅)

```

결론

• let/const 사용 시 TDZ 주의하고, 함수 표현식(function expression)은 호이스팅되지 않으므로 실행 순서를 명시적으로 관리해야 함.
• 실무에서는 var보다 let/const를 선호해 TDZ로 인한 버그를 방지하는 것이 권장됨.