Elice) Execution Context

! 이번 게시글은 Execution Context를 이해해 보기 위하여
나의 사견을 넣어 정리한 블로깅으로 팩트와 다를 수 있음

---

Execution Context

 

• 자바스크립트의 여러 개념들을 깊게 이해하기 위해 중요한 개념으로 자바스크립트의 스펙에도 명시가 되어 있음
• 컨텍스트란 번역하면 ‘문맥’으로 코드의 전반적인 실행 환경으로 이해하면 좋다.

---

실행 컨텍스트가 콜 스택 구조로 쌓이는 과정

 

1. 자바스크립트가 실행 될 때 처음에 전역 실행 컨텍스트가 만들어진다.
2. 함수가 실행 될때 함수 실행 컨텍스트가 만들어진다.
3. 마지막 까지 실행이 완료 된 경우 콜 스택 구조는 가장 나중에 실행된 컨텍스트 부터 제거 되어 다시 전역 실행 컨텍스트로 돌아온다.
4. 3번의 과정을 콜 스택 구조라고 부른다.

 

전역 실행 컨텍스트 (global) : 처음엔 자바스크립트의 빈 코드가 실행 되며 전역 실행 컨텍스트로 만들어지는데, 이는 함수를 만나기 전까지 이후 진행되는 코드에서 변수 선언문과 함수 선언문을 만나며 이 두 선언문이 실행된다.

이후 함수를 호출하게 되면, 전역 실행을 멈추고 함수 내부로 진입하여 함수 실행 컨텍스트가 실행된다.

 

 

실행 컨텍스트 안에는

• 1) this 포인터, 2) 스코프에 저장된 변수들, 3) 스코프 체인등이 환경에 포함된다.
• this포인터는 글로벌 스코프에서는 지정된 값이 없기 때문에 window를 가리킨다.
  (이후 변수에 대한 선언이 진행 되면 this값이 지정된다.)

 

---

 

1) this

 

- this의 값은 함수를 호출한 방법에 의해 결정된다. 실행중에는 할당으로 설정할 수 없고, 함수를 호출 할 때 마다 다를 수 있다.

- 맨 처음 코드에서 변수를 선언하면서 그 안에 인자를 설정한 값이 초기의 this가 된다. 이후 새로운 function을 정의 하면서 그 function이 받아오는 value를 새로운 변수로 받아오면 this의 포인터가 받아온 value의 값으로 변경된다.

- 하지만 화살표 함수에서의 this는 정해지면 바꾸기 어렵다.

 

ex)
const BankAccount = {
	deposit = 0,
	name = " ",     // 초기에 정한 const에서의 this

changeName : function (name) {
	this.name = name
// BankAccount의 name을 changeName 함수의 value로 변경되며, 해당 함수에서는 받아온 value가 this가 됨
}
};

 

---

 

2) 스코프에 저장된 변수들

 

스코프(scope) : '범위'라는 뜻으로 이해할 수 있으며 '변수에 접근할 수 있는 범위'라고 이해할 수 있다.

 

- Global Scope : 전역에 선언되어있어 (global) 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미. 코드 실행 후 처음에 선언한 변수들이 global scope에 해당된다. 블록 내부에 바인딩되어 있지 않아 어느 블록이던지 접근이 가능하다. 예를 들어 처음 선언한 변수의 경우 다른 함수에서도 호출될 수 있다.

- Local Scope : 해당 Local에서만 접근할 수 있어 Local을 벗어난 곳에선 접근 할 수 없다. 함수를 정의 후, 함수를 호출 하면 Local Scope가 된다.

- Function Scope : 함수 내부의 지역 변수에서 let과 const로 변수를 선언할 경우 함수 내부에서만 사용가능하다. (var로 선언할 경우 접근 가능)

- Block Scope : {}안에서 선언된 변수는 내부에서만 사용이 가능하다.

 

// 1 Global Scope

var color = 'red' // Global Scope
var whatscolor = () => {
	return color; // Global Scope를 return
};

console.log(whatscolor()); // red가 출력된다. Global Scope를 return했기 때문

// 2 Local Scope

var color = 'red'
var whatscolor = () => {
	var color = 'blue' // Local Scope
    return color;
};

console.log(whatscolor());
// blue가 출력된다. Scope Chain에 따라 함수 내부에서 먼저 color를 찾고 만약 없다면 전역에서 찾는다.

// 3 Function Scope

const whatscolor = () => {
	const color = 'red' // Function Scope
}

console.log(color());
// error가 뜬다 그 이유는 const color로 선언한 변수는 함수 내에서만 사용이 가능하기 때문

// 4 Block Scope

{
	const color = 'red' // Block Scope
    console.log(color); // red 출력
}

console.log(color);
// error가 뜬다 그 이유는 {}안에서 선언한 변수는 {}안에서만 사용이 가능하기 때문

 

---

 

3. Scope Chain

 

Scope Chain : 객체들의 리스트로 Scope Chain에 따라 호출된 함수의 실행 값은 주로 가까운(호출된 함수 내부의 변수)변수부터 찾게 된다.

 

• 자바스크립트가 변수 값을 얻으려고 할때 스코프 체인 내에서 변수를 찾는다. 스코프 체인은 객체들의 리스트 이므로 첫 번째 객체에서 해당 변수를 찾고 없으면 그 다음 객체에서 해당 변수를 찾는 식으로 객체의 리스트의 끝까지 탐색을 하는데 그 변수가 없다면 error가 발생한다.
• 최상위 자바스크립트 코드 (아무것도 없는 코드)의 스코프 체인에는 하나의 객체만 있는데 이는 전역 (global) 객체이다. 따라서 중첩되지 않는 함수의 스코프 체인은 함수의 매개변수와 지역 변수를 정의하는 객체와 전역 객체로 이루어진다.
• 함수가 정의 되면 이 함수는 스코프 체인을 저장하고, 함수가 호출 되면 함수는 지역 변수를 보관하는 새로운 객체를 만들고 그 객체를 기존에 만들어둔 스코프 체인에 추가한다.