[자바스크립트 중고급] 0. 중고급 강좌 소개, 범위

Speedwell🍀·2022년 1월 24일
0

강좌 방향 : 자바스크립트(ES5) 엔진 처리 중심

엔진 관점의 핵심 키워드: Execution Context, Identifier Resolution

Execution Context 형태

  • book() 함수가 호출되면

    • show Function 오브젝트 생성
    • show의 [[Scope]]에 스코프 설정
  • show() 함수가 호출되면 EC 생성

    • 함수 실행을 위한 Context 환경 구축
    • LEC, VEC, TBC 생성 첨부
    • LEC에 ER, OLER 첨부
    • ER에 DER, OER 첨부
  • DER에 show()의 변수, 함수 기록

  • OLER에 show의 [[Scope]]를 설정

  • this 바인딩 컴포넌트에 this 참조 설정

show 실행 컨텍스트(EC): {
	렉시컬 환경 컴포넌트(LEC): {
    	환경 레코드(ER): }
        	선언적 환경 레코드(DER): {
            	title: "JS책"
            }.
            오브젝트 환경 레코드(OER): {}
        },
        외부 렉시컬 환경 참조(OLER): {
        	point: 123,
            getPoint: function(){}
        }
   },
   변수 환경 컴포넌트(VEC): {},
   this 바인딩 컴포넌트(TBC): {
   		글로벌 오브젝트(window)
   }
}

식별자 해결 (Identifier Resolution)

  • 식별자 해결

    • 사용할 변수/함수를 결정하는 것
    • 예: point 변수
    • 신속, 정확한 검색을 위해 스코프 필요
  • 스코프에서 이름을 찾기 위해

    • 스코프에 이름을 설정
    • 값은 변경되지만, 이름은 변경되지 않음
    • 식별자 해결 대상은 이름
  • resolution의 사전적 의미: 해결, 결정

    • 결정도 시맨틱적으로 맞음

스코프 용도

  • 식별자 해결을 수단, 방법

    • 스코프가 목적이 아님
  • 식별자가 유일하면

    • 스코프는 필요하지 않음
    • 하지만, 유일하게 작성하는 것은 불가능
    • 그래서 스코프가 필요
var point = 100;
function getPoint(){
  	var point = 200;
  	return point;
};
var result = getPoint();
console.log(result);

// 200

ES3: scope chain

  • scope chain은

    • 실행 콘텍스트와 관련이 있으며
    • 식별자 해결을 위해 사용
  • scope chain은

    • 식별자를 검색하기 위한
    • {name: value} 리스트
  • 함수가 호출되면

    • scope를 생성하고
    • 함수의 변수와 함수를 {name: value} 형태로 설정
  • 생성한 scope를

    	- scope chain에 연결하고
    • scope chain에서 식별자를 해결
  • 동적 처리

  • ES3의 실행 콘텍스트 환경

    • scope chain
    • Activation Object

스펙의 scope chain 사용

  • 스펙의 scope chain 사용 횟수

    • ES3: 37
    • ES5: 1
    • ES6: 0
  • ES5: 바뀐 것을 나타내기 위해 사용

    • Lexical Environment의 Declarative Environment Record에 함수의 변수와 함수 이름을 바인드
    • scope chain을 사용하지 않으며 DER에서 변수와 함수 이름을 검색

Lexical Environment(정적 환경)

  • function 키워드를 만나면

    • function 오브젝트를 생성하고
    • 스코프를 FO의 [[Scope]]에 설정
    • 이것은 함수 밖의 스코프가 설정되는 것
  • 이 시점에서 스코프가 결정됨

    • 이것이 Lexical Environment
  • 함수가 호출되면

    • FO의 [[Scope]]를
    • 실행 콘텍스트의 렉시컬 환경 컴포넌트의외부 렉시컬 환경 참조에 설정
var point = 123;
function book(){
  function getPoint(){};
};
book();

// 123

var 키워드 문제

  • 함수에서 var 키워드를 사용하지 않고

    • 변수를 선언하면 글로벌 오브젝트에 설정됨
    • 렉시컬 환경 구조에 맞지 않음
  • ES5 해결 방법

    • "use strict" 사용
  • ES6 해결 방법

    • let 변수, const 변수
    • 변수 자체에 스코프 제약을 둠

동적 환경

  • 실행 시점에 스코프 결정

    • with 문
    • eval() 함수
  • with 문은

    • strict 모드에서 에러 발생
  • eval() 함수는

    • 보안에 문제 있음

Node.js 코드 형태

  • 서버 프로그램 고려 사항

    • 동접 10K
  • JS는 Single Thread

  • Node.js에서 JS는 비동기 처리

    • C++의 Semapore, Mutex
  • Context 형태가 효율성이 높음

    • ES5의 실행 콘텍스트는 Context 형태
  • 실행 콘텍스트에

    • 최적화된 형태로 코드를 작성해야 하며
    • 이를 위해 엔진 처리를 이해할 필요가 있음

강좌 범위

*** ES5 스펙 ***

10. Executable Code and Execution Contexts

10.1 Types of Executable Code
10.1.1 Strict Mode Code

10.2 Lexical Environments
10.2.1 Environment Records
10.2.2 Lexical Environment Operations
10.2.3 The Global Environment

10.3 Execution Contexts
10.3.1 Identifier Resolution

10.4 Establishing an Execution Context
10.4.1 Entering Global Code
10.4.2 Entering Eval Code
10.4.3 Entering Fuction Code

10.5 Declaration Binding Instantiation

10.6 Arguments Object
  • 자바스크립트(ES5) 엔진 처리 중심

    • 위의 항목을 모두 다룸
    • 바탕 개념과 활용을 다룸
  • 기능보다 논리에 중점을 두고 접근

    • function 오브젝트 구조와 생성
    • 실행 콘텍스트
    • 식별자 해결, 스코프
    • this, prototype, OOP
    • 호이스팅, 오버로딩, 아규먼트
    • 재귀 함수, 즉시 실행 함수, 클로저

0개의 댓글