하루 하루
[ JS 33 Concept ] 1. 호출스택 본문
[ Types of Execution Context ]
excution context는 자바스크립트 코드가 평가되고 실행되는 환경입니다.
즉, 자바스크립트 코드는 excution context 내에서 실행됩니다.
Global Execution Context
default 실행 컨텍스트로 함수 안에 없는 코드의 경우 해당 excution context에서 실행됩니다.
여기서는 두 가지의 작업이 실행되는데, 첫번째는 전역 개체( window object )를 만들고,
이 값을 전역 개체와 동일하게 설정합니다.
프로그램에는 하나의 전역 실행 컨텍스트만 존재합니다.
Functional Execution Context
함수가 호출될 때마다, 해당 함수에 대한 새로운 excution context이 만들어집니다.
각 함수가 가지는 excution context는 해당 함수가 호출되거나 호출할 때 만들어집니다.
Eval Function Execution Context
eval 함수 내에서 실행되는 코드도 자신만의 excution context를 가집니다.
그렇지만, eval 함수의 경우 eval 함수 자체가 자바스크립트 코드 내에서 잘 사용되지는 않습니다.
[ 호출스택 ]
Execution stack ( calling stack ) 은 LIFO 구조를 가지는 스택 구조입니다. 이는 코드 실행 중에 생성되는 모든 execution context 를 저장합니다. 자바스크립트 엔진이 처음에 script 를 보면 전역실행컨텍스트를 만들고 이를 현재 Execution stack에 push 합니다. 이후에 자바스크립트 엔진이 함수 호출을 만날 때 마다 해당 함수를 위한 새로운 execution context ( 실행 컨텍스트 )를 생성하고 이를 Execution stack의 상단에 push합니다.
이 때, 자바스크립트 엔진은 Execution stack에서 가장 위의 함수를 수행합니다. 함수가 모두 실행되고 나면, Execution stack에서 해당 함수의 실행 컨텍스트는 Execution stack에서 pop 되고, 컨트롤이 아래로 이동하게 됩니다.
[ 코드로 살펴보기 ]
let a = 'Hello World!';
function first() {
console.log('first');
second();
console.log('Again first');
}
function second() {
console.log('second');
}
first();
console.log('Inside Global Execution Context');
1.
위의 js 코드를 실행하게 되면
전역 실행 컨텍스트 (global execution context)이
실행되고 이것이 호출스택에 쌓이게 됩니다.
2.
first ( ) 함수를 호출하면서,
자바스크립트 엔진은
새로운 first ( ) 실행 컨텍스트를 생성하고
이를 현재의 호출스택 위에 쌓게 됩니다.
3.
호출된 first ( ) 함수는
우선, console.log( 'first' ) ; 를 수행하면서 콘솔 창에 first를 출력합니다.
다음으로, second ( ) 함수를 호출합니다 .
따라서 자바스크립트 엔진은
새로운 second ( ) 실행 컨텍스트를 생성하고
이를 현재의 호출스택 위에 쌓게 됩니다.
4.
second ( ) 함수는 실행되면서
console.log( 'second' ) ; 를 수행하면서
콘솔 창에 second 를 출력합니다.
second ( ) 함수가 종료되면서 호출 스택에 쌓인
second ( ) 실행 컨텍스트가 pop되고
컨트롤은 그 아래 실행 컨텍스트 first ( ) 함수에 위치하게 됩니다.
5.
first ( ) 함수에서 second ( ) 함수 호출까지 실행되었기 때문에
다음의 코드인 console.log('Again first'); 를 실행하면서
콘솔 창에 'Again first' 를 출력합니다.
first ( ) 함수가 종료되면서 호출 스택에 쌓인
first ( ) 실행 컨텍스트가 pop되고
컨트롤은 그 아래 실행 컨텍스트 전역 실행 컨텍스트에 위치하게 됩니다.
6.
모든 코드가 실행되면 자바스크립트 엔진은 현재 스택에서
전역 실행컨텍스트를 제거합니다.
'IT > Web' 카테고리의 다른 글
모달 창 만들기 js (0) | 2020.05.17 |
---|---|
모듈 형태의 JS (0) | 2020.05.17 |
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 13 (0) | 2020.05.14 |
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 12 (0) | 2020.05.14 |
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 11 (0) | 2020.05.14 |