From be379c0aec37780cc4068e7b0a9b3037947fd3d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=8B=A0=EC=A4=80=ED=98=81?= Date: Sat, 4 Nov 2023 13:48:24 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EC=8B=A4=ED=96=89=EC=BB=A8=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=5F=EC=8B=A0=EC=A4=80=ED=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\213\240\354\244\200\355\230\201.md" | 217 ++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 "week06_\354\213\244\355\226\211\354\273\250\355\205\215\354\212\244\355\212\270/\354\213\240\354\244\200\355\230\201.md" diff --git "a/week06_\354\213\244\355\226\211\354\273\250\355\205\215\354\212\244\355\212\270/\354\213\240\354\244\200\355\230\201.md" "b/week06_\354\213\244\355\226\211\354\273\250\355\205\215\354\212\244\355\212\270/\354\213\240\354\244\200\355\230\201.md" new file mode 100644 index 0000000..8e61ec2 --- /dev/null +++ "b/week06_\354\213\244\355\226\211\354\273\250\355\205\215\354\212\244\355\212\270/\354\213\240\354\244\200\355\230\201.md" @@ -0,0 +1,217 @@ +### **1\. 소스코드의 타입 종류 4가지는?** + +- 전역 코드  -> 전역 실행 컨텍스트 + +- 함수 코드  -> 함수 실행 컨텍스트 + +- eval 코드   -> eval 실행 컨텍스트 + +- 모듈 코드  -> 모듈 실행 컨텍스트 + +### **2\. 자바스크립트 엔진은 소스코드를 2개의 과정으로 나누어 처리한다. 이에 대해 설명하세요** + +**- 소스코드의 평가와 소스코드의 실행 과정으로 나누어 처리한다.** + +**\- 평가** : 선언문만 먼저 실행, 실행 컨텍스트 생성, 생성된 변수나 함수 식별자를 키로 만들어 실행 컨텍스트가 관리하는 **스코프(렉시컬 환경의 환경 레코드**)에 등록한다. + +**- 실행** : 소스코드가 순차적으로 실행된다. 소스코드에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 **스코프**에서 검색해 취득한다. + +### **3\. 실행 컨텍스트가 어떻게 평가되고 실행되는지 간단히 설명해보세요** + +**- 전역코드 평가 -> 전역코드 실행 -> 전역코드 실행 중 함수가 호출되면 일시 중단 -> 함수 코드 평가 -> 함수 코드 실행** + +### **4\. 실행컨텍스트가 하는  일은 무엇인가?** + +> \- 코드가 실행되려면 스코프를 구분하여 식별자와 바인딩된 값이 관리되어야한다. +> \- 중첨관계에 의해 스코프 체인을 형성하여 식별자를 검색할 수 있어야 한다. +> \- 전역 객체의 프로퍼티도 전역 변수 처럼 검색할 수 있어야 한다. +> \- 함수 호출이 종료되면 함수 호출 이전으로 되돌아가기 위해 현재 실행 중인 코드와 이전에 실행하던 코드를 구분하여 관리해야한다. + +**\- 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리** + +**\- 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역** + +렉시컬 환경 : 식벽자와 스코프를 관리 + +코드 실행 순서 : 실행 컨텍스트 스택으로 관리 + +### **5\. 실행 컨텍스트 스택이란?** + +\- 코드의 실행 순서를 관리하는 자료구조 + +### **6\. 렉시컬 환경이란?** + +\- 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조 + +\- 렉시컬 스코프의 실체 + +\- **렉시컬 환경 컴포넌트(LexicalEnvironment)**와 **가변 컴포넌트(VariableEnvironment)**로 구성 + +몇가지 상황에 따라 **가변 컴포넌트(VariableEnvironment)**를 위한 새로운 렉시컬 환경이 생성되고, + +이때 **가변 컴포넌트(VariableEnvironment)**와 **렉시컬 환경 컴포넌트(LexicalEnvironment)**의 내용이 달라지는 경우가 있다. + +> strict mode와 eval 코드, try/catch와 같은 특수한 상황을 제외하고, +> **렉시컬 환경 컴포넌트(LexicalEnvironment)**와 **가변 컴포넌트(VariableEnvironment)를 구분하지 않고** **렉시컬 환경으로 통일해** 간략하게 설명한다! + +**즉 렉시컬 환경은 다음과 같이 표현한다.** + +![image](https://github.com/prgrms-web-devcourse/FEDC5_JavaScript_study/assets/90139306/b3fe1b46-49e4-41f1-99d4-f81a20d6a138) + +**환경 레코드 :** 스코프에 포한된 식별자를 등록하고, 등록된 식별자에 바인딩된 값을 관리하는 저장소 + +**외부 렉시컬 환경에 대한 참조 :** 상위스코프를 가리킴, 해당 실행컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경을 말한다. - 단방량 링크드 리스트인 스코프 체인을 구현한다. + +### **7\. 실행컨텍스트에서 자바스크립트는 어떻게 WEB API를 사용하는 걸까?** + +\- 전역 코드 평가 이전에 **전역 객체**라는 것을 생성한다. + +\- 전역 객체에는 **빌트인 전역 프로퍼티**와, **전역함수**, **표준 빌트인 객체**가 추가되어 동작환경에 따라 **클라이언트 사이드 Web API**(DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등) 또는 특정 환경을 위한 **호스트 객체**를포함 + +\- 전역 객체도 **Object.prototype을 상속받아 프로토타입 체인의 일원**이 된다. + +### **8\. 전역 코드 평가의 과정에 대해 설명해주세요** + +1. 전역 실행 컨텍스트 실행 + +2. 전역 렉시컬 환경 생성 + +3. 전역 환경 레코드생성 + +4. 객체 환경 레코드 생성 + +5. 선언적 환경 레코드 생성 + +6. this 바인딩 + +7. 외부 렉시컬 환경에 대한 참조 결정 + +전역 실행 컨텍스트 생성 -> + +전역 렉시컬 환경 생성 -> + +전역 환경 레코드 생성(**객체 환경 레코드**와 **선언적 환경 레코드**로 구성) + +![image](https://github.com/prgrms-web-devcourse/FEDC5_JavaScript_study/assets/90139306/ac9d99f6-1015-4dc3-b9e2-036258c618cb) + +**객체 환경 레코드에는** + +\- var 키워드로 선언한 전역 변수 + +\- 함수 선언문으로 정의한 전역 함수 + +\- 빌트인 전역 프로퍼티 + +\- 표준 빌트인 객체 + +**선언적 환경 레코드에는** + +\- let, const 키워드로 선언한 전역 변수를 관리 + +객체 환경 레코드와 선언적 환경 레코드는 **서로 협렵하여 전역 스코프와 전역 객체를 관리한다.** + +### **9\. 호이스팅이 발생하는 원인** + +var 키워드로 선언한 변수는 + +전역 코드 평가 시점에 객체 환경 레코드에 바인딩된 BindingObject를 통해 + +전역 객체에 변수 식별자를 키로 등록하고, + +암묵적으로 undefined를 바인딩한다. + +**따라서 var 키워드로 선언한 변수는 코드 실행 단계에서 변수 선언문 이전에도 참조할 수 있다.** + +하지만 선언문 이전에 참조한 변수의 값은 무조건 undefined다. + +함수 표현식도 이와 동일하게 동작 + +**선언과 초기화를 같이한다해도 무조건 undefined임!** + +함수 선언문으로 정의한 함수는 평가되면 + +함수 이름과 동일한 이름의 식별자를 + +**객체 환경 레코드에 바인딩된 BindingObject를 통해 전역 객체에 키로 등록하고 생성된 함수 객체를 즉시 할당한다.** + +**그래서 함수 선언문은 선언 이전에 호출 가능함!** + +**이게 변수 호이스팅과 함수 호이스팅의 차이다.** + +**10\. let과 const는 호이스팅이 일어나지 않는다?** + +**let과 const 키워드로 선언한 변수도 변수 호이스팅이 발생하는 것은 변함이 없다!** + +단 let 과 const 키워드로 선언한 변수는 **런타임에 컨트롤이 변수 선언문에 도달하기 전(초기화 단계)**까지 + +**일시적 사각지대(TDZ)**에 빠지기 때문에 참조할 수 없다. + +호이스팅이 발생하기 때문에 참조 에러가 발생한다. + +![image](https://github.com/prgrms-web-devcourse/FEDC5_JavaScript_study/assets/90139306/9b6c7d61-2c38-4edf-b797-8a504168c07d) + +### **10\. this 바인딩** + +전역 환경 레코드의 \[\[GlobalThisValue\]\] 내부 슬롯에 this가 바인딩된다. + +일반적으로 전역 코드에서 this는 전역 객체를 가리키므로 + +\[\[GlobalThisValue\]\] 내부 슬롯에는 **전역 객체가 바인딩된다.** + +![image](https://github.com/prgrms-web-devcourse/FEDC5_JavaScript_study/assets/90139306/8ad87f3e-bfa1-4afd-8561-30e8ccf2eccd) + +**참고로 객체 환경 레코드와 선언적 환경 레코드에는 this바인딩이 없다.** + +**this 바인딩은 전역 환경 레코드와 함수 환경 레코드에만 존재한다.** + +### **11\. 변수 할당문 또는 함수 호출문을 실행하려면 선언된 식별자인지 확인해야한다. 어느 스코프의 식별자를 참조하면 되는지 결정하는 것을 식별자 결정이라 한다. 이때 실행 컨텍스트의 렉시컬 환경에서 식별자를 검색할 수 없으면 어떻게 동작하는가?** + +\- 현재 실행 중인 실행 컨텍스트의 렉시컬 환경에서 식별자를 검색할 수 없으면 외부 렉시컬 환경에 대한 참조가 가리키는 렉시컬 환경, 즉 상위 스코프로 이동하여 식별자를 검색한다. + +\- 이것이 스코프 체인의 동작 원리다. + +### **12\. 함수 코드 평가의 과정을 설명해주세요** + +1\. 함수 실행 컨텍스트 생성 + +2\. 함수 렉시컬 환경 생성 + +3. 함수 환경 레코드 생성 + +4. this 바인딩 + +5. 외부 렉시컬 환경에 대한 참조 결정 + +![image](https://github.com/prgrms-web-devcourse/FEDC5_JavaScript_study/assets/90139306/e0ce8229-184d-451a-8947-90e8e2fc655a) + +### **13\. 함수 코드 평가에서의 this 바인딩** + +함수 환경 레코드의 \[\[ThisValue\]\] 내부 슬롯에 this가 바인딩 된다. + +**일반함수로 호출**되었다면 **this는 전역 객체를 가리킨다.** + +함수 내부에서 this를 참조하면 함수 환경 레코드의 \[\[ThisValue\]\] 내부 슬롯에 바인딩 되어있는 객체가 반환된다. + +### **14\. 클로저가 발생하는 이유** + +**자바스크립트는 함수를 어디서 호출했는지가 아니라 어디에 정의했는지에 따라 상위 스코프를 결정한다.** + +자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 + +현재 실행 중인 실행 컨텍스트의 렉시컬 환경(상위 스코프)을 + +함수 객체의 내부 슬롯\[\[Environment\]\] 에 저장한다. + +만약 실행중인 실행 컨텍스트가 + +실행컨텍스트에서 제거되었다고 해서 + +함수 렉시컬 환경까지 즉시  소멸하지 않는다. + +렉시컬 환경은 실행 컨텍스트에 의해 참조되기는 하지만 독립적인 객체다. + +객체를 포함한 모든 값은 누군가에 의해 참조되지 않을 때 + +비로소 가비지컬렉터에 의해 메모리 공간의 확보가 해제되어 소멸된다. + +**그래서 만약 함수 렉시컬환경을 누군가 참조하고 있다면 함수 렉시컬 환경을 소멸하지 않는다.**