Cộng đồng Hỏi & Đáp của Inflearn

// 실행 콘텍스트 정리
function book() {
  function get() {
    return point;
  };
  var point = 123;
  return get();
};
console.log(book());
// 123

• function 키워드를 만나서 function 오브젝트 생성
• 이때 book()의 [[Scope]]에 글로벌 스코프 설정
• 함수 표현식과 변수가 없어서 코드 실행
• book() 함수를 호출
• 엔진은 실행 콘텍스트를 생성하고 실행 콘텍스트 안으로 이동

-- 준비

• 컴포넌트를 생성하여 실행 콘텍스트에 첨부
• 환경 레코드를 생성하여 렉시컬 환경 컴포넌트에 첨부
  • book 함수 안의 함수, 변수를 환경 레코드에 바인딩
• 외부 렉시컬 환경 참조를 생성하여 렉시컬 환경 컴포넌트에 첨부
  • 해당 사항 없음.
  • function 오브젝트의 [[Scope]] 참조 (글로벌 스코프)

실행 콘텍스트: {
  렉시컬 환경 컴포넌트: {
    환경 레코드: { },
    외부 렉시컬 환경 참조: { }
  },
  변수 환경 컴포넌트: { },
  this 바인딩 컴포넌트: { }
}

--초기화--

• 함수 선언문을 만나 get function 오브젝트 생성
• 이때 내부의 [[scope]]에 스코프 설정
• 변수에 초기값 설정
• 여기까지 외부에 실행 상태를 제공하지 않음

실행 콘텍스트: {
  렉시컬 환경 컴포넌트: { 
    환경 레코드: {  
      get: function(){},
      point: undefined
    },
    외부 렉시컬 환경 참조: { }
  },
  변수 환경 컴포넌트: { },
  this 바인딩 컴포넌트: { }
}

-- 실행

• 함수 안의 코드 실행
  • point 변수에 123 할당
  • return get();
• get() 함수 호출
• 엔진은 실행 콘텍스트 생성, 실행 콘텍스트 안으로 이동

실행 콘텍스트: {
  렉시컬 환경 컴포넌트: { 
    환경 레코드: { },
    외부 렉시컬 환경 참조: {
      point: 123
    }
  },
  변수 환경 컴포넌트: { },
  this 바인딩 컴포넌트: { }
}

-- 다시 준비

• 위의 준비 단계를 거친다.
• 외부 렉시컬 환경 참조를 생성하여 렉시컬 환경 컴포넌트에 첨부
  • point: 123

-- 다시 초기화

• 함수 안에 함수 선언문과 함수 표현식 변수가 없다.

-- 다시 실행

• 함수 안의 코드를 실행한다.
  • return point;
• 환경 레코드에서 먼저 찾고 없으면 외부 렉시컬 환경 참조에서 point를 찾는다.
• 실행 콘텍스트 안의 관련된 함수와 변수 사용 가능
• 외부 렉시컬 환경 참조에 있는 point 변수를 사용해서 123 반환
• conosole에서 반환 값인 123이 출력됨.

이렇게 이해했습니다.!