자바스크립트 - 실행컨텍스트

_dodo_hee·2023년 11월 20일
1

실행 컨텍스트 🔥
실행 컨텍스트에 대해 말해보세요 🔥🔥

실행 컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체
자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념

자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다.

  • 호이스팅이 발생한다.(선언된 변수를 위로 끌어올린다.)
  • 외부 환경 정보를 구성한다.
  • this 값을 설정한다.

실행 컨텍스트 구성

  • 전역공간은 자동으로 컨텍스트로 구성된다.
  • 함수를 실행한다.
  • eval()함수를 실행한다.
  • block을 만든다 (ES6+)
var a = 1; // 전역 컨텍스트
function outer () { // outer 컨텍스트
  function inner () { // inner 컨텍스트
    console.log(a); // undefined
    var a = 3;
    console.log(a); // 3
  }
  inner();
  console.log(a); // 1
}
outer();
console.log(a); // 1
  1. 프로그램 실행 : [전역컨텍스트]
  2. outer 실행 : [전역컨텍스트, outer]
  3. inner 실행 : [전역컨텍스트, outer, inner]
  4. inner 종료 : [전역컨텍스트, outer]
  5. outer 종료 : [전역컨텍스트]

실행 컨텍스트 구성할때 생기는 것

VariableEnvironment

  • 현재 컨텍스트 내의 식별자들의 대한 정보
  • 외부 환경 정보
  • 선언 시점의 LexicalEnvironment의 스냅샷 (최초 실행 시의 스냅샷을 유지)

LexicalEnvironment

  • 처음에는 VariableEnvironment와 같음
  • 변경 사항이 실시간으로 반영 됨
  • 환경 레코드로 인해서 호이스팅이 발생한다.
  • 외부 환경참조로 인해 스코프와 스코프체인이 형성된다.

ThisBining

  • 식별자가 바라봐야할 대상 객체

환경 레코드와 호이스팅

자바스크립트 엔진은 코드를 실행하기전에 식별자를 수집한다.

환경 레코드

현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.

  • 매개변수 식별자
  • 함수 자체
  • 함수 내부의 식별자

Host Object (호스트 객체)

  • 전역 실행 컨텍스트는 변수 객체를 생성하는 대신 전역 객체를 활용한다.
  • 브라우저의 Window 객체, Node의 Global 객체 등이 해당한다.
  • 이들은 Host Object로 분류된다.

즉, 코드가 실행 되기 전에 자바스크립트의 엔진은 이미 실행 컨텍스트에 속한 변수명들을 모두 알고 있게 되는 셈이다.

호이스팅

자바스크립트 엔진의 실제 동작 방식 대신에 자바스크립트 엔진은 "식별자들을 최상단으로 끌어올려놓은 다음, 실제 코드를 실행한다" 라고 생각해 코드 해석에 문제되는 것이 없다.

자바스크립트 엔진이 실제로 변수를 끌어올리지 않지만, 편의상 끌어올리는 것이라고 간주한다.

외부환경참조와 스코프

scope

스코프란 식별자에 대한 유효범위이다.

  • Scope A의 외부에서 선언한 변수는, A의 외부/내부 모두 접근 가능하다.
  • A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다.

자바스크립트는 오직 함수에 의해서 스코프가 생성된다.

scope chain

  • 식별자의 유효범위를 안에서 바깥으로 차례로 검색해나가는 것
  • 이를 가능하게 하는 것이 외부환경참조이다.

실행 컨텍스트 스택

생성된 실행 컨텍스트는 스택으로 관리된다.

자바스크립트 엔진은 먼저 전역 코드를 평가하여 저역 실행 컨텍스트를 생성한다.
함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다.

소스코드의 타입

4가지의 타입의 소스코드는 실행 컨텍스트를 생성한다.

전역 코드 global code

  • 전역 코드 전역에 존재하는 소스코드를 말한다.
  • 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다.

전역 변수를 관리를 위해 최상위 스코프인 전역 스코프 생성 필요
var 키워드로 선언된 전역 변수, 함수 선언문으로 정의된 전역 함수를
전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야한다.
전역코드 평가 -> 전역 실행 컨텍스트가 생성.

함수 코드 function code

  • 함수 내부에 존재하는 소스코드를 말한다.
  • 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다.

함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리.
생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야한다.
함수 코드 평가 -> 함수 실행 컨텍스트 생성.

eval 코드 eval code

  • 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다.

strict mode에서 자신만의 독자적인 스코프를 생성한다.
eval 코드 평가 -> eval 실행 컨텍스트 생성.

모듈 코드 module code

  • 모듈 내부에 존재하는 소스코드를 말한다.
  • 모듈 내부의 함수,클래스 등의 내부코드는 포함되지 않는다.

모듈별로 독립적인 모듈 스코프를 생성한다.
모듈 코드 평가 -> 모듈 실행 컨택스트 생성.

소스코드의 평가와 실행

평가 과정

  • 실행 컨텍스트를 생성
  • 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록

실행 과정

  • 선언문을 제외한 소스코드가 순차적으로 실행되기 시작(런타임)
  • 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득.
  • 변수 값 변경과 같은 소스코드 실행결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록
profile
무럭무럭 자라나는 도도 개발성장일기

0개의 댓글