자바스크립트 실행 환경(Execution Context)이란 무엇인가

 

 

살아온 환경에 따라 정의되는 피부색이 다르다.

 

🤔 실행 환경을 배워야 하는 이유

 

코드는 정적이다. 여러분들이 코딩을 끝마치고 컴파일을 하여도 변함이 없고

실제 런타임 때나 서버가 돌아가는 와중에도 코드는 자기가 스스로 변하지 않는다.

하지만 이런 변함없는 코드일지라도 실제 내부적으로는 그 코드 속 변수, 함수들은 항상 똑같이 행동하지 않고, 똑같은 것을 참조하지 않는다. 그것은 대부분 자바스크립트 엔진 작동원리의 핵심 개념인 실행 환경을 알면은 굳이 컴파일을 하지 않아도 예상할 수 있게 된다. 또한 개발자는 당연히 예상이 가능해야지 정상적인 개발을 할 수 있을 것이다. 그러므로 이런 동적인 움직임을 갖고 있는 자바스크립트 코딩을 하려면 실행 환경을 배워야 한다.

또한 이 개념은 hosting, this와도 밀접한 연결이 있다.

 

 

📖 실행 환경의 사전적 정의

 

Execution Context

          실행    문맥/맥락/환경 

 

어떤 코드가 실행 중일 때 그 코드에게 영향을 주는 주변 코드나 변수들을 파악해야 합니다.

그렇게 영향을 주는 환경을 우린 context라고 부릅니다.

즉 해당 코드의 배경이 되는 조건, 환경을 말합니다.

 

그럼 여기서 Execution을 붙여서 Execution context 해석하면은

코드를 실행하는 데에 필요한 배경이 되는 조건, 환경이 됩니다.

 

이 말이 어렵게 들리실 겁니다. 코딩을 하는 여러분들의 입장으로 풀어서 설명해보자면,

Execution	Context
동일한 조건/환경을 지니는 코드 뭉치	를 실행할 때 필요한 조건/환경정보

 

📚 Execution

동일한 조건/환경을 지니는 코드 뭉치에 대해서 정의하자면, 딱 네 가지밖에 없습니다.

전역 공간, 함수, eval, module 입니다.

이 중에서 eval은 매우 위험한 명령어이니 생략을 하면,

전역 공간, 함수, moduel 이렇게 남는데

 

☝ - 전역 공간

전역 공간은 자바스크립트가 실행하면 전역 공간이 생성되며, 코드가 마지막 줄에 다다르면 종료가 되는 하나의 거대한 함수라고 생각하시면 됩니다. c언어와 자바의 main함수라고 생각하시면 됩니다.(둘이 완전히 같은 개념은 아닙니다.)

 

☝ - module

그리고 module 또한 import로 외부 모듈을 갖고 오면 그 모듈 내부에 있는 context가 생성이 되고 그 모듈 코드가 전부 끝났을 때에 context가 종료되니까 이것도 하나의 함수라고 생각하시면 됩니다. 

 

☝ - 함수

함수 또한 어느 누군가에게 호출되면 함수의 context가 생성이 되고 코드가 끝나면 context가 종료가 됩니다.

 

이렇게 보면은 결국 모든 게 다 함수로 이루어진 것입니다.

전역 공간 내에서는 모든 코드가 같은 환경에 있고

모듈 내에서도, 함수 내에서도 마찬가지입니다.

앞에서 설명드렸던 동일한 조건/환경을 지니는 코드 뭉치는 전역 공간, 함수, 모듈 통틀어 같은 함수 안에 있다면 같은 환경 속에 있다 라고 알아주시면 좋습니다.

 

 

🤔 그럼 if/switch/while/for 은 뭐예요? 여기 안에서 선언한 변수는 밖에서는 못쓰잖아요?

 

✔ 그것은 ES6에서 블록스코프라는 개념이 추가되면서 let과 const에서는 별개의 독립된 공간으로서의 역할을 하고 있습니다. 하지만 별개의 실행 컨텍스트를 생성하지는 않습니다.

 

(한 가지 더 말씀드리자면 var는 함수 스코프입니다! if/switch/while/for 안에서 선언된 var는 (같은 함수 안이라는 전제하에)밖에서도 사용 가능합니다.)

 

📖 실행 환경의 마지막 정리

 

마지막으로 정리해보자면

 

Execution Context

 

함수를 실행할 때 필요한 환경정보를 담은 객체

라고 정의할 수 있다.

 

🧾 실습을 통해서 알아보자

 

var a = 1;
function outer() {
  console.log(a);
  function inner() {
    console.log(a);
    var a = 3;
  }
  inner();
  console.log(a);
}
outer();
console.log(a);

 

다음 코드에 나와있는 a는 어떤 값을 출력할까요? 그리고 실행 순서는 어떻게 될까요?

정확히 맞히시면 실행 컨텍스트를 절반 정도는 이해하신 겁니다.

 

 

답은 다음과 같습니다.

 

 

var a = 1;
function outer() {
  console.log(a); // 첫 번째로 실행되며 1을 출력합니다.
  function inner() {
    console.log(a); // 두 번째로 실행되며 undefined을 출력합니다.
    var a = 3;
  }
  inner();
  console.log(a); // 세 번째로 실행되며 1을 출력합니다.
}
outer();
console.log(a); // 네 번째로 실행되며 1을 출력합니다.

 

왜 이렇게 실행되는지 한 번 자세히 알아봅시다.

 

 

 

먼저 전역 컨텍스트가 실행됩니다.

전역 컨텍스트는 먼저 11번째 줄의 outer()함수를 만나 outer 컨텍스트가 실행하게 됩니다.

 

 

 

outer 컨텍스트가 실행되면 3번째 줄의 log를 만나 a를 출력하는데 이때 a는 outer 함수 내에는 없으니 그 바깥인 전역 컨텍스트의 var a = 1을 찾아 1을 출력하게 됩니다. 그리고 그 아래 8번째 inner()를 만나 inner의 컨텍스트가 실행하게 됩니다.

 

그다음 inner함수 안 5번째 줄의 log를 만나 a를 출력하는데 이때 a는 inner 함수 안에 있습니다. var는 함수 스코프를 가지기 때문에 함수가 실행될 때 모든 var는 호이스팅이 됩니다. 그렇지만 초기화 이전이기 때문에 undefined가 출력이 되는 것입니다.

 

 

inner 함수가 종료되면 그다음 줄인 9번째의 log를 만나 a를 출력하는데 outer 함수 안에 a가 없으니 전역 컨텍스트 내의 var a = 1을 찾아 출력하게 됩니다.

 

 

outer함수가 종료되면 그다음 줄인 12번째의 log를 만나 a를 찾아 출력하는데 전역 컨텍스트에 있는 var a = 1을 찾아 출력하게 됩니다.

 

이렇게 같은 변수 a라해도 실행하는 배경에 따라 값이 달라집니다.

즉 실행 컨텍스트에 따라 불러내는 a가 다르다는 것입니다.

이게 바로 실행 컨텍스트의 핵심 개념입니다.

 

설명하는 내내 옆에 보시면 컨텍스트들이 스택처럼 가장 최근에 들어왔던 것이 먼저 빠지는 구조로 되어있습니다. 이것을 우리는 콜스택(call stack)이라 부릅니다.

 

☝ 콜스텍 : 현재 어떤 함수가 동작중이고 다음에 어떤 함수가 호출될 예정인지에 대해 제어하는 자료구조를 말합니다.

 

실행 컨텍스트 개념을 이해하실 때 콜스텍과 함께 공부하시면 더욱 이해하기가 편해서 같이 설명해드린 것입니다.

✍ 다음 강의에 대해

 

이번 시간을 통해 실행 컨텍스트에 대해서 개념적으로 공부해보았습니다.

여기까지 글을 읽느라 고생 많았습니다.

이 정도를 이해했다고 해서 실행 컨텍스트에 대해 다 아는 것은 아닙니다.

다음 시간에는 VariableEnvironmet, LexicalEnvironment 등등 실행 컨텍스트의 내부 구조에 대해 배워볼 것입니다.