자바스크립트 실행은 어떻게 될까? : 1편

글을 읽기 전

"지식을 획득하는 가장 효율적인 방법은 인터넷에 틀린 글을 적는 것이다."

이 글은 제 뇌피셜이며, 인용하셨다가 욕을 먹어도 책임지지 않습니다.

SATURDAY가 목요일이 아니라 토요일인 걸 아신다면 자막을 끄듯이, 제 글도 꺼주시면 감사합니다.

시간이 남으신다면 틀린 내용을 적어주셔도 좋습니다.

참조된 글을 번역하였습니다.

---

목차

## intro

## Body

    ### 실행 컨텍스트 - 전역 실행 컨텍스트와 함수 실행컨텍스트

        #### 실행 컨텍스트 생성 단계 1. 생성 단계

                ##### 1) 변수 객체의 생성

                ##### 2) 스코프 체인 생성

                ##### 3) this의 값 결정

        #### 실행 컨텍스트 생성 단계 2. 실행 단계

 

---

## intro

자바스크립트는 싱글스레드 비동기 언어다.

즉 코드 실행 시 CPU 연산을 한 번 한다는 뜻인데, 동시성과 병렬처리를 하려고 만들어진 프로세서가 쓰이지 않는다는 뜻이다.(하지만 최근에 자바스크립트 동시성 프로그래밍(?)이라는 책을 누군가 읽는것을 봤으므로 단언할 수 없다)

요즘엔 상황에 따라 비효율적인 메모리 활용도 허락하는 시대인데, JS가 개발된 90년도 당시엔 메모리가 비쌌으므로 이해는 간다.

프로세서 간 통신 비용이 비싸지면 정확도가 떨어지거나 로직이 충돌할 수 있다.[참고1] CPU 스케줄링 알고리즘을 아무리 효율적으로 짜더라도 결국 점유할 수 있는 자원이 한정되어 있으므로 발생한 문제라고 보인다. 하지만 요새 인간이 더 비싸서 GPU를 갈아서 돌아가는 도메인을 제외하고는 동시성/병렬처리/성능에 중점을 두는 듯하다.

잠깐 비동기도 보자. 엥 아까 JS는 동시성 지원 안한다면서? 그걸 가능하게 하는 것이 바로 비동기다. 프로세스/스레드보다 레이어가 높은 JS 엔진에서 동시성 처리를 한다.

그래서 자바스크립트 실행...어떻게 하는건데...

• The Callstack
• The Event Loop
• The Task Queue
• WebAPIs/External Resources

이렇게 4가지의 컴포넌트(단위)를 가지며 서로 상호작용하며 비동기처리를 가능하게 한다.

 

## Body

### 실행 컨텍스트

브라우저의 V8엔진은 JS코드를 실행시키기 위해서 공간(container)을 만드는데, 그것을 실행 컨텍스트라고 한다.

실행 컨텍스트는 현재 실행되고 있는 코드를 담고 있고, 실행중인 코드를 실행하는데 필요한 모든 것들도 역시 담긴다.

실행컨텍스트의 런타임에 파서에 의해 파싱되고 변수나 함수들은 메모리에 저장되며, 실행가능한 바이트코드로 변환되어 실행된다.

실행컨텍스트는 두 가지 종류가 있다.

• Global Execution Context (GEC) 전역 실행 컨텍스트
• Function Execution Context (FEC) 함수 실행 컨텍스트

 

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

JS엔진이 스크립트 파일을 받으면 전역 실행 컨텍스트를 생성한다.

함수 스코프 안에 들어있지 않은 코드들은 모두 전역 실행컨텍스트에 위치하여 실행된다.

그래서 모든 자바스크립트 파일은 하나의 전역 컨텍스트를 가진다.

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

함수가 호출되면 자바스크립트 엔진은 함수 스코프 안에서 실행할 수 있는 함수의 함수 실행 컨텍스트를 생성한다. 모든 함수가 호출될 때 함수만의 독자적인 함수실행컨텍스트가 생성되고 런타임에 여러 개로 존재할 수 있다.

 

---

실행컨텍스트는 두 단계를 거쳐 생성된다.

1. Creation Phase, 생성 단계
2. Execution Phase, 실행 단계

생성 단계, Creation Phase

실행 단계는 실행 컨텍스트 객체와 관련이 있다. 실행 컨텍스트 객체는 실행 컨텍스트가 런타임에 (실행하기 위해)필요한 많은 데이터들을 저장한다. 이 데이터도 종류가 나뉘기 때문에 실행 단계는 세 부분으로 나누어진다.

1. Creation of the Variable Object (VO), 변수 객체의 생성
2. Creation of the Scope Chain, 스코프 체인 생성
3. Setting the value of the this keyword, this의 값 결정

 

---

1. 생성단계 : Creation of the Variable Object (VO), 변수 객체의 생성

변수객체는 실행 컨텍스트 내에서 생성되는 객체와 비슷한 공간(object-like container)이다. 변수 객체엔 실행 컨텍스트 내에서 정의된 변수와 함수 선언문이 저장된다.

- cf) 호이스팅

In the GEC, for each variable declared with the var keyword, a property is added to VO that points to that variable and is set to 'undefined'.

Also, for every function declaration, a property is added to the VO, pointing to that function, and that property is stored in memory. This means that all the function declarations will be stored and made accessible inside the VO, even before the code starts running.

The FEC, on the other hand, does not construct a VO. Rather, it generates an array-like object called the 'argument' object, which includes all of the arguments supplied to the function.

This process of storing variables and function declaration in memory prior to the execution of the code is known as Hoisting. 

2. 생성단계 : Creation of The Scope Chain, 스코프 체인 생성

After the creation of the Variable Object (VO) comes the creation of the Scope Chain as the next stage in the creation phase of an Execution Context.

스코프는 코드의 위치에 따라 접근 범위를 정해준다. (대충 modifier와도 맥락이 얼추 맞는 듯 하다)

각각의 함수 실행 컨텍스트는 함수 자체의 스코프를 가지기 때문에 스코프가 생성된다.

예를 들면, 함수가 다른 함수 안에서 정의되었다면 안쪽의 함수는 바깥쪽에 있는 함수에 정의된 코드에 접근할 수 있다. 이것을 렉시컬 스코프라고 한다. 하지만 바깥쪽에 있는 함수는 안쪽 함수 내의 코드에 접근할 수 없다. 이것을 클로저라고 한다.

 

예시처럼 console.log(a+b+c)를 하는 경우, 가장 안쪽에 선언된 second()함수는 자신의위치를 기준으로 바깥에 있는 함수의 실행 컨텍스트를 스코프로 가지기 때문에 a와 b에 접근이 가능하다.

이런 식으로 가장 안쪽에 있는 함수가 바깥쪽 함수에 선언된 변수에 접근하려고 할 때 스코프 체이닝이 일어난다.

 

반대로 말하면 전역 스코프에서 이너 스코프 함수의 변수에 접근할 수 없다는 뜻이다. 단, 함수의 값으로 리턴하는 경우엔 접근할 수 있다.

 

3. 생성단계: Setting The Value of The "this" Keyword, this 키워드 값 설정

자바스크립트의 this는 상위 렉시컬 스코프의 객체를 참조한다.[참고4]

스코프 체인이 생성되면, this의 값은 JS엔진에 의해 초기화된다.

 

전역 컨텍스트에서의 this

전역 컨텍스트에서 this는 window 객체를 가리킨다.

---

참고1

https://medium.com/@marcellamaki/a-brief-overview-of-order-of-execution-in-javascript-e28744aa9479

A Brief Overview of Order of Execution in JavaScript

참고2

https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/

JavaScript Execution Context – How JS Works Behind The Scenes

참고3

https://developer.mozilla.org/ko/docs/Glossary/Call_stack

호출 스택 - 용어 사전 | MDN

참고4

https://poiemaweb.com/js-this

this | PoiemaWeb