Scope와 Closure 이해하기 위한 선행 학습 (Execution Context, Lexical Environment )

JS에서 Scope와 Closure를 이해하기 위해서는 Lexical Evironmet에 대한 이해가 선행되어야 한다.

 

그래서 아래 포스팅을 해석하며 Execution Context를 이해해보려고 했다!!

https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0

Understanding Execution Context and Execution Stack in Javascript

 

 

Execution Context?

: JS 코드가 실행 평가되는 환경의 추상적 개념

 

: 어떤 코드가 JS로 실행 될 때마다 Execution Context 내에서 실행 됨

 

 

Execution Context 세가지 타입

 

1. Global Execution Context

   - default, 함수 내부에 있지 않은 코드

 

   - create global object (window object)

 

   - this 의 값을 global object와 일치 시킴

 

   - 프로그램에는 하나의 global Execution만 있음

 

 

 

2. Functional Execution Context

   - 모든 함수가 호출될 때 생성 됨

 

   - 함수마다 각자의 Execution Context를 가지고 있음

 

 

 

3. Eval Function Execution Context

   - eval 함수 안에서 실행되는 코드는 자기의 Execution Context를 가져옴

 

   - 자주 사용되지 않음

 

---

Execution Stack

 

: 다른 언어에서 'calling stack' 이라고 알려진 것과 유사함

 

: 코드 실행 중에 생성된 모든 Execution Context를 저장하는 데 사용

 

 

 

실행 순서

 

1. JS엔진이 첫번째 스크립트를 만날 때, Global Execution Context를 생성하고 Excution Stack에 push 함

 

2. 함수 호출을 엔진에서 발견할때마다 Excution Stack에 push

 

3. JS엔진은 Excution Stack top에 있는 Excution context의 함수를 실행함

 

4. 함수가 완료되면 pop

 

 

 

아래 예제를 보면 이해가 쉽다!!

function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}
function second() {
  console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');

 

 

---

Execution Context 가 생성되는 단계 

 

1. The Creation Phase

 

: 이 단계에 Excution Context가 생성 됨

 

: 이 단계에서 발생하는 일 (아래에서 각각의 환경에 대한 자세한 설명을 함)

    - LexicalEnvironment component is created

    - VariableEnvironment component is created

 

 

2. Excution Phase

: 모든 변수에 대한 할당이 완료 되고 코드가 최종적으로 실행 됨

 

 

---

Lexical Environment?

: 이론상의 객체, 실제로 직접 조작하는 것은 불가능

 

 

official ES6

A Lexical Environment 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. A Lexical Environment consists of an Environment Record and a possibly null reference to an outer Lexical Environment.

Lexical Environment는 ECMAScript 코드의 Lexical 중첩 구조를 기반으로 하는 특정 변수 및 함수에 대한 식별자의 연결을 정의하는 데 사용되는 specification type입니다. Lexical Environment는 Environment Record 와 Lexical Environment에 대한 null 가능성이 있는 reference로 구성돼있다.

: 쉽게 말하면 identifier-variable mapping을 보유하고 있는 구조

 

 

 

아래 예시를 보면 이해가 쉽다!

var a = 20;
var b = 40;
function foo() {
  console.log('bar');
}

이 코드에 대한 Lexical Environment (실제 코드로 존재하는 것은 아님)

lexicalEnvironment = {
  a: 20,
  b: 40,
  foo: <ref. to foo function>
}

 

 

각각의 Lexical Environment는 세가지 component를 가짐

 

1. Environment Record

   - Lexical Environment 내부에 저장된 변수와 함수 선언이 있는 공간

  

  두가지 타입이 있음

• Declarative evironment record : 변수와 함수선언을 저장
• Object environment record: global binding object를 저장함

 

 

2. Reference to the outer environment

:  외부 Lexical Environment를 접근할 수 있다는 것을 의미 함

 

:  JS 엔진은 현재 Lexical Environment 에서 변수를 찾을 수 없다면 외부 환경안에서 변수를 찾을 수 있음

 

 

 

3. This binding

: 여기서 this의 값이 결정 됨

 

 

excution context 따른 this 값

 

 

- Global Execution Context에서 this의 값은 global object를 참조 함

 

- Function Execution Context에서 this의 값은 함수가 어떻게 호출되는지에 달려있음

 

- object reference로 호출된다면 그 object로 this의 값이 정해짐

 

 

 

아래의 예시를 보면 더 쉽다!!

const person = {
  name: 'peter',
  birthYear: 1994,
  calcAge: function() {
    console.log(2018 - this.birthYear);
  }
}
person.calcAge(); 
// 'this' refers to 'person', because 'calcAge' was called with //'person' object reference
const calculateAge = person.calcAge;
calculateAge();
// 'this' refers to the global window object, because no object reference was given

 

 

---

Variable Environment?

: Variavle Environment 도 Lexical Environment 임.

 

: 그래서 Lexical Environment 에서 정의된 모든 property, component를 가지고 있음

 

: 변수 생성과 초기값 할당이 동시에 이루어짐

 

 

 ES6에서 두 환경사이에 다른점이 한 가지 있음

   - LexicalEnvironment : let, const 변수 바인딩과 함수 선언을 저장하는데 사용

 

   - VariableEnvironment : var 변수 바인딩을 저장하는데만 사용

 

 

 

 

 

https://hyesunie.tistory.com/19

Javascript Scope, hoisting, Closure (스코프, 클로저, 호이스팅)

 

 

 

 

 

---

아래 포스팅을 보면 이해가 더 깊은 이해를 할 수 있음

https://atercatus.github.io/javascript/2020-01-14-Hoisting-Scope-closure

Hoisting, Scope and Closure

 

https://ko.javascript.info/closure

내부와 외부 렉시컬 환경을 참조하는 순서가 상세하게 나와있음!!

변수의 유효범위와 클로저