[ JS ] 실행 컨텍스트

실행 컨텍스트는 JS에서 코드가 실행되는 환경이다
JS엔진이 코드를 실행할때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 존재하는 것이 실행 컨텍스트이다

 

실행컨텍스트는 크게 전역과 함수 실행 컨텍스트로 나눌 수 있다

1. 전역 실행컨텍스트
JS가 처음 실행될 때, 생성되는 컨텍스트이다. 이 전역 컨텍스트는 프로그램이 종료될 때까지 유지되며 전역에 선언된 변수나 함수가 모두 포함된다. 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근이 가능하다
기본적으로 JS는 싱글 스레드이기에 전역 실행컨텍스트는 1개만 존재

2. 함수 실행 컨텍스트
함수가 호출될 때마다 생성되는 컨텍스트이다. 각 함수는 자신만의 실행 컨텍스트를 가지며, 이컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효함. 함수가 종료되면 그 실행컨텍스트도 함께 사라진다

 

여기서 나의 궁금증!!!
함수 실행 컨텍스트가 종료되고 함수에 있는 변수에 접근할 수 있다고 아는데, 이때 클로저로 접근이 가능한지 GPT에 물어봄

함수 실행 컨텍스트와 클로저의 동작 원리는 약간 다르지만 밀접하게 연관되어 있습니다. 아래에서 이를 구체적으로 설명하겠습니다.

함수 실행 컨텍스트
• 함수가 호출되면 실행 컨텍스트가 생성됩니다. 실행 컨텍스트는 함수 내부에서 선언된 변수, 매개변수, 내부 함수 등이 저장되는 환경입니다.
• 함수가 실행을 마치면 실행 컨텍스트는 소멸됩니다. 하지만, 특정 상황에서는 실행 컨텍스트가 유지될 수 있습니다.

클로저와 실행 컨텍스트의 관계
클로저는 외부 함수의 변수(= 실행 컨텍스트 내부의 변수)에 접근할 수 있는 함수를 말합니다. 클로저가 생성되면, 함수 실행 컨텍스트 내의 변수들이 사라지지 않고 메모리에 유지됩니다. 이것이 클로저의 핵심입니다.

클로저가 실행 컨텍스트를 유지하는 이유
1. 참조가 유지됨: 클로저는 외부 함수의 변수를 참조하고 있기 때문에, 자바스크립트의 가비지 컬렉터는 이를 “사용 중”으로 간주합니다.
2. 메모리 관리: 실행 컨텍스트가 완전히 사라지는 대신, 클로저가 참조하는 데이터만 남아 필요한 부분만 메모리에 유지됩니다.

정리: 클로저가 실행 컨텍스트를 유지할 수 있는가?
• 예, 클로저는 실행 컨텍스트의 변수에 접근할 수 있습니다.
• 실행 컨텍스트 자체는 함수 실행 종료 후 소멸되지만, 클로저가 참조하는 변수들은 메모리에 유지됩니다.
• 따라서, 클로저 덕분에 함수 종료 후에도 실행 컨텍스트의 일부 데이터를 사용할 수 있습니다.

예제: 클로저와 실행 컨텍스트

function outer() {
  let count = 0; // 실행 컨텍스트의 변수

  return function inner() { // 클로저
    count += 1; // 외부 함수 변수에 접근
    console.log(count);
  };
}

const counter = outer(); // outer의 실행 컨텍스트 생성

counter(); // 1
counter(); // 2

1. outer()가 호출되면 실행 컨텍스트가 생성됩니다.

2. outer()가 종료되면 원래 실행 컨텍스트는 소멸되어야 하지만, inner 함수가 count를 참조하고 있기 때문에 count는 메모리에 유지됩니다.

3. counter()를 호출하면, 클로저를 통해 count 값에 접근하여 변경할 수 있습니다.

 

실행컨텍스트는 어떤 구성요소로 이루어져있는가?

실행컨텍스트는 변수객체, 스코프체인, this로 이루어져 있음

1. 변수객체 : 실행컨텍스트 내에서 사용되는 변수와 함수 선언을 저장하는 공간. 전역컨텍스트에서는 전역객체가 변수객체의 역할을 하고, 함수 컨텍스트에서는 활성화객체가 변수와 매개변수를 관리한다

2. 스코프체인 : 현재 실행중인 컨텍스트오 외부 렉시컬 환경의 연결을 유지한다. 변수를 참조할 때 현재 컨텍스트에서 찾지 못하면 외부환경으로 범위를 넓혀가며 변수를 찾는다

3. this : 실행컨텍스트에 따라 참조하는 객체가 달라진다. 전역 컨텍스트에서는 this가 전역 전체를 가리키고, 함수컨텍스트에서는 함수호출방법에 따라 달라진다

실행 컨텍스트는 이러한 구성요소를 바탕으로 JS코드가 실행되는 동안의 환경을 관리하고, 코드 실행시 변수의 유효범위나 함수호출의 맥락을 결정짓는다

 

참고 학습자료

https://www.youtube.com/watch?v=EWfujNzSUmw