실행컨텍스트(스코프, 변수, 객체, 호이스팅)_v3.6

✅실행컨텍스트(스코프, 변수, 객체, 호이스팅)

자바스크립트의 **실행 컨텍스트**는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 합니다.

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

이런 현상들 때문에 JS에서는 다른 언어랑은 다른 특징들이 나타난답니다.

 

(1) 실행 컨텍스트란?

실행 컨텍스트를 이해하기 위해서는, **콜 스택**에 대한 이해가 반드시 필요합니다. 자, 그 전에 **“스택”**이라는 개념에 대해서 먼저 이해를 해야겠네요.

 

스택(Stack) vs 큐(Queue)

(이미지 출처 : https://velog.io/@leejuhwan/스택STACK과-큐QUEUE )

• 콜 스택(call stack)
  1. 컨텍스트의 구성
     1. 구성방법(여러가지가 있지만, 사실 우리는 함수만 생각하면 돼요 👍)
        1. 전역공간
        2. eval()함수
        3. 함수(우리가 흔히 실행컨텍스트를 구성하는 방법)
     2. 실행컨텍스트 구성 예시 코드
     3. ✓ 자 먼저, 실행컨텍스트에 대해 생각하기 전에 여러분이 눈으로 한번 어떻게 실행될지 예상해보시겠어요? 👀
• 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체라고 했었죠. 그 객체. 즉, 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명드린 ‘스택’의 한 종류인 **콜스택**에 쌓아올립니다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있어요.
• 1. 컨텍스트의 구성
     1. 구성방법(여러가지가 있지만, 사실 우리는 함수만 생각하면 돼요 👍)
        1. 전역공간
        2. eval()함수
        3. 함수(우리가 흔히 실행컨텍스트를 구성하는 방법)
     2. 실행컨텍스트 구성 예시 코드
     3. ✓ 자 먼저, 실행컨텍스트에 대해 생각하기 전에 여러분이 눈으로 한번 어떻게 실행될지 예상해보시겠어요? 👀

// ---- 1번
var a = 1;
function outer() {
	function inner() {
		console.log(a); //undefined
		var a = 3;
	}
	inner(); // ---- 2번
	console.log(a);
}
outer(); // ---- 3번
console.log(a);

1. 실행컨텍스트 구성 순서코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료
2. 위 코드는 아래 순서로 진행이 됩니다. (콜 스택에 쌓이는 실행컨텍스트에 의해 순서가 보장되니까요!)
3. 결국은 특정 실행 컨텍스트가 생성되는(또는 활성화되는) 시점이 콜 스택의 맨 위에 쌓이는(노출되는) 순간을 의미하구요. 곧, 현재 실행할 코드에 해당 실행 컨텍스트가 관여하게 되는 시점을 의미한다고 받아들여주시면 정확합니다! 👍👍