TIL_23_221130

23일 차 회고

실행 컨텍스트란?

콜스택

• 실행 컨텍스트란 실행할 코드에 제공할 환경정보들을 콜스텍에 모아 놓은 객체
• 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법 으로 코드의 환경 및 순서를 보장

  컨테스트의 구성방법
  1. 전역공간 (자동부여)
  2. eval()함수
  3. 함수(우리가 흔히 실행컨텍스트를 구성하는 방법)

실행 컨텍스트 객체

• 생성 시점 : 콜스택의 맨위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점
• 활성화 시점에 js엔진은 해당 컨텍스트에 관련된 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행컨텍스트 객체에 저장

  실행컨텍스트에 담기는 정보

  1. VariavleEnvironment
     • 현재 컨텍스트 내의 식별자 정보
     • 외부 환경 정보
     • 선언 시점 LexicalEnviroment의 snapshot
  2. LexicalEnviroment
     • VariavleEnvironment 와 동일 변경사항이 실시간으로 반영
  3. ThisBinding
     • this 식별자가 바라봐야할 객체

VE 와 LE 의비교

• 담기는 내용 : 동일
• 스냅샷 유지여부
  1. VE : 유지
  2. LE : 유지 X
• 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용

LexicalEnvironment - environmentRecord와 호스팅

environmentRecord

• 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장(수집)
• 수집 대상 정보 : 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등.
• 컨텍스트 내부를 끝까지 순서대로 훑어가며 수집

호이스팅

• 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행전 상태(js 엔진은 코드 실행 전 이미 모든 변수 정보를 알고 있다)
• 변수 정보 수집 과정을 이해 하기 쉽게 설명한 가상개념

호이스팅 규칙

• 식별자들을 최상단으로 끌어올려놓은 다음, 실제로 코드를 실행한다.

function a (x) {
  console.log(x);
  var x ;
  console.log(x);
  var x = 2;
  console.log(x);
}
//
function a () {
  var x = 1; // 매개변수 할당
  console.log(x);
  var x ;
  console.log(x);
  var x = 2;
  console.log(x);
}
a();
//
function a () {
  var x;
  var x;
  var x;

  x = 1;
  console.log(x); // 1
  console.log(x); // 1
  x = 2;
  console.log(x); // 2
}
a();

• 함수 호이스팅 : 함수는 함수 전체가 호이스팅 된다.

function a () {
  console.log(b);
  var b = 'bbb';
  console.log(b);
  function b () {};
  console.log(b);
}
a();

//변수의 경우 정의부만 호이스팅 되지만, 함수는 함수 전체가 호이스팅 된다.
function a () {
  var b;
  function b () {};

  console.log(b); // f b () {}
  b = 'bbb';
  console.log(b); // bbb
  console.log(b); // bbb
}
a();

• 함수 선언문 , 함수 표현식 : 함수선언문은 호이스팅에 영향을 받지만, 함수표현식은 호이스팅에 영향을 받지 않는다.
  - 함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.
  - 함수표현식은 함수선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.
  - 어떤 컨벤션을 갖던지 한가지만 정해서 사용하는 게 좋다.

  함수표현식의 선언이 호출보다 위에 있는 경우 - 정상 출력
  함수표현식의 선언이 호출보다 아래에 있는 경우 (var 변수에 할당) - TypeError
  함수표현식의 선언이 호출보다 아래에 있는 경우 (const/let 변수에 할당) - ReferenceError

console.log(sum(1,2))
console.log(multyply(3,4));

//함수 선언문
function sum (a,b){
	return a+b
}

//함수표현식
var multiply = function (a,b) {
	return a + b
}

LexicalEnvironment - 스코프, 스코프 체인, outerEnvironmentReference(=outer)

스코프

• 식별자에 대한 유효범위
• 대부분 언어에서 존재하며, js에서도 존재(ES5/ES6 조금 다름)

스코프 체인

• 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해 나가는 것

  • outer는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조
  • ex) a함수 내부에 b함수 선언 -> b함수 내부에 c함수 선언(Linked List)
  • 전역 컨텍스트의 LexicalEnvironment를 참조
  • 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에게만 접근이 가능

outerEnvironmentReference(=outer)

• 스코프 체인이 가능토록 하는 것 (외부 환경의 참조정보)

var a = 1;
var outer = function(){
	var inner = function (){
    	console.log(a);
      	var a = 3;
    }
    inner();
  	console.log(a);
}
outer();
console.log(a)

출처