JS(4) - 실행 컨텍스트

soo's·2023년 4월 6일
0

TIL

목록 보기
30/53
post-thumbnail

𝟏. 실행 컨텍스트

실행 컨텍스트란 실행할 코드의 환경 정보를 담고 있는 객체다.
각각의 실행 컨텍스트를 콜 스택에 쌓아올린다.
콜 스택은 LIFO(last in first out)로 가장 윗 부분에 쌓인 것이 가장 먼저 실행되는 형태라고 보면된다.

실행 컨텍스트 객체에 실제로 담기는 정보는 크게 3가지
1. Variable Environment (VE)
2. Lexical Environment (LE)
3. this 바인딩

VE와 LE는 모두 식별자 정보를 기록하는 Record와 외부환경 정보를 담고있는 outer를 가진다.
하지만 VE는 LE의 snapshot으로, LE만 변경사항을 반영한다.

𝟐. LE - record와 hoisting

레코드에는 현재 컨텍스트와 관련된 식별자 정보를 수집한다.
수집 대상은 함수에 지정된 매개변수 식별자, 함수 선언문으로 작성된 함수 그 자체, var로 선언된 변수 식별자 등이 있다.

(1). 매개변수 및 변수는 선언부 호이스팅


function a () {
	var x = 1;
    console.log(x);
    var x;
    console.log(x);
    var x = 2;
    console.log(x);
}
a(1);

위와 같은 코드는 호이스팅 과정을 통해 아래와 같이 동작한다.


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

즉, 변수의 선언부만 호이스팅이 되고 할당 부분은 선언부가 다 호이스팅 된 이후 순서대로 실행된다.

(2) 함수 전체 호이스팅


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

function a () {
	var b; // 변수 선언부만 호이스팅
	function b() { } // 함수 선언문은 b라는 변수에 함수를 할당한 것과 같음, 함수 선언문은 함수 전체가 호이스팅
  	console.log(b);	
  	b = 'bbb';
	console.log(b);
	console.log(b); 
}
a() // function(b) bbb bbb

첫 번째 코드의 함수를 호이스팅 과정을 보여주게 적은 것이 두 번째 코드다.
변수 선언부만 호이스팅되고, 함수 선언문으로 작성된 함수b는 전체가 호이스팅 된다.

결론적으로
LE는 record와 outer 2가지의 정보를 가지고 있는데, record의 수집과정이 hoisting이다.


𝟑. LE - outer와 scope chain

스코프 체인에 들어가기 앞서서 스코프란 무엇인지 알아보자.
스코프는 변수의 유효범위다. JS(ES5)에서는 이 스코프가 함수 단위이다.

function outer () {
	var a = 10;
    console.log(a);
}
outer();

예를 들어 위의 코드에서, a라는 변수의 스코프는 outer() 함수에 속해있다.



var c = 4;

function outer() {
  var a = 1;
  var b = 3;

  function inner() {
    var a = 2;
    console.log(a); // 2
    console.log(b); // 3
    console.log(c); // 4
  }
	
  inner();
}

outer();

outer를 한 마디로 정리하면 외부 환경의 참조 정보이다.
우리가 변수를 참조할 때 스코프를 확인하는데, 그것은 함수 단위라고 했다.
따라서 위 코드에서는 전역 스코프가 있고, outer 스코프가 있고 inner 스코프가 있다.
console.log(a)를 출력하기 위해 a 값을 그것을 실행하고 있는 inner 스코프에서 찾는다. 따라서 a는 2를 출력한다.
그 다음, b를 출력하기 위해 inner 스코프에서 찾지만 없기 때문에 inner의 외부 환경인 outer 스코프에서 찾는다. 따라서 b는 3을 출력한다.
마지막으로 c는 inner 스코프에도 없고 outer에도 없다. 따라서 outer 함수의 외부 환경인 전역 스코프에서 찾는다. 따라서 c는 4를 출력한다.
이렇게 값을 찾기 위해 스코프를 연결해서 참조하는 것이 스코프 체인이다.

한 마디로 정리하면

각각의 실행 컨텍스트는 LE안에 record와 outer를 가지고 있고, outer 안에는 실행 컨텍스트가 선언될 당시의 외부 환경 정보가 담겨 있으니 scope chain에 의해서 상위 컨텍스트의 record를 읽어올 수 있다.

0개의 댓글