[JavaScript]호이스팅과 컨텍스트

윤지·2024년 10월 25일

목록 보기

8/30

호이스팅

호이스팅: 자바스크립트 엔진이 코드 실행 전 변수와 함수의 선언부를 스코프의 최상단으로 끌어올리는 동작. 면접단골

자바스크립트는 인터프리터 기반 언어로, 코드를 순차적으로 실행하지만 호이스팅으로 인해 선언부가 먼저 처리됨.

변수 호이스팅
```
console.log("name"); //undefined
console.log("age"); //undefined
var name = "윤지";
var age = 24;
```
- var: undefined로 초기화됨
- let과 const: 초기화되지 않은 상태로 메모리에 등록, 일시적 사각지대(TDZ)에 진입
  - 코드 실행 중 명확한 값 할당 시에만 에러 없이 접근 가능함
함수 선언식 호이스팅
```
print(); // 호출 가능 (호이스팅 적용)

function print() {
  console.log("a");
}
```
- 함수 전체가 메모리에 등록됨
- 코드의 어디에서든 호출 가능함
함수 표현식의 호이스팅
```
print(); // 오류 발생 (Cannot access 'print' before initialization)

const print = function () {
  console.log("a");
};
```
- 변수 선언부만 호이스팅되고, 변수에 undefined 할당 (var로 선언 시)
- let이나 const로 선언된 함수 표현식은 초기화되지 않은 상태로 TDZ에 머무름
- 선언 이전 호출 시 에러 발생함

호이스팅의 발생 이유 이해를 위해 실행컨텍스트에 대한 이해 필요

실행컨텍스트: 자바스크립트를 실행하는 독립적인 공간

실행 컨텍스트의 역할과 중요성

실행 컨텍스트: 자바스크립트 코드 실행 환경. '레코드' 공간에 변수와 함수 이름을 미리 기록하여 다음 기능 수행:

구성 요소

실행 컨텍스트의 두 가지 주요 구성 요소:

Record: 변수와 함수 선언을 저장하는 컴포넌트
Outer: 상위 스코프를 연결하는 통로
- 내부 스코프에서 변수 찾을 때, 상위 스코프(외부 환경)를 순서대로 탐색
- 이 과정을 스코프 체이닝이라고 함
- 최종적으로 전역 스코프까지 찾아가고, 거기에도 없으면 "name is not defined" 에러 발생

실행 컨텍스트 순서