[Javascript] 실행컨텍스트 flow (코드실행 시 일어나는 과정)

2021.06.12 Ver1

 

책을 읽다보니 반복적으로 나오는 개념들이 있는데 처음엔 그냥 넘어갈 수 있었지만 읽는 챕터가 많아질수록 해당 개념에대한 물음표가 점점 많아지기 시작했다. (왜냐면 처음부터 순서대로 책을 읽지 않기 때문)

 

바로, 이때가 해당 개념에 대해 공부할 때 이다.

그래서 가장 기본이 되는 용어에 대해 공부하기로 한다.

 

전체적인 흐름에 대해 먼저 알고나서 해당 개념으로 넘어와서 그런지 좀 더 이해가 잘됐다.

 

그리고 컴퓨터 용어도 결국엔 하나의 '언어'이기 때문에 현재 우리가 사용하고 있는 '언어'인 '한국어'의 구성과 비교해서 같이 생각하면 좀 더 이해하기 쉬운 것 같다.

 

1. 기본용어

 

0. 리터럴 (literal)

- 사람이 이해할 수 있는 문자와 기호를 사용해 값을 생성하는 표기법 (한글)

 

1. 토큰 (token)

- 문법적인 의미를 갖는 더 이상 나눌수 없는 코드 (국어 문법에서 '형태소'와 같은 의미인 것 같다. like 단어)

 

2. 문 (statement)

- 프로그램을 구성하는 기본단위이자 최소실행단위 ('문장'으로 생각하면 될 듯)

 

3. 표현식 (expression)

- 값으로 평가될 수 있는 문(statement)

 

4. 값(value)

- 식이 평가되서 생성된 결과. (평가란 식을 해석해서 값을 생성하거나 참조하는 것)

 

2. 기본 논리

 

0. 배경지식

- 인간은 기억과 연산을 뇌라는 하나의 하드웨어에서 하지만, 컴퓨터는 데이터는 메모리에 기억되고, 연산은 CPU에서 한다. 메모리에 저장된 값에 직접적으로 접근이 불가능 하기에 변수라는 친구를 이용해서 메모리 주소를 기억하게 만들어 해당 메모리를 사용할 수 있게 한다.

 

1. 변수 (variable)

- 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

- 변수를 통해 메모리에 저장된 값을 재사용할 수 있음

 

2. 식별자 (indentifier)

- 메모리 주소에 붙인 이름

- 변수의 이름

 

 

3. 코드실행 시 일어나는 과정

 

1. 소스코드 작성 -> Enter!

- 리터럴을 사용해서 문이나 표현식을 작성 -> 소스코드

- 식별자를 작성

 

2. 소스코드 평가 (선언문) - 코드를 관리 및 실행하기 위한 환경설정

1) 선언

- 실행 컨텍스트가 생성됨 

-> 렉시컬 환경 생성 (식별자와 스코프를 관리) -> 환경 레코드 생성 -> 객체 환경 레코드 및 선언적 환경 레코드 생성

    (이 과정에서 선언문(변수, 함수 등) 실행 (호이스팅) -> 생성된 변수와 함수식별자를 각 환경레코드에 등록 (key를 등록))

-> this 바인딩

-> 외부 렉시컬 환경에 대한 참조를 결정 (상위스코프를 결정)

 

- 요약: 코드관리를 위한 환경을 만들고 식별자와 스코프를 등록

 

3. 소스코드 실행(선언문 외의 문) -> 런타임 중

- 실행에 필요한 정보를 실행컨텍스트에서 가져옴

- 변수할당 (or 재할당)

- 변수참조

- 함수를 만났다! (새로운 실행 컨텍스트 생성, 기존 실행 컨텍스트 위에 스택 stack (코드실행순서 관리))

(- 전역 실행 컨텍스트

- 함수 실행 컨텍스트

- eval 실행 컨텍스트

- 모듈 실행 컨텍스트)

 

- 요약: key에 value를 연결

 

4. 값 도출

- 연결된 value를 불러옴

 

 

--

 

[참고]

 

1. 변수 선언 (variable declaration) befor 런타임

- 변수를 생성하는 것 (값을 저장할 수 있도록 준비하는 과정)

- 즉, 메모리 저장공간을 확보하고, 식별자(변수이름)와 메모리공간주소를 연결하고 암묵적으로 undefiend를 할당해 값을 초기화시킴 (해당 메모리공간에 있던 값 garbage value을 초기화 시키는 것임)

- 변수를 사용하기 위해서는 반드시 '선언'이 필요함

- 선언은 var, let, const 키워드를 사용함. (let, const는 ES6부터 제공하는 기능)

 

궁금?? 근데 기껏 초기화시켜놓고는 변수에 값이 할당되면 다른 메모리공간에다가 값을 저장한다. 그러면 왜 초기화시키고 해당 공간에다가 이름표까지 붙여놓은거지? (식별자를 mapping시킨거지?)

 

 

- 런타임 -

 

2. 변수 할당 (assignment) with 런타임

- 변수에 값을 저장하는 것

 

3. 변수 참조 (reference)

- 변수에 저장된 값을 읽어들이는 것

 

---

지금 코드실행 시 어떻게 동작하는지 flow를 파악하고 있어서 실행컨텍스트 읽다가 기본용어에 대한 정의가 먼저 정립되어야 할 것 같아서 표현문과 문 부분 다시 읽고 각 용어에 대해서 내가 이해한 내용으로 적어봤다. flow도 내가 이해한 대로 적었다. 물론, 생략된 부분이 많이 있지만 내가 이해하기 위해 개략적으로 적어놓은 flow여서 실행컨텍스트에 관한 포스팅은 따로 할 예정 (이미 임시저장에 들어있긴 함)

 

실은 정리하고 올릴까 했는데 지금 내가 이해하고 있는대로 일단은 올려놓고 추후에 내가 이해한게 맞는지 아닌지를 판단하는것이 더 나을 것 같아서 일단은 업로드 하기로 결정했다. 나를 먼저 이해시켜야 남에게 설명할 수 있는데 일단 지금 나부터 아직 정리가 안된다. 나를 이해시키기 위한 과정을 기록하는 것도 분명 의미가 있을거라 생각이 되어 일단 업로드 고고.