[Javascript] Execute Context, Lexical Environment, Closure, Promise, Async/Await 요약

ES6는 설탕 문법이 많다.
- 이해하기 쉽고, 사용하기 편리한 문법이 많다.
- ECMAScript 2015부터는 언어 내부적인 동작에 관환 명세는 거의 변화가 없다.
- 새 버전의 언어에 추가될 기능은 깃허브 공개 저장소에서 공개적으로 명세 제안을 받고 토론과 심사를 거친 후 TC39위원회 승인을 거치면 공식 명세에 포함된다.
- 모듈 불러오기 방식 : ESM(표준), CommonJS

 

JS가 아닌 JS
- TS, WebASM, Rust
- 웹어셈블리의 경우 같은 기능을 하는 자바스크립트 코드에 비해 최적화 하지 않은 경우엔 9배 빠르고, 최적화 한 경우 21배 빠르다는 케이스 스터디의 발표가 있었다.
- 하지만 브라우저 환경의 자바스크립트는 특수한 몇몇 상황(게임, 그래픽 처리 등)을 제외하면 지금보다 굳이 더 빠를 필요가 없다. 보통 병목 현상은 백엔드 애플리케이션이나 브라우저 자체에서 발생하는 경우가 많다. 혹은 파일의 크기나 캐시 정책등 언어 외적인 문제에서 발생한다.


어휘적 환경 Lexical Environment
- 정의
    - 변수나 함수등의 식별자를 정의할 때 사용되는 명세
    - 중첩된 어휘적 환경에 기반해 동작
- Environment Record와 outer 속성을 포함
    - outer : 현재 Environment Record 바깥의 environment record
- 관련 문법
    - 함수 선언
    - 블럭문
    - Try~Catch의 Catch 절
- 종류
    - 전역환경
    - 모듈 환경
    - 함수 환경
- 자바스크립트 내부 엔진 명세중 자바스크립트 언어가 어떻게 파싱되고 어떻게 해석되고 어떻게 동작되어야 한다고 정의하는데 그중 개념적으로 제시된 하나. (구현x)

 

실행 컨텍스트 Execution Context
- 정의
    - 자바스크립트 코드가 실행되는 환경
    - 모든 JS 코드는 실행 컨텍스트 내부에서 실행된다.
    - 실행 컨텍스트 내부엔 몇 가지 상태 컴포넌트가 존재한다.
- 종류
    - 전역 실행 컨텍스트 global execution context
    - 함수 실행 컨텍스트 functional execution
        - 함수 실행 컨텐스트는 실행할 때 마다 생긴다.
    - eval 함수 실행 컨텍트 eval function execution context
- 컨텍스트 구조 (중요한 부분만 고름)
    - Function : null (함수의 실행으로 만들어 진거면 해당 함수 객체를 가르킴)
    - Lexical Environment
    - 접근할 변수나 함수가 여기 없으면? uncaught reference error
        - outer : 바깥 Environment Record (= dynamic parent activation record?)

            - 함수 실행 컨텍스트면 함수가 호출된 곳
        - [[Environment]] : 함수가 선언 될 때, 속해있던 Environment Record(= static parent acvitation record?)

            - 함수 실행 컨텍스트면 함수가 선언된 곳, 클로져 대상
    - Variable Environment


어휘적 범위 Lexical Scope
같은 범위 혹은 그 보다 안쪽의 코드에서 바깥 영역에는 접근할 수 있지만 그 역은 성립x -> 바깥으로만 갈 수 있으니까

 

클로져 Closure
선언될 때의 어휘적 범위를 그대로 유지한 함수.
어휘적 범위 바깥에서 해당 범위에 접근할 수 있다.

 

엄격한 모드
- 진입 방법
    - "use strict" : 전영 영역, 함수 내에 표기
    - ES2015 모듈 자동 적용
- 일반 모드와의 차이
    - 에러를 명시적으로 발생 시킨다
    - 안쓰면 console.error가 안나오고 그냥 무시됨
    - JS 엔진 최적화를 어렵게 하는 실수 방지
    - <script type="module" src="app.js"></script>와 같은 방법을 사용해 모듈을 불러오면 자동으로 엄격한 모드가 적용됨
- 엄격한 모드 외의 엄격함
    - JS의 이상한 동작은 독특한 형변환이 원인인 경우가 많다
    - `===` 사용 습관화
    - 명시적 형변환 활용


비동기 자바스크립트
- 비동기 처리는 필연
    - 기능 대부분을 외부 API에 의존하기 때문
    - 외부 API를 호출하고 결과를 콜백으로 많이 전달 받음
- 자바스크립트는 싱글 스레드 언어
    - 이벤트 루프와 스택을 통해 스케줄링
        - 자바스크립트의 동시성 (concurrency) 처리 모델의 기본 원리

        - 코드 실행, 이벤트 처리, 다음 처리할 동작을 정하는 것까지 다 이벤트 루프가 기반이 된다.
            - Memory Heap, Call Stack, Event Queue
    - UI 업데이트, 사용자 이벤트도 모두 같은 스레드에서 처리
- 콜백 지옥은 해결된 문제
    - Promise, async, await
    - 함수 분리 등의 코딩 패턴을 적용
    - early return
    - 함수 이름 결정에 생각보다 시간을 많이 씀

 

Promise
- 상태
    - 대기 pending
    - 이행 fulfilled
    - 거부 rejected
- 비동기 처리 후 뒤의 두 가지 상태 반환
- 한 번 상태가 결정된 Promise의 상태는 변경 불가
- Promise.resolve, Promise.reject는 상태가 결정된 Promise 반환
- Promise의 정적 메소드를 통해 다중 promise를 처리
    - all()
    - allSettled()
    - any()
    - race()

 

Async / Await
- 항상 Promise를 반환
- 사용시, 성공은 return, 실패는 에러를 throw한다.

```
  // 아래 둘은 같다
  const eg1 = async () => 'name';
  const eg2 = () => Promise.resolve('name');
```