자바스크립트의 만능 가제트, 실행 컨텍스트가 무엇일까?
이 글은
모던 자바스크립트 Deep Dive
23장 실행 컨텍스트 부분을 보고 공부한 것을 정리한 글입니다.
우선, 우리는 이 글을 읽고나서 자바스크립트의 실행컨텍스트가 도대체 무엇을 하는 애
인지 알게될 것이다. 그리고 생각보다 이 아이는 자바스크립트 엔진 내에서 다양한 일을 하고있다는 것도 알게 될것이다.
JS 실행 컨텍스트를 이해하면 설명할 수 있는 것들
- 스코프를 기반으로 식별자와 식별자에 바인딩 된값을 관리하는 방식
- 호이스팅이 발생하는이유
- 클로저의 동작 방식
- 태스크 큐 와 함께 동작하는 이벤트 핸들러의 비동기 처리 동작 방식
- 스코프를 기반으로 식별자와 식별자에 바인딩 된값을 관리하는 방식
- 호이스팅이 발생하는이유
- 클로저의 동작 방식
- 태스크 큐 와 함께 동작하는 이벤트 핸들러의 비동기 처리 동작 방식
위의 네 가지를 실행 컨텍스트로 설명할 수있는데 다르게 말하면 네가지가 일어나는 일 중심에 실행 컨텍스트가 큰 일을 하고있다고도 이해할수있다.
그래서 이 분이 떠올랐다지... 만능 실행 컨텍스트 형사...
🔍 자바스크립트는 우선 소스코드(실행 가능한 코드)를 4가지타입으로 분류한다.
→ 4가지인 이유는 소스코드 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다
- 전역 코드
- 전역 스코프 생성 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를
전역 객체의 프로퍼티와 메서드로 바인딩하고 참조
하기 위해 전역 객체와 연결 되어야한다. - 전역 코드가 평가 되면
전역 실행 컨텍스트
가 생성된다.
- 전역 스코프 생성 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를
- 함수 코드
- 지역 스코프 생성
매개변수
arguments
객체를 관리해야한다.생성한 지역 스코프
를전역스코프에서 시작하는 스코프 체인
의 일원으로 연결해야한다. - 함수코드가 평가되면
함수 실행 컨텍스트
가 생성 된다.
- 지역 스코프 생성
- eval 코드
- strict mode 에서 자신만의 독자적인 스코프를 생성
- eval 코드가 평가되면
eval 실행 컨텍스트
생성
- 모듈 코드
- 모듈 코드는 모듈별로 독립적인 모듈 스코프를 생성한다.
- 모듈 코드가 평가되면
모듈 실행 컨텍스트
생성
📗 소스코드의 처리과정
모든 소스코드는 평가 과정
과 실행 과정
으로 나누어 처리한다.
평가 과정에서는
- 실행 컨텍스트를 생성
- 변수 함수등의 선언문 먼저 실행 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(
렉시컬 환경의 환경레코드
)에 등록한다.
실행과정에서는
- 소스에 필요한 정보 들을 스코프에서 검색해서 얻거나 값을 할당한다.
🔍 자 아래 예제를 자바스크립트 코드가 어떤 순서로 평가하고 실행하는지 생각해보자.
const x=1; // 전연변수 선언
// 함수 정의
function foo () {
const x = 10; // 지역 변수 선언
console.log(a+ x);
}
foo(100) // 함수 호출
console.log(x) // 메서드 호출
1. 전역 코드 평가
-
전역 코드의 선언문만 먼저 실행한다.
-
변수선언문과 함수 선언문이 먼저 실행된다.
const x; function foo () { const x = 10; // 지역 변수 선언 console.log(a+ x); }
-
생성된 전역변수와 전역함수가 실행컨텍스트가 관리하는 전역스코프(
렉시컬 환경의 환경레코드
) 에 저장한다. -
또 전역 변수와 함수 선언문으로 정의된 전역 함수는
전역 객체의 프로퍼티와 메서드
가 된다.
-
2. 전역 코드 실행
- 평가가 끝나면 런타임이 시작되어 전역 코드가 순차적으로 실행된다.
x = 1 할당
foo(100) // 함수 호출 되면 함수 내부로 진입 -> 함수 평가
변수에 값이 할당 되고 함수가 호출
된다.- 함수가 호출되면 전역 코드의 실행을
일시 중단하고 코드 실행 순서를 변경하여
함수 내부`로 진입한다.
3. 함수 코드 평가
- 호출하면 코드를 평가함
- 매개변수와 지역변수 선언문 먼저 실행
- 생성된 매개변수와 지역변수가 실행 컨텍스트가 관리하는 지역스코프에 등록된다.
- 매개변수와 arguments 객체 지역 스코프에 등록 this 바인딩 결정
4. 함수 코드 실행
-
런타임 시작 함수 코드 순차적으로 실행
-
매개변수와 지역변수에 값이 할당된다
-
console.log 메소드가 호출된다.
- 호출하기 위해서는 먼저 식별자인 console 을 스코프 체인을 통해서 검색한다.
- console 식별자는 스코프 체인에 등록되어 있지않고 전역객체의 프로퍼티에 존재한다. 전역 객체의 프로퍼티가 마치 전역 변수 처럼 전역 스코프를 통해 검색 가능해야한다는 것을 의미한다.
-
이처럼 코드가 실행되려면 스코프 식별자 코드 실행 순서 등의 관리가 필요하다.
-
선언에 의해 생성된 모든 식별자들은 스코프를 구분하여 등록하고 식별자에 바인딩된 값의 변화를 지속적으로 관리할수 있어야한다.
-
스코프는 중첩관계에 의해 스코프 체인을 형성해야한다.
-
현재 실행중인 코드의 실행 순서를 변경 할수있어햐한다.
이 모든 것을 관리하는 것이
실행 컨텍스트
다
6
-
실행 컨텍스트 스택(=call stack)
const x=1; // 전연변수 선언
// 함수 정의
function foo () {
const x = 10; // 지역 변수 선언
console.log(a+ x);
}
foo(100) // 함수 호출
const x=1; // 전연변수 선언
// 함수 정의
function foo () {
const x = 10; // 지역 변수 선언
console.log(a+ x);
}
foo(100) // 함수 호출
위에서 예시를 들었던 코드로 다시 실행컨텍스트가 실행컨텍스트 스택에 어떤 순서로 쌓이는지 설명을 해보면,
1. 전역 코드 평가 실행
- 전역코드를 평가하여 실행 컨텍스트를 생성하고 실행 컨텍스트를 스텍에 푸시한다.
- 전역 변수 x 와 함수 foo 가 전역 실행 컨텍스트의 렉시컬 환경에 저장된다.
- 전역 코드가 실행되면 변수 x 에 값이 할당되고 foo 가 호출된다.
- foo 함수 코드 평가화 실행
-
foo 가 실행되면 전역 코드의 실행은 일시 중지되고 제어권은 foo 함수 내부로 이동한다.
-
foo 함수의 실행컨텍스트를 생성하고 컨텍스트스택에 푸시한다.
-
이후 지역변수 x 와 console.log() 함수를 호출한다.
-
console.log() 함수의 실행 컨텍스트가 생성되고 스택에 푸시된다.
-
console.log() 함수가 종료된 후 스택에서 pop() 되고 다시 제어권이 foo 에게 돌아오고 foo는 더이상 코드가 없어 종료된다.
- 전역 코드로 복귀
- foo 코드가 종료되면 제어권은 전역코드로 이동한다. 더이상 실행할 전역 코드가 남아있지 않으므로 전역 실행 컨텍스트도 스택에서 팝되어 스택에는 아무것도 남아있지 않게된다.
렉시컬 환경
-
렉시컬 환경은 식별자와 식별자에 바인딩 된 값 그리고 상위스코프에 대한 참조를 기록하는 자료구조.
-
렉시컬 환경은 환경 레코드(EnvironmentRocord)와 외부렉시컬에 대한 참조(outer lexical Enviorment Ref)두개의 컴포넌트로 구성이된다.
- 환경레코드
- 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소.
- 외부 렉시컬에 대한 참조
- 상위 스코프를 가리킨다.
📚 정리
-
실행 컨텍스트는 소스코드를 실행하는데 필요한 환경을 제공하고(렉시컬 환경) 코드의 실행 결과를 실제로 관리하는(실행 컨텍스트 스택 ) 영역!
-
실행 컨텍스트는 식별자를 등록하고 관리하는 스코프(렉시컬 환경)와 코드 실행 순서를 관리(실행 컨텍스트 스택) 를 구현한 내부 매커니즘.
렉시컬 환경은 식별자와 식별자에 바인딩 된 값 그리고 상위스코프에 대한 참조를 기록하는 자료구조.
렉시컬 환경은 환경 레코드(EnvironmentRocord)와 외부렉시컬에 대한 참조(outer lexical Enviorment Ref)두개의 컴포넌트로 구성이된다.
-
실행 컨텍스트는 소스코드를 실행하는데 필요한 환경을 제공하고(렉시컬 환경) 코드의 실행 결과를 실제로 관리하는(실행 컨텍스트 스택 ) 영역!
-
실행 컨텍스트는 식별자를 등록하고 관리하는 스코프(렉시컬 환경)와 코드 실행 순서를 관리(실행 컨텍스트 스택) 를 구현한 내부 매커니즘.
다음에는 실행 컨텍스트의 렉시컬 환경과 실행 컨텍스트 스텍에 대해서 좀 더 깊게 알아보려고한다.
Author And Source
이 문제에 관하여(자바스크립트의 만능 가제트, 실행 컨텍스트가 무엇일까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@eamon3481/자바스크립트의-실행-컨텍스트가-무엇일까저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)