JavaScript 스코프, 렉시컬 환경, 실행 컨텍스트 개념 요약 정리

스코프 (Scope)

• 코드의 최상위 범위로, 프로그램 전체에서 접근해 사용할 수 있다.

• 이 범위에 선언된 변수와 함수를 ‘전역 변수’와 ‘전역 함수’라고 한다.

• 코드 안정성을 위해 전역 스코프 사용은 최소화 하는 것이 좋다.

• 함수 또는 특정 코드 블록에서만 접근해 사용할 수 있다.

• 해당 스코프와 하위 스코프에서만 접근할 수 있으며, 외부에서는 접근할 수 없다.

• 이 범위에 선언된 변수와 함수를 ‘지역 변수’와 ‘지역 함수’라고 한다.

• 함수 내에서 선언된 변수의 유효 범위를 ‘함수 스코프’라고 한다.

• {}

  내에서 선언된 변수의 유효 범위를 ‘블록 스코프’라고 한다.

렉시컬 환경 (Lexical Environment)

환경 레코드

(Environment Record)

Environment Record is a specification type used to define the association of Identifiers to specific variables and functions, based upon the lexical nesting structure of ECMAScript code.

-

ECMAscript

• 전역 환경 레코드(GER : Global Environment Record)

  • 전역 객체 등 최상위 스코프에 대한 바인딩을 제공한다.

  • ES6 이후

    var

    전역 변수와

    let

    ,

    const

    전역 변수를 구분하기 위해 객체 환경 레코드와 선언적 환경 레코드로 구성되기 시작했다.

    • let

      ,

      const

      식별자는 전역 객체의 프로퍼티가 되지 않고 개념적인 블록 내에 존재하게 된다.

• 객체 환경 레코드(OER : Object Environment Record)

  • var

    전역변수, 선언문 전역함수, 빌트인 전역 프로퍼티, 빌트인 전역함수, 빌트인 객체를 관리한다.

  • 전역 객체의 프로퍼티와 메소드가 된다.

    • 이 변수는 전역 객체에

      delete

      를 통해 지울 수 없다.

  • 전역 객체 또는

    with

    블럭에서 사용된다.

    • with

      구문은 새로운 스코프를 생성하고, 코드를 모호하게 해

      사용하지 않을 것을 권장

      한다.

• 선언적 환경 레코드(DER : Declarative Environment Record)

  • let

    ,

    const

    식별자들의 바인딩을 관리한다.

  • 함수 환경 레코드(Function Environment Record)

    • 매개변수, arguments, 내부 지역 변수 및 중첩 함수를 관리한다.

  • 모듈 환경 레코드(Module Environment Record)

    • 모듈의 외부 스코프를 나타낸다.

외부 렉시컬 환경 참조(Outer Lexical Environment Reference)

실행 컨텍스트 (Execution Context)

• 실행 컨텍스트가 활성화 될 때 JavaScript 엔진은 실행에 필요한 환경 정보들을 수집한다.

• 개발자가 직접 접근하거나 조작할 수 없다.

구조

1ExecutionContext = {
2	VariableEnvironment: {
3		EnvironmentRecord: {
4			...variables,
5			...functions,
6		},
7		outer: <GlobalLexitcalEnvironment | OuterLexicalEnvironment | undefined>,
8	},
9	LexicalEnvironment: {
10		EnvironmentRecord: {
11			...variables,
12			...functions,
13		},
14		outer: <GlobalLexitcalEnvironment | OuterLexicalEnvironment | undefined,
15	},
16	ThisBinding: <GlobalThisValue | ThisValue | undefined>
17}

• Variable Environment

  • 선언 지점의 렉시컬환경에 대한 스냅샷으로 생성된 값을 유지한다.

  • 이를 복사하여 Lexical Environment를 생성한다.

• Lexical Environment

  • 최초 생성 시에는 Variable Environment와 동일하지만 코드 진행에 따라 변경된다.

• this Binding

  • 현재 실행 컨텍스트에 대한

    this

    를 저장한다.

  • 함수 호출 패턴에 의해 다른 값이 저장된다.

    • 함수가 객체의 메소드로 사용될 때는 해당 객체로 바인딩된다.

    • 함수를 호출하는 주체가 명확하지 않을 경우 전역 객체로 설정된다.

      • strict 모드에서는

        undefined

        로 설정된다.

평가, 실행, 소멸

• 평가

  1. 실행 컨텍스트 생성

  2. this 바인딩

  3. 변수, 함수 등의 선언문 실행

  4. 렉시컬 환경에 식별자 바인딩

• 실행

  1. 코드 순차 실행 (인터프리터)

  2. 실행 컨텍스트에 실행 결과 반영

종류

• 전역 실행 컨텍스트(Global Execution Context)

  • 처음

    script

    코드가 실행될 때 자동으로 생성된다.

  • 변수 객체를 생성하는 대신 JavaScript 런타임 환경이 제공하는 전역 객체를 사용한다.

    • 내장 객체가 아닌 호스트 객체를 사용하는 것인데, 브라우저 환경에서는

      window

      , Node.js 환경에서는

      global

      객체를 사용한다.

  • 전역 변수나 전역 함수 등의 전역 스코프를 관리한다.

    • var

      키워드와 함수 선언문이 여기에 포함된다.

  • this

    를 전역 객체로 설정한다.

• 함수 실행 컨텍스트(Function Execution Context)

  • 함수가 호출될 때마다 해당 함수의 실행 컨텍스트로 생성되어 콜 스택에 푸시된다.

  • 함수 내부의 지역 변수, 매개변수, arguments 객체를 관리한다.

  • 생성한 지역 스코프를 스코프 체인으로 연결한다.

• Eval 실행 컨텍스트(Eval Execution Context)

  • eval()

    함수를 사용할 때 생성되어 push 된다.

  • strice mode에서 독자적인 스코프를 생성한다.

  • 보안과 성능 이슈로 인해 MDN에서

    사용하지 말 것

    을 경고하고 있다.

• 모듈 실행 컨텍스트(Module Execution Context)

  • ES6 부터 도입된 모듈로 인해 추가되었다.

  • 모듈 스코프를 생성하여 모듈 단위로 코드를 구성할 수 있다.

  • 모듈의 실행이 끝나면 파기된다.

참고
JS Execution Context (실행 컨텍스트) 란?
실행 컨텍스트와 자바스크립트의 동작 원리

[Javascript] 실행 컨텍스트란 ? (Execution Context)

자바스크립트 - 실행 컨택스트(Execution Context) 와 렉시컬 환경(Lexical Environment)

[JavaScript] 렉시컬 환경

자바스크립트 실행컨텍스트#1 - 환경 레코드 | 변수의 저장과 참조 방식

Variable Environment vs lexical environment

[Javascript] with 명령에 대하여

코어 자바스크립트 - 정재남