WIL 3주차 정리

3주차에는 SPA로 만드는 바닐라 자바스크립트 기초 프로젝트가 끝나고 다음 번 리액트 프로젝트를 진행하기 위한 공부하는 과정을 거치는 시간이 됬습니다.

 

물론 리액트를 공부하는 것도 중요하지만 자료구조와 JS에 관해서 더욱 기초가 튼실해야 리액트도 잘한다고 생각합니다.

그렇기 때문에 오늘은 JS에 가장 중요한 실행 컨텍스트에 관한 자료를 정리 했습니다.

 

실행 컨텍스트 객체

 

i. 생성(활성화) 시점: 한 "실행 컨텍스트"가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점

ii. 생성 시점 즉, 활성화 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행 하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장

iii. 실행컨텍스트에 담기는 정보

   1. VariableEnvironment

• 현재 컨텍스트 내의 식별자 정보
• 외부 환경 정보
• 선언 시점 LexicalEnvironment의 snapshot : 그 순간을 찍어놓는 것

    2. LexicalEnvironment

• VariableEnvironment와 동일하나 변경사항이 실시간으로 반영

    3. ThisBinding

• this 식별자가 바라봐야할 객체

VariableEnvironment, LexicalEnvironment 개요

 

a. VE와 LE의 비교

     i. 담기는 내용 : 동일

     ii. 스냅샷 유지여부

         1. VE : 유지

         2. LE : 유지X

      iii. 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용

 

b. 구성요소

    i. VE, LE모두 동일하며, "environmentRecord" 와 "outerEnvironmentReference"로 구성

    ii. environmentRecord(=record)

       1. 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장

       2. 함수에 지정된 매개변수 식별자 함수 자체 var로 선언된 변수 식별자 등

    iii. outerEnvironmentReference(=outer)

 

 LexicalEnvironment(1) - environmentRecord와 호이스팅

 

a. 개요

• 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장(수집)
• 수집 대상 정보: 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수
• 컨텍스트 내부를 처음부터 끝까지 순서대로 흝어가며 수집

b. 호이스팅

• 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태임 (JS엔진은 코드 실행 전 이미 모든 변수정보를 알고 있는 것)
• 변수 정보 수집 과정을 이해하기 쉽게 설명한 "가상 개념"

c. 호이스팅 규칙

• 매개변수 및 변수에 대한 호이스팅