[Javascript] 실행 컨텍스트 - 스코프, 변수, 객체, 호이스팅

실행 컨텍스트

스코프

• 실행 컨텍스트 = 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
• js는 실행 컨텍스트가 활성화되는 시점에

1. 선언된 변수를 위로 끌어올린다. = 호이스팅(hoisting)
2. 외부 환경 정보를 구성한다.
3. this 값을 설정한다.

   이 3가지 역할을 수행함. -> 다른 언어들과는 조금 다른 특징들 발생

 

 

1. 실행 컨텍스트의 구성

-실행 컨텍스트(=객체) 내에 있는 코드들을 실행할 때 -> 컨텍스트를 구성 + 콜스택에 쌓아올림

-특정 실행 컨텍스트가 생성되는(또는 활성화되는) 시점이 콜 스택의 맨 위에 쌓이는(노출되는) 순간을 의미 -> 현재 실행할 코드에 해당 실행 컨텍스트가 관여하게 되는 시점을 의미

 

 

2. 실행 컨텍스트 내에 실제로 담기는 정보

❶VE (variable environment)

-여기서 var a와 같은, 식별자 정보(record)들이 저장됨 : 함수에 지정된 매개변수 / 함수 자체  / var로 선언된 변수 식별자 등

-외부환경 정보(outer environment reference) 가짐

-선언 시점의 snapshot -> 생길 때의 그 모습을 계속 간직하고, 실시간으로 반영하진 x

 

❷LE (lexical environment)

-VE와 동일한 것이라고 보면 됨. 단, 변경사항을 실시간으로 반영한다는 점이 차이점.

 

❸This binding

-This가 function 안에서 어떤 기능을 할지 결정해주는 것

-this식별자가 바라봐야 할 객체를 지정

 

 

3. 호이스팅

-컨텍스트 내부를 훑으며 수집 (단, 코드의 수집과 실행 순서는 다름)

-호이스팅 : 사람이 이해하기 쉽도록 만든 가상개념

-LE가 가지고 있는 record 정보를 수집하는 과정이 호이스팅 

 

①매개변수 및 변수 -> 선언부를 호이스팅

②함수 선언 -> 전체를 호이스팅

 

※cf. 함수 선언문 vs 함수 표현식

//함수 선언문 : 전체가 호이스팅됨

function sum (a, b) {
  return a + b;
}

//함수 표현식 : 변수 부분만 호이스팅됨

multiply = function (a, b) {
  return a + b;
}

❗️협업 시에는 함수 표현식을 많이 사용하자. 함수 선언문의 경우 전체가 다 위로 호이스팅되기 때문에, 아래 코드가 줄줄이 영향 받을 수 있다[...]

 

 

4. 스코프, 스코프 체인, outer

• 스코프
• 스코프 체인 : 식별자의 유효범위를, 안에서 -> 바깥으로 차례로 검색해 나가는 것

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

 

※스코프 체인

var a = 1;

var outer = function() {

	var inner = function() {
		console.log(a); // 변수 a 호이스팅에 의해, 3
		var a = 3;
	};
	inner();
	console.log(a); //inner가 이미 콜스택에서 사라졌으므로, 참조 불가. 따라서 3이 아닌 1
    
};
outer();
console.log(a); // outer가 콜스택에서 사라졌으므로, 참조 불가. 따라서 전역context에서의 1

콜스택 : 이런 느낌

❗️

각각의 실행 컨텍스트는 LE 안에 record와 outer를 가지고 있다.

outer 안에는 <- 그 실행 컨텍스트가 선언될 당시의 LE정보가 다 들어있다. (outer 입장에서는 전역 컨텍스트인 셈)

따라서 scope chain에 의해, 상위 컨텍스트의 record를 읽어올 수 있다.

❗️