[JavaScript] 실행 컨텍스트와 호이스팅

 

실행 컨텍스트란

코드를 실행하는데 필요한 환경 정보(코드 실행에 영향을 주는 조건이나 상태)를 모아놓은 객체를 말한다. 자바스크립트가 식별자 결정을 효율적으로 하기 위해 사용하는 수단이다. 

 

- 전역 컨텍스트: 브라우저가 스크립트를 실행할 때 생성. 모든것을 관리하는 환경으로, 페이지가 종료되면 사라짐. 안에 환경 레코드를 포함한다.

- 함수 컨텍스트: 함수 호출 시 생성. 함수 실행이 마무리되면 사라짐.

 

자바스크립트 엔진이 코드를 실행할 때, 호출 스택(call stack)에 실행 컨텍스트를 push한다. 코드 내에서 함수를 호출할 때마다 호출 스택에 실행 컨텍스트가 push된다. 

자바스크립트는 싱글 스레드로 작업을 처리하는데, 따라서 호출 스택에 쌓인 컨텍스트를 위에서부터(=가장 최근 들어온 것부터) 실행한다. 작업이 끝난 컨텍스트는 pop되고, 아래에 있는 다음 컨텍스트를 실행한다. 

 

식별자 결정

스코프 포스팅에서 설명했던 스코프 체이닝이 실행 컨텍스트를 통해 이루어진다. 

실행 컨텍스트 내에는 '렉시컬 환경 컴포넌트'가 있는데, 자바스크립트 코드를 실행하기 위해 자원을 모아둔 곳을 말한다. 렉시컬 환경 컴포넌트는 두 가지로 구성되어있다.

 

- 환경 레코드(Environmental Record): 유효 범위 안의 '식별자'와, '식별자에 바인딩된 결과값'을 기록해두는 객체.

- 외부 렉시컬 환경 참조(Outer Lexical Environmental Reference): 함수를 둘러싸고 있는 코드가 속한 렉시컬 환경 컴포넌트의 참조가 저장되는 곳. 중첩된 함수 안에서 바깥의 코드에 정의된 변수를 읽거나 쓸 때 사용된다. 스코프 체이닝에서 거슬러 올라가며 변수를 검색할 수 있는 것도 외부 렉시컬 환경 참조 안에 참조가 저장되어 있기 때문. 

 

호이스팅이란

변수나 함수를 선언하기 전에 호출을 먼저 해도 오류없이 실행되는 현상.

 

자바스크립트 엔진은 코드를 실행할 때 먼저 전체 코드를 읽은 후 변수나 함수 등의 선언 정보를 실행 컨텍스트에 미리 기록해둔다. 이를 생성 단계라고 하는데, 이 생성 단계에서 선언 정보가 기록되는 곳이 실행 컨텍스트 안의 환경 레코드이다. 

 

1. 생성 단계: 스캔하고 준비하는 단계

- 실행 컨텍스트 생성

- 선언문만 실행해서 환경 레코드에 기록함. 이 과정에서 var변수는 undefined로 자동 초기화된다. 

 

2. 실행 단계: 선언문 외의 나머지 코드를 순차 실행하는 단계

- 환경 레코드를 참조하거나 업데이트함. 

 

변수에서의 호이스팅

따라서 호이스팅이 발생하는 건, 생성 단계를 먼저 거쳐 변수에 이미 undefined가 들어있기 때문에 오류 없이 코드가 실행되기 때문이다.

단, 변수를 const나 let 으로 선언했을 때에는 var처럼 값이 초기화되지 않기때문에 선언문이 뒤에 오면 참조 오류가 발생한다. 

console.log(a); //undefined 출력
console.log(b); //referenceError 발생

var a = 'var변수';
const b = 'const변수';

 

함수에서의 호이스팅

- 함수 표현식으로 선언 시: var 변수 안에 함수를 넣어 선언하는 경우 타입 에러가 발생한다. let/const는 변수 호이스팅과 마찬가지로 참조 오류 발생.

func1();

//함수 표현식으로 선언
var func1 = () => {
  console.log("print func1");
}

- 함수 선언문으로 선언 시: 선언과 동시에 함수 객체가 생성되며, 이를 환경레코드에 기록한다. 따라서 호이스팅이 발생한다. 

func2();

//함수 선언문으로 선언
function func2() {
  console.log("print func2");
}

---

 

참고 자료

제로초 블로그 https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0

황준일 블로그 https://junilhwang.github.io/TIL/Javascript/Domain/Execution-Context/#_1-%E1%84%80%E1%85%A2%E1%84%82%E1%85%A7%E1%86%B7

우아한 Tech https://youtu.be/EWfujNzSUmw

이소 히로시, 『모던 자바스크립트 입문』, 길벗