[JavaScript] 실행 컨텍스트

🔹스택 (Stack)과 큐(Queue)

🟦 스택

• 후입선출(LIFO, Last In, First Out) 구조
• 마지막으로 삽입된 요소가 가장 먼저 제거됨
• "위로 쌓는" 개념

🟦 큐

• 선입선출(FIFO, First In, First Out) 구조
• 가장 먼저 삽입된 요소가 가장 먼저 제거됨
• "일렬로 줄 서 있는" 개념
  
  자바스크립트 엔진은 실행 중인 코드의 실행 컨텍스트를 스택에 쌓아둠

🔹실행 컨텍스트 (Excution Context)

• 코드를 실행하는데 필요한 환경을 제공하는 객체
• 식별자 결정을 효율적으로 하기 위한 수단
• Call Stack에 쌓아 올린 후 실행하여 코드의 환경과 순서를 보장함
• 변수, 함수 선언 및 스코프 등과 같은 정보를 담고 있으며, 코드 실행에 필요한 여러 가지 정보를 관리

<그림1>실행 컨텍스트와 콜스택

❶ 자바스크립트 엔진은 콜스택에 실행 컨텍스트를 담음
❷ '전역 실행 컨텍스트'를 담음
❸ 전역에서 함수 a를 호출할 경우, '함수 a의 실행 컨텍스트'를 담음
❹ 함수 a에서 함수 b를 호출할 경우, '함수 b의 실행 컨텍스트'를 담음
❺ 함수 b 실행 종료 후, 함수 b의 실행 컨텍스트'가 사라짐 -> 함수 a로 돌아옴
❻ 함수 a 실행 종료 후, 함수 a의 실행 컨텍스트'가 사라짐
❼ 전역에 있는 코드가 마지막 라인까지 모두 실행된 후 '전역 실행 컨텍스트'가 사라짐

🔔❗콜스택에서는 가장 최근에 추가된(위에서 내려다봤을 때 보이는) 실행 컨텍스트만 활성화됨❗🔔

---

🔹실행 컨텍스트 (Excution Context)에 담기는 내용

<그림2>활성화된 실행 컨텍스트의 수집 정보

🟦 Variable Environment(변수 환경)

• Variable Environment는 코드가 실행되는 곳
• 변수, 함수 선언 등이 저장됨

1. environmentRecord (환경 레코드)
   현재 스코프 내의 변수와 함수 선언 등의 정보를 저장하며 실행 중에 변경되지 않음
2. outerEnvironmentReference (외부 환경 참조)
   현재 스코프가 참조하는 외부(상위) 변수 환경에 대한 참조
   중첩된 스코프에서 변수를 찾을 수 있음

🟦 Lexical Environment(어휘적 환경)

• 현재 실행 컨텍스트(함수 실행, 블록 실행 등)에 대한 변수와 함수 선언 등을 저장하는 곳
• 실행 컨텍스트에 따라 동적으로 생성

1. environmentRecord (환경 레코드)
   현재 실행 컨텍스트 내의 변수와 함수 선언 등의 정보를 저장하며 실행 중에 변경되지 않음
2. outerEnvironmentReference (외부 환경 참조)
   현재 실행 컨텍스트가 참조하는 외부(상위) 변수 환경에 대한 참조

---

프로그램 실행의 기본적인 흐름

🟦Creation(Pre-parsing) Phase : 함수(파일) 분석하며 메모리 내 변수 함수 적재

변수 선언 & 함수 선언

🟦Execution Phase : 함수 실행을 위한 메모리 영역 확보 및 실행

변수 할당 & 함수 실행

그림 설명 추가 예정

var name = 'zero';
function log() {
console.log(name);
}
function wrapper() {
name = 'nero'; // 이때 어떤 결과가 나올지 생각해보고,  var name = 'nero'; 일땐 어떨까?
log();
}
wrapper();

---

🟦 ThisBinding

• 함수가 실행될 때 함수 내에서 사용되는 특정한 키워드인 "this"가 무엇을 참조하는지를 나타냄
• 현재 실행 중인 함수의 this 값에 대한 바인딩
• 함수가 호출될 때마다 동적으로 결정되며 어떻게 호출되었는지에 따라 달라짐

🟦 "this" 바인딩 규칙들

• 전역 컨텍스트(Global Context):
  전역 영역에서 함수 내에서 "this"를 사용할 때, 전역 객체인 "window"를 참조
  브라우저 환경에서는 전역 객체가 "window"

• 함수 내에서의 this:
  함수가 일반적인 방법으로 호출될 때, 즉, 메서드가 아닌 함수로서 호출될 때, "this"는 전역 객체를 참조
  이때 "strict mode"에서는 "undefined"가 될 수 있음

• 메서드 내에서의 this:
  객체의 메서드로 호출될 때, 메서드 내부의 "this"는 해당 메서드를 호출한 객체를 가리킴

• 생성자 함수 내에서의 this:
  생성자 함수로 호출될 때, "this"는 생성된 객체를 가리킴

• call(), apply(), bind()를 사용한 명시적인 this 바인딩:
  이들 메서드를 사용하여 함수의 "this"를 명시적으로 지정
  함수 내에서 "this"가 특정한 객체를 참조

---