23 - 실행 컨텍스트 (Execution Context)

2022. 9. 19.·🎨 프론트엔드 공부/JS & TS

모던 자바스크립트 Deep Dive 정리

1. 자바스크립트 소스코드(실행 가능한 코드)의 4가지 종류

▶ 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다

1-1. 전역 코드

▶ 최상위 스코프인 전역 스코프를 생성

▷ 전역 코드가 평가되면 전역 실행 컨텍스트가 생성됨

1-2. 함수 코드

▶ 지역 스코프를 생성하고 스코프 체인에 연결

▷ 함수 코드가 평가되면 함수실행 컨텍스트가 생성됨

1-3. eval 코드

▶ eval 코드는 strict mode에서 독자적인 스코프를 생성

▷ eval 코드가 평가되면 eval 실행 컨텍스트가 생성됨

1-4. 모듈 코드

▶ 모듈별로 독립적인 모듈 스코프를 생성

▷ 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성됨

2. 소스코드의 평가와 실행

▶ 모든 소스코드는 평가 -> 실행 순으로 처리된다

 

▶ 소스코드 평가

▷ 실행 컨텍스트 생성

▷ 변수, 함수 등의 선언문을 먼저 실행하고 실행 컨텍스트가 관리하는 스코프에 등록 (해시테이블 형태)

 

▶ 소스코드 실행

▷ 소스코드 평가과정이 끝나면 순차적으로 소스코드가 실행되는 런타임이 시작됨

▷ 소스코드 실행에 필요한 정보를 스코프에서 참조해서 실행

▷ 변수 값 변경시 피드백 발생

3. 실행 컨텍스트의 역할

3-1. 전역 코드 평가

▶ 선언문이 먼저 실행됨

▶ 생성된 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록됨

▶ var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 된다

3-2. 전역 코드 실행

▶ 런타임이 시작되고 전역 코드가 순차적으로 실행되어 값이 할당되고 함수가  호출됨

3-3. 함수 코드 평가

▶ 함수 호출에 의해 코드 실행 순서가 변경되어 함수 내부로 진입

▶ 매개 변수와 지역 변수 선언문이 실행되고 생성된 변수들이 지역 스코프에 등록됨

▶ arguments 객체가 생성되고 this 바인딩도 결정됨

3-4. 함수 코드 실행

▶ 다시 런타임이 시작됨

▶ 스코프 체인을 검색하며 코드를 실행

▶ 함수 호출이 종료되면 함수 호출 이전으로 되돌아감

그래서 실행 컨텍스트란?

▶ 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역

▷ 코드가 실행되려면 아래의 스코프, 식별자, 코드 실행 순서 등의 관리가 필요

 

▶ 선언에 의해 생성된 모든 식별자를 스코프를 구분하여 등록

▶ 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리

 

▶ 스코프는 중첩 관계에 의해 스코프 체인을 형성해야 함

▷ 스코프 체인을 통해 상위 스코프로 이동하며 식별자를 검색

 

▶ 현재 실행중인 코드의 순서를 변경(함수 호출로 인한) 하고, 다시 돌아갈 수 있어야 함

4. 실행 컨텍스트 스택

▶ 실행 컨텍스트는 스택 자료구조로 관리된다

▷ 전역 실행 컨텍스트가 가장 먼저 push되어 있다 (기저)

 

▶ 최상위 실행 컨텍스트는 언제나 현재 실행중인 코드의 실행 컨텍스트이다

5. 렉시컬 환경 (Lexical Environment)

▶ 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조

▷ 실행 컨텍스트를 구성하는 컴포넌트

 

▷ 실행 컨텍스트 스택 : 코드의 실행 순서를 관리

▷ 렉시컬 환경 : 스코프와 식별자를 관리

 

렉시컬 환경은 다음 2개의 컴포넌트로 구성된다

5-1. 환경 레코드

▶ 스코프에 포함된 식별자를 등록하고, 등록된 식별자에 바인딩된 값을 관리하는 저장소

▷ 소스코드 타입에 따라 관리하는 내용에  차이가 있다

5-2. 외부 렉시컬 환경에 대한 참조

▶ 상위 스코프를 가리킴

▷ 외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구현

6. 실행 컨텍스트의 생성과 식별자 검색 과정

6-1. 전역 객체 생성

6-2. 전역 코드 평가

아래 태스크가 순차적으로 실행됨

 

▶ 전역 실행 컨텍스트 생성

 

▶ 전역 렉시컬 환경 생성

    ▶ 전역 환경 레코드 생성

        ▶ 객체 환경 레코드 생성

        ▶ 선언적 환경 레코드 생성 (let, const로 선언한 변수가 위치)

    ▶ this 바인딩 (전역 환경 레코드에만 존재)

    ▶ 외부 렉시컬 환경에 대한 참조 결정 (상위 스코프로 올라갈지 여부)

6-3. 전역 코드 실행

▶ 함수가 있다면, 6-2. 전역 코드 평가와 같은 과정이 '함수'로 대치되어 실행됨

7. 실행 컨텍스트와 블록 레벨 스코프

▶ let, const 키워드로 선언한 변수는 블록 레벨 스코프를 따른다

▷ 따라서 조건문이나 반복문 등의 코드 블록이 실행되면 선언적 환경 레코드를 갖는 렉시컬 환경을 새롭게 생성하여

▷ 기존의 전역 렉시컬 환경을 교체한다

'🎨 프론트엔드 공부/JS & TS' 카테고리의 다른 글
  • 25 - 클래스
  • 24 - 클로저 (Closure)
  • 22 - this
  • 21 - 빌트인 객체
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (510)
      • 🎨 프론트엔드 공부 (247)
        • JS & TS (86)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
23 - 실행 컨텍스트 (Execution Context)
상단으로

티스토리툴바