Javascript : Execution Context

실행컨텍스트

 

1. 실행 컨텍스트의 정의

2. 실행 컨텍스트의 세부사항 - 1) 전역 실행환경, 2) 함수 실행환경

3. 실행 컨텍스트의 생성단계 - 1) 변수 객체 생성, 2) 스코프 체인 생성, 3) this 키워드 값 생성

4. 실행컨텍스트의 실행단계

 

 

1. 실행컨텍스트 정의

브라우저의 자바스크립트 엔진은 자바스크립트 코드를 핸들링하기 위해 특별한 환경을 만들어 내는데 이것이 실행 컨텍스트이다.

현재 실행중인 코드와 실행되기 위한 모든 환경을 포함한다.

 

 

2. 실행컨텍스트의 세부사항

두가지 실행환경이 있다.

 

전역 실행 환경과 함수 실행환경

 

자바스크립트 엔진이 처음 스크립트 파일을 받으면, 전역 실행환경을 먼저 생성한다. 자바스크립트 파일에서 하나의 전역 실행환경만 있을 수 있다. 

 

함수가 호출 될 때마다 자바스크립트 엔진은 해당 특정 함수에 대한 함수 실행 컨텍스트를 만든다. 

 

 

실행 컨텍스트의 생성은 두 단계에 걸쳐 일어나게 된다.

 

생성단계와 실행 단계.

 

3. 실행컨텍스트의 생성단계

생성단계에서 실행 컨텍스트는 먼저 실행 컨텍스트 오브젝트와 연결된다. 실행 컨텍스트 오브젝트는 중요한 데이터들을 포함한다. 

생성단계는 3가지 단계로 구성된다.

1. 변수 객체 생성 2. 스코프 체인 생성. 3. this 키워드 값 설정

 

1) 변수 객체 생성

 

변수객체에는 실행 컨텍스트 내부의 변수들과 함수 선언들이 저장된다.

 

전역 실행환경에서 모든 변수와 함수의 선언이 추가된다. 

 

var로 선언된 모든 변수값이 있다면 undefined로 setting되어 VO안에 추가된다.

또한 모든 함수의 선언이 추가된다. 해당 함수를 가리키는 값이 추가되는 것. 이 과정을 통해 코드가 실행되기 전에 접근이 가능하게 된다.

 

반면 함수 실행환경에서는 변수객체를 생성하지 않는다. 대신 argument라는 배열과 유사한 객체를 생성하며, 해당 함수에 제공된 모든 인수를 포함한다. 

 

코드 실행 전 변수 및 함수 선언을 메모리에 저장하는 이 프로세스를 호이스팅이라고 한다.

 

+ 호이스팅

함수와 변수선언은 자바스크립트에서 호이스팅된다. 이것은 현재 실행 컨텍스트 VO 변수객체 메모리에 먼저 저장되고 코드가 실행되기 전에 실행 컨텍스트 내에서 사용 가능하게 됨을 의미한다.

 

 

이 때 함수에 있어서, 함수 표현식의 경우 호이스팅 되지 않는다. 왜냐하면 함수로서 호이스팅이 되지 않고 변수로써 호이스팅 되기 때문이다. 

 

또한 변수 호이스팅에 있어서 let, const를 이용하는 경우에 선언부만 호이스팅되고 초기화가 이루어지지 않기 때문에 에러가 난다. 

 

var는 선언과 동시에 초기화가 이루어진다. let과 const는 아니다. const는 초기화와 동시에 할당이 이루어져야 한다.

 

 

2) 스코프 체인 생성

변수객체를 생성한 이후에 스코프체인을 생성한다. 

스코프는 코드의 다른 부분에 어디까지 엑세스 할 수 있는지를 결정하는 메커니즘이다.

 

각각의 함수 실행 컨텍스트는 각각의 스코프를 만들어낸다. 

함수가 다른 함수 내에서 정의될 때, 내부함수는 외부함수와 그 부모 함수에서 정의된 코드에 엑세스할 수 있다. 이것을 렉시컬 스코핑이라고 한다. 클로저 현상을 발생시킨다. 클로저 - 외부 함수의 실행이 완료된 후에도 외부 함수 관련된 코드에 엑세스 할 수 있는 내부 함수.

 

함수에서 호출된 변수와 함수를 해결하기 위해 JavaScript 엔진이 해당 함수가 정의된 실행 컨텍스트의 스코프를 탐색하는 이 아이디어는 스코프 체인이라고합니다.

 

3) this 키워드 설정

전역 실행컨텍스트에서 this는 글로벌 오브젝트를 말한다. window 객체.

 

var occupation = "Frontend Developer"; 

function addOne(x) { 
    console.log(x + 1) 
}

위의 코드는 아래 코드와 같은 의미이다.

window.occupation = "Frontend Developer"; 
window.addOne = (x) => { 
console.log(x + 1)
};

 

함수 실행 컨텍스트의 this

함수 실행컨텍스트에서는 this오브젝트를 생성하지 않는다. 대신 정의된 환경에 접근할 수 있게 된다. 

 

이때 화살표 함수의 경우 this가 가리키는 대상이 다르게 된다.  그 상위 환경에서의 this를 참조하게 된다.

 

 

 

 

4. 실행 컨텍스트의 실행단계

this 값 지정 이후 생성단계를 넘어 실행단계로 가게 된다.

이 단계까지 변수객체의 변수들은 undefined이다. 이 시점에서 코드가 실행된다면 에러를 발생시키게 될 것.

이 단계에서 자바스크립트 엔진은 현재 실행 컨텍스트를 다시 읽게 된다. 그리고 변수객체를 실제 변수로 업데이트 하게 된다. 

 

자바스크립트 실행 스택 (콜스택) !

콜스택은 스크립트의 라이프 사이클동안 계속해서 모든 실행 컨텍스트들을 트랙킹한다. 

 

브라우저가 스크립트를 로드하면, 

전역 컨텍스트가 콜스택에 먼저 쌓이게 된다. 그리고 각각의 함수 컨텍스트를 찾아 함수 실행컨텍스트를 콜스택에 쌓는다.

가장 위에 있는 실행컨텍스트가 실행 된다.

 

 

 

 

 + GLOBAL EXECUTION CONTEXTFUNCTION EXECUTION CONTEXT

Creates a Global Variable object that stores function and variables declarations.	Doesn't create a Global Variable object. Rather, it creates an argument object that stores all the arguments passed to the function.
Creates the `this` object that stores all the variables and functions in the Global scope as methods and properties.	Doesn't create the `this` object, but has access to that of the environment in which it is defined. Usually the `window` object.
Can't access the code of the Function contexts defined in it	Due to scoping, has access to the code(variables and functions) in the context it is defined and that of its parents
Sets up memory space for variables and functions defined globally	Sets up memory space only for variables and functions defined within the function.

 

참고사이트

https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context/#:~:text=There%20are%20two%20types%20of,representing%20the%20function's%20local%20scope.