[자바스크립트 문법] 실행컨텍스트와 호이스팅

김형빈·2024년 4월 30일

실행컨텍스트 자바스크립트 호이스팅

자바스크립트 문법

목록 보기

2/8

실행컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체

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

실행컨텍스트란?

동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명드린 ‘스택’의 한 종류인 콜스택에 쌓아올린다
가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있다
컨텍스트의 구성
1. 구성 방법
  a. 전역공간
  b. eval() 함수
  c. 함수 (우리가 흔히 실행컨텍스트를 구성하는 방법)
2. 실행컨텍스트 구성 예시 코드
```
// ---- 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);
```
3. 실행컨텍스트 구성 순서
  
  코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료
4. 실행 컨텍스트 객체의 실체(=담기는 정보)
  a. VariableEnvironment
  - 현재 컨텍스트 내의 식별자 정보(=record)를 갖고 있다
  - 외부 환경 정보(=outer)를 갖고 있다
  - 선언 시점 LexicalEnvironment의 snapshot
  b. LexicalEnvironment
  - VariableEnvironment와 동일하지만, 변경사항을 실시간으로 반영한다
  c. ThisBinding
  - this 식별자가 바라봐야할 객체

LexicalEnvironment(1) - environmentRocord(=record)와 호이스팅

개요
- 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다
- 수집 대상 정보: 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등
- 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집 (실행 X)
호이스팅
- 변수 정보 수집 과정을 이해하기 쉽게 설명한 '가상 개념'

호이스팅 규칙

매개변수 및 변수는 선언부를 호이스팅 한다
<적용 전>

function a (x) {
	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);

함수 선언은 전체를 호이스팅
<적용 전>

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);
	b = 'bbb'; // 변수의 할당부는 원래 자리에

	console.log(b);
	console.log(b);
}
a();

함수 선언문, 함수 표현식

// 함수 선언문은 전체를 hoisting
function sum (a, b) { // 함수 선언문 sum
	return a + b;
}
// 변수는 선언부만 hoisting
var multiply; 
console.log(sum(1, 2));
console.log(multiply(3, 4));
//
multiply = function (a, b) { // 변수의 할당부는 원래 자리
	return a + b;
};

함수 선언문보다는 표현식을 사용하자!

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

스코프

식별자에 대한 유효범위
ES5까지 함수 스코프만 존재 (함수에 의해서 생성)
ES6부터 블록 스코프도 존재
- 블록이란?
- 단 블록 스코프는 var로 선언한 변수에 대해서는 작동하지 않음 (let, const, class 등에 대해서만 작동)
  스코프 체인
식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것

outerEnvironmentReference(이하 outer)

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

스코프 체인의 동작

전역 컨텍스트 활성화, 전역 컨텍스트의 environmentRecord: {a, outer}
outer의 environmentRecord: {inner}
outer는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조한다. LexicalEnvironment: [GLOBAL, {a,outer}]
inner의 environmentRecord: {a}
inner는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조한다. LexicalEnvironment: [outer, {inner}]
inner 자신이 선언된 시점의 가장 가까운 요소부터 차례대로 접근 가능
차례대로 올라가다 보면 전역 컨텍스트의 LexicalEnvironment를 참조하게 된다

var a = 1;
var outer = function() {
	var inner = function() {
		console.log(a); // undefined, inner 함수의 var a; 참조
		var a = 3;
	};
	inner();
	console.log(a); // 1, 전역에 있는 var a=1 참조
};
outer();
console.log(a); // 1