[JavaScript] 실행 컨텍스트(1)

 

1. 브라우저의 기본구조

​

- 브라우저의 뜻은 다음과 같다.

"인터넷상에서 웹에 연결시켜 주는 윈도 기반의 소프트웨어"

우리가 일반적으로 사용하는 크롬, 파이어폭스, 사파리, 엣지, 익스플로러등을 브라우저라고 부른다.

​

- 브라우저는 다음과 같이 구성되어 있다.

​

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.

2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

3. 렌더링 엔진 - 요청한 콘텐츠 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨.

5. 자바스크립트 해석기(엔진) - 자바스크립트 코드를 해석하고 실행.

6. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.

​

​

- 이러한 브라우저의 엔진들은 각 브라우저마다 다르다. 예를들어 자바스크립트 엔진의 경우 크롬은 v8엔진을 사용한다.

​

- 여기서 자바스크립트 엔진은 위 내용과 같이 자바스크립트 코드를 해석하고 실행하는 역할을 한다.

​

자바스크립트 엔진

- 자바스크립트 엔진은 위와 같이 크게 두 구성요소로 나뉜다.

두 구성요소는 메모리 힙, 콜 스택으로 나뉜다.

​

메모리 힙: 메모리 할당이 일어나는 곳.

콜 스택: 코드 실행에 따라 호출 스택이 쌓이는 곳.

​

- 우리가 여기서 주목해야 할 것은 콜 스택이다.

- 콜 스택이란, 함수 호출 시 해당 함수의 호출정보가 차곡차곡 쌓여있는 스택을 의미한다.

( C언어로 따지면, 함수 호출정보 등으로 함수 내 지역변수 혹은 인자값 등이 쌓이는 것과 비슷하다 보면 된다.)

​

---

2. 실행 컨텍스트란?

​

- ECMAScript의 공식문서에서 정의한 실행 컨텍스트란, "실행 가능한 JS코드블럭이 실행되는 환경"을 의미한다.

- 여기서 "실행 가능한 JS코드블럭"은 대부분의 경우 함수를 의미한다.

​

- 그렇다면 어떨 때 실행 컨텍스트가 형성될까?

이는 3가지로 나뉜다.

​

1. 전역 코드.

2. eval()함수로 실행되는 코드.

3. 함수 안의 코드가 실행될 경우.

​

​

- 프로그래머가 함수로 실행 컨텍스트를 만들었다고 가정하자. 그렇게 되면, 코드 블록 안에는 변수 및 객체, 실행가능 코드가 있을 것이다. 이 코드를 실행하게 된다면 실행 컨텍스트가 생성될 것이다. 그럼 생성된 컨텍스트들은 자바스크립트 엔진의 콜 스택에 차곡차곡 하나씩 쌓일 것이다. 그렇게 되었을 때, 제일 위에 위치하고 있는 실행 컨텍스트가 현재 실행되고 있는 컨텍스트인 것이다.

​

- 공식문서에서 설명하는 실행 컨텍스트란?

현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성되어 스택에 들어가고, 제어권이 그 컨텍스트 이동하는 것을 말한다.

​

- 실행 컨텍스트 예시

ex)

- 1번을 보면 전역 코드가 실행된다. 전역 코드가 실행되었으므로, 실행 컨텍스트가 형성된다.

- 2번을 보면 함수 안 코드가 실행 된 것이므로, 실행 컨텍스트가 실행된다.

- 3번도 보면 함수 안의 함수 안 코드가 실행 된 것이므로, 실행 컨텍스트가 실행된다.

​

위 코드를 사진으로 나타내면 다음과 같다.

​

---

​

3. 실행 컨텍스트 생성 과정

​

- 활성 객체 생성

- 실행 컨텍스트가 생성되면 JS엔진은 해당 컨텍스트에서 실행에 필요한 여러실행에 필요한 여러 가지 정보를 담을 객체를 생성한다. 이를 "활성 객체"라고 한다.

- 이 "활성객체"는 앞으로 쓸 매개변수나 사용자가 정의한 변수 및 객체를 저장하고, 새로 만들어진 컨텍스트에 접근 가능하도록 만들어졌다.

- 이는 엔진 내부에서 접근이 가능하다는 것이고, 사용자가 접근할 수 있다는 것이 아니다.

- arguments 객체 생성

- 앞서 만들어진 활성 객체는 argument프로퍼티로 이 arguments객체를 참조한다.

ex) excute()함수의 param1과 param2가 들어왔을 때의 그림이다.

​