본 정리글은 인프런 김영보 강사님의 자바스크립트 중고급 : 근본 핵심 논리 강의를 수강하고 정리한 글입니다.

자바스크립트 중고급 : 근본 핵심 논리

📖 Execution Context 2

📌 this 바인딩 컴포넌트

• 목적 : this로 함수를 호출한 오브젝트의 프로퍼티에 악세스
  ex) this.propertyName

• 악세스 메커니즘
  -- obj.book() 형태에서 this로 obj를 참조할 수 있도록 this 바인딩 컴포넌트에 obj 참조를 설정

• obj의 프로퍼티가 변경되면 동적으로 참조
  -- 설정이 아닌 참조이기 때문

var obj = {point : 100;};
obj.getPoint = function(){
	return this.point;
};
obj.getPoint();

실행 콘텍스트 (EC) : {
 	렉시컬 환경 컴포넌트 (LEC) : {
     	환경 레코드 (ER) : {
         	선언적 환경 레코드 (DER) : {},
            오브젝트 환경 레코드 (OER) : {}
        },
        외부 렉시컬 환경 참조 (OLER) : {}
    },
    변수 환경 컴포넌트 (VEC) : {},
    this 바인딩 컴포넌트 (TBC) : {
     	point : 100,
        getPoint : function(){}
    }
}

getPoint() 함수에서 100이 반환되는 과정을 살펴보자

--------------------------------------------- 준비 단계 ---------------------------------------------

1. 마지막 줄에서 obj.getPoint() 함수 호출

2. 실행 컨텍스트 생성

3. 3개의 컴포넌트 생성 - 렉시컬 환경 컴포넌트, 변수 환경 컴포넌트, this 바인딩 컴포넌트

4. this 바인딩 컴포넌트에 getPoint()에서 this로 obj의 프로퍼티를 사용할 수 있도록 바인딩

--------------------------------------------- 초기화 단계 ---------------------------------------------

5. 파라미터, 함수선언문, 변수 선언 없음

--------------------------------------------- 실행 단계 ---------------------------------------------

6. return this.point 실행

7. this 바인딩 컴포넌트에 point 검색
   -- getPoint() 함수를 호출한 오브젝트가 this 바인딩 컴포넌트에 참조된 상태

8. this 바인딩 컴포넌트에 point 프로퍼티가 있으므로 100 반환

--------------------------------------------- 추가설명 ---------------------------------------------

9. obj.getPoint()에서 obj의 프로퍼티가 this 바인딩 컴포넌트에 바인딩 되도록 의도적으로 설계

📌 호출 스택

function one(){
 	two();
  	log(1);
};
function two(){
  	three();
  	log(2);
};
function three(){
 	log(3); 
};
one();

3
2
1

• Call Stack : 실행 콘텍스트의 논리적 구조

• First In Last Out 순서 - JS는 쓰레드가 1개이기 때문에 성립되는 구조
  -- 함수가 호출되면 스택의 가장 위에 실행 콘텍스트 위치
  -- 다시 함수 안에서 함수를 호출하면 호출된 함수의 실행 콘텍스트가 스택 가장 위로 놓임
  -- 함수 종료 시 스택에서 빠져나옴 (FILO 순서)
  -- 가장 아래는 글로벌 오브젝트의 함수 위치

📌 함수 호출

• 함수가 호출되면 3개의 파라미터 값을 실행 콘텍스트로 넘겨줌
  -- 함수를 호출한 오브젝트, 함수 코드, 호출한 함수의 파라미터 값

• 함수를 호출한 오브젝트를 this 바인딩 컴포넌트에 설정하여 this 참조

• 함수 코드
  -- function 오브젝트의 [[Code]]에 설정

• 호출한 함수의 파라미터 값
  -- 호출된 함수의 Argument 오브젝트에 설정

📌 파라미터 값 매핑

• 파라미터 값 매핑
  -- 호출한 함수에서 넘겨준 파라미터 값을 호출된 함수의 파라미터 작성 순서에 맞추어 값을 매핑하는 것

• 엔진 처리 관점
  -- 실행 콘텍스트로 넘겨준 파라미터 값과 function 오브젝트의 [[FormalParameters]]에 작성된 이름에 값을 매핑하고 결과를 선언적 환경 레코드에 설정하는 것
  -- [[FormalParameters]] : 호출된 함수의 파라미터에 작성된 이름이 여기에 있음 - function 키워드를 만나 function 오브젝트를 만들 때 설정함

• 파라미터 이름에 값 매핑 방법

var obj = {};
obj.getTotal = function(one, two){
 	return one + two; 
};
log(obj.getTotal(11, 22, 77));

33

1. 실행 콘텍스트로 넘겨준 파라미터 값을 설명 편의를 위해 param이라 함

2. getTotal 오브젝트의 [[FormalParameters]]에서 호출된 함수의 파라미터 이름을 구함
   -- 설명 편의를 위해 name이라 함
   -- name은 ["one", "two"] 형태 - 배열
   -- [[FormalParameters]]는 function 오브젝트 생성할 때 설정

3. name 배열을 하나씩 읽는다 - ["one", "two"]

4. param에서 index번 째의 값을 구한다 - index에 값이 없으면 undefined 반환

5. name의 파라미터 이름과 4번에서 구한 값을 선언적 환경 레코드에 {one : 11, two : 22}의 형태로 설정 - 같은 이름이 있으면 값이 대체됨

6. name을 전부 읽을 때 까지 3번에서 5번 까지 반복

📌 파라미터 값 할당 기준

var obj = {};
obj.getTotal = function(one, two){
 	var one;
  log (one + two);
  two = 77;
  log("two : " + two);
};
obj.getTotal(11, 22);

33
two : 77

• 아래의 설명을 따라가면서 {key : value} 형태로 만들어 보세요

------------------------------------------ 초기화 단계 ------------------------------------------

1. obj.getTotal(11, 22)가 함수에 호출되면 파라미터 값을 실행 콘텍스트로 넘겨 줌

2. 파라미터 이름에 값을 매핑하여 선언적 환경 레코드에 설정
   -- {one : 11, two : 22}

3. var one - 선언적 환경 레코드에 one의 존재 체크
   -- 파라미터 이름을 설정 하였으므로 존재하며, one 기록 X

4. two = 77 - 선언적 환경레코드에 two의 존재 체크
   -- 파라미터 이름을 설정 하였으므로 존재하며, two 기록 X

5. 함수를 초기화 할 코드 X -> 첫 번째 줄로 이동하여 함수 코드 실행

------------------------------------------ 실행 단계 ------------------------------------------

6. 선언적 환경 레코드는 {one : 11, two : 22} 상태

7. var one - 단지 변수 선언 -> 처리 X

8. console.log(one + two) - 선언적 환경 레코드에서 one, two 값 구함
   -> 11 + 22 = 33 출력

9. two = 77 - 값을 할당하는 코드이며 실행 단계 이므로 선언적 환경 레코드의 two에 77 할당
   -> {one : 11, two : 77}

10. console.log("two : " + two) - 선언적 환경 레코드에서 two 값 구함
    -> two = 77 출력