[내보내번] Javascript: What Is The Execution Context? What Is The Call Stack?

얼마 전 GitHub에 있는 33 Concepts Every JavaScript Developer Should Know 라는 리포지토리를 알게 되었다. 
모두 명확하게 알아야 할 개념들인데 모르는 것도 많고, 설명해보라고 해도 못할 내용들이 너무 많아서 조금씩 공부해보기로 했다. 
그중 첫 번째 호출 스택과 관련된 내용에서 몇 가지 아티클을 읽어보았고 내가 정리할 겸 기억할 겸 번역글을 작성해보려고 한다. 

※ 내보내번(내가 보려고 내가 번역한): 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 오타도 많을 수 있다. 정확한 내용은 원문을 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.
(하지만 댓글 피드백도 환영합니다😃 )

이번에 고른 아티클은 Valentino Gagliardi 님이 작성하신 Javascript: What Is The Execution Context? What Is The Call Stack?이다.

Javascript: What Is The Execution Context? What Is The Call Stack?

 

---

자바스크립트: 실행 컨텍스트란? 호출 스택이란?

 

Javascript에서 실행 컨텍스트란 무엇인가?

내가 장담하는데 당신은 이 답을 모른다.
프로그래밍 언어의 가장 기초적인 요소들은 무엇인가?
변수와 함수이지 않은가? 모두가 이러한 구성 요소들을 배울 수 있다. 
하지만 그 기본 아래에 깔려있는 것은 무엇인가?
자기 자신을 중급 (혹은 시니어까지도) 개발자라고 부르기 전에 마스터해야 하는 자바스크립트의 기둥들은 무엇인가?
많이 있는데, 스코프, 클로저, 콜백, 프로토타입 등이 있다.
그런데 이러한 개념들을 더 깊이 파고들기 전에 적어도 자바스크립트 엔진이 어떻게 동작하는지 이해해야 한다. 
이 포스트에서 우리는 모든 자바스크립트 엔진의 두 가지 기초적인 요소들에 대해서 살펴볼 것이다: 실행 컨텍스트(Execution Context)와 호출 스택(Call Stack)이다.
(두려워하지 마라. 생각보다 쉬울 테니까)
준비됐나? 

이 자료들은 나의 고급 자바스크립트 클래스(원격 1:1 트레이닝과 유럽 현장 트레이닝)의 일부분이다. 

목차
1. 자바스크립트: 실행 컨텍스트란? 무엇을 배울 것인가
2. 자바스크립트: 실행 컨텍스트란? 자바스크립트는 당신의 코드를 어떻게 실행시키는가?
3. 자바스크립트: 실행 컨텍스트란? 자바스크립트 엔진
4. 자바스크립트: 실행 컨텍스트란? 어떻게 동작하는가?
5. 자바스크립트: 실행 컨텍스트란? 전역 메모리
6. 자바스크립트: 실행 컨텍스트란? 호출 스택이란?
7. 자바스크립트: 실행 컨텍스트란? 지역 실행 컨텍스트
8. 자바스크립트: 실행 컨텍스트란? 호출 스택이란? 정리

 

자바스크립트: 실행 컨텍스트란? 무엇을 배울 것인가

이 포스트에서 아래의 내용에 대해 배울 것이다:

• 자바스크립트 엔진이 어떻게 동작하는지
• 자바스크립트의 실행 컨텍스트
• 호출 스택은 무엇인가
• 전역 실행 컨텍스트와 지역 실행 컨텍스트의 차이점

 

자바스크립트: 실행 컨텍스트란? 자바스크립트는 당신의 코드를 어떻게 실행시키는가?

자바스크립트는 어떻게 당신의 코드를 동작시키는가?
당신이 시니어 개발자라면 답을 이미 알고 있을지도 모른다. 
당신이 초보자라면 함께 살펴보자. 
사실 자바스크립트의 내부는 쉽지 않다. 
하지만 당신이 배울 수 있다고 보장한다. 
그리고 그것들을 배워가면서 자신감을 느끼고 더 똑똑해졌다고 느낄 것이다. 
자바스크립트의 내부 동작을 살펴보면 하나하나 세세한 것까지 마스터하지 못한다고 해도 더 나은 자바스크립트 개발자 될 수 있다. 
그럼 이제, 아래의 코드를 살펴보자:

var num = 2;

function pow(num) {
    return num * num;
}

다 봤는가?
그렇게 어려워 보이진 않는다. 
이제 한번 얘기 해보자: 당신은 브라우저가 어떠한 순서로 이 코드를 평가할 것이라고 생각하는가?
다시 말하면, 당신이 브라우저라면, 이 코드를 어떻게 읽을 것인가? 
쉬운 것 같지 않나?
대부분의 사람들은 "음, 브라우저가 pow 함수를 실행하고 결과를 리턴한 다음, num에 2를 할당하지"라고 생각한다. 
내 학생들의 대답을 들어보고 싶은가?
위에서 아래로
브라우저는 함수 pow에서 시작해서 num * num을 계산한다. 
JS엔진은 코드를 한 줄 한 줄 실행할 것이다.
예상하긴 했다.
나도 몇 년 전에는 똑같이 말했었다.
다음 부분에서 당신은 단순한 몇 줄의 코드들 뒤에 있는 시스템, 기계에 대해서 살펴볼 것이다. 

 

자바스크립트: 실행 컨텍스트란? 자바스크립트 엔진

당신은 평균의 자바스크립트 개발자가 되고 싶은가?
분명 그렇지 않을 것이다. 
만약 자바스크립트 인터뷰에서 좋은 인상을 주기를 원한다면 적어도 자바스크립트가 당신의 코드를 어떻게 실행하는지 알아야 한다.
(그리고 여기서는 다루지 않을 다른 많은 것들도)
이러한 개념들에 대해서 서두르지 말라. 
모든 것을 하루 안에 다 배울 순 없다. 시간이 걸릴 것이다. 
좋은 소식이 있다면 내가 모두가 이해할 수 있도록 해줄 것이다. (적어도 노력은 하겠다.)
자바스크립트가 당신의 코드를 어떻게 실행하는지를 이해하려면 첫 번째로 무서운 것과 마주해야 한다: 
실행 컨텍스트 씨이다. (mister Execution Context)
자바스크립트에서 실행 컨텍스트란 무엇인가?
브라우저 (혹은 Node)에서 매번 자바스크립트를 실행할 때 엔진은 일련의 과정을 거친다. 
이 과정들 중 하나는 전역 실행 컨텍스트(Global Execution Context)의 생성과 관련이 있다. 
잠깐 발렌티노, 엔진이 뭐지?
엔진은 자바스크립트 코드를 실행하는 "엔진"으로 자바스크립트 엔진이다. 
요즘은 두 가지 유명한 자바스크립트 엔진이 있다: 구글 V8과 스파이더몽키이다. 
V8은 구글의 오픈 소스 자바스크립트 엔진으로 구글 크롬과 Node.js에 사용된다. 
스파이더몽키는 Mozilla의 자바스크립트 엔진으로 파이어폭스에 사용된다. 
이제 우리는 자바스크립트 엔진과 실행 컨텍스트를 가지고 있다. 
지금부터는 이들이 어떻게 같이 동작하는지 알아볼 시간이다. 

자바스크립트: 실행 컨텍스트란? 어떻게 동작하는가?

엔진은 자바스크립트 코드를 실행할 때마다 전역 실행 컨텍스트를 생성한다. 
실행 컨텍스트는 당신의 자바스크립트가 실행되는 환경을 설명하는 고급 어휘이다. 
이러한 추상적인 것들은 시각화하기 어렵다. 그 심정 이해한다.
이제 전역 실행 컨텍스트를 상자라고 생각해보자: 
// 첨부되어있는 그림이 깨짐

우리의 코드를 다시 한번 보자:

var num = 2;

function pow(num) {
    return num * num;
}

엔진은 이 코드를 어떻게 읽는가? 
여기 간략한 버전이 있다:
엔진: 라인 1. 변수가 있네! 좋아. 변수를 전역 메모리에 저장하자.
엔진: 라인 3. 함수 선언이 보이는데. 좋아. 함수도 전역 메모리에 저장하자.
엔진: 끝난 거 같은데. 
브라우저가 코드들을 어떻게 "보느냐고" 다시 물어본다면 어떻게 대답하겠는가?
음, 일종의 위에서 아래로 내려오는 거긴 하지만...
보다시피 엔진은 pow 함수를 실행하지 않는다. 
이것은 함수 선언이지 함수 호출이 아니다.
위의 코드는 몇몇 값으로 전역 메모리에 저장될 것이다: 함수 하나 그리고 변수 하나.
전역 메모리?
발렌티노, 이미 실행 컨텍스트로 헷갈리는데 이젠 전역 메모리라고? 
그렇다.
전역 메모리가 뭔지 살펴보자.

 

자바스크립트: 실행 컨텍스트란? 전역 메모리

자바스크립트 엔진은 전역 메모리도 갖고 있다.
전역 메모리는 나중에 사용할 수 있도록 전역 변수와 함수 선언을 포함하고 있다.
Kyle Simpson의 "Scope and Closures"를 읽어봤다면 전역 메모리가 전역 스코프의 개념과 겹친다는 것을 알아챘을 것이다. 
사실 둘은 같은 것이다. 
난 여기 10,000피트 높이로 날고 있다, 그럴 만한 이유가 있다. (이건 무슨 의미인지 모르겠다..)
그것들은 어려운 개념이다. 
그래도 지금은 걱정할 필요가 없다. 
우리 퍼즐 중 중요한 두 가지 조각을 이해하길 바란다. 
자바스크립트가 당신의 코드를 실행시킬 때 이것들을 생성한다: 

• 전역 실행 컨텍스트
• 전역 메모리(또한 전역 스코프 혹은 전역 변수 환경이라고도 불림)

모든 것이 명확한가?
내가 당신이었다면 이 시점에서 이렇게 할 것이다:

• 자바스크립트 코드들을 적고
• 자신이 엔진이라고 생각하고 코드를 각 단계별로 파싱 한다.
• 실행되는 동안의 전역 실행 컨텍스트와 전역 메모리에 대해서 그려서 표현해본다.

프로토타이핑 툴 없이 종이에 적어도 된다. 
나의 작은 예제의 그림은 이렇게 보일 것이다: 
// 첨부되어있는 그림이 깨짐
다음 부분에서 우리는 다른 무서운 것 호출 스택에 대해 살펴볼 것이다. 

 

자바스크립트: 실행 컨텍스트란? 호출 스택이란?

실행 컨텍스트와 전역 메모리, 자바스크립트 엔진이 어떻게 함께 맞물리는지 명확한 그림이 그려지는가? 
그렇지 않다면 시간을 갖고 이전 부분을 복습해보라.
우리의 퍼즐의 다른 조각에 대해 소개할 것이다: 호출 스택이다.
자바스크립트 엔진이 당신의 코드를 실행할 때 무슨 일이 일어나는지 다시 정리해보자.
이러한 것들을 생성한다:

• 전역 실행 컨텍스트
• 전역 메모리

그에 더해 우리의 예제에서 더 이상 일어나는 것은 없다:

var num = 2;

function pow(num) {
    return num * num;
}

이 코드는 순수하게 값을 할당하는 것이다.
한 단계 더 들어가서 살펴보자.
함수를 호출하면 무엇이 일어날까?

var num = 2;

function pow(num) {
    return num * num;
}

var res = pow(num);

흥미로운 질문이다.
자바스크립트에서 함수를 호출하는 행동은 엔진에 도움을 요청하게 만든다.
그리고 그 도움은 자바스크립트 엔진의 친구로부터 오는데 그 친구는: 호출 스택이다. 
그다지 명확하게 들리지 않을지 모르지만 자바스크립트 엔진은 어떤 일이 일어나고 있는지에 대해 계속 파악할 필요가 있다.
파악하기 위해 호출 스택에 의존한다. 
자바스크립트에서 호출 스택이란 무엇인가?
호출 스택은 프로그램의 현재 실행 로그와 같다. 
실제로는 자료 구조, 즉 스택이다. 
호출 스택은 정확히 어떻게 동작하는가?
당연하게도 두 가지 메소드, 푸시(push)와 팝(pop)이 있다.
푸시는 스택 안으로 무언가를 넣는 행위이다.
자바스크립트에서 함수를 실행할 때 엔진은 그 함수를 호출 스택으로 푸시한다.
모든 함수 호출은 호출 스택으로 푸시된다. 
맨 먼저 푸시되는 것은 자바스크립트 프로그램 실행의 메인 스레드인 main() (혹은 global())이다. 
이제 이전 그림은 이렇게 보일 것이다: 
// 첨부되어있는 그림이 깨짐
팝은 반면에 스택에서 무언가를 제거하는 행위이다. 
함수가 실행을 마치면 호출 스택에서 함수가 제거된다. 
그리고 호출 스택은 아래와 같이 보일 것이다:
// 첨부되어있는 그림이 깨짐
그리고 이제 여기에서 당신은 모든 자바스크립트 개념을 마스터할 준비가 되었다. 
농담하는 거 아니다.
하지만 완료되지 않은 부분은? 다음 부분으로 이동하라!

자바스크립트: 실행 컨텍스트란? 지역 실행 컨텍스트

지금까지 모든 것이 명확해 보인다.
우리가 무언가를 놓쳤는가?
우리는 자바스크립트 엔진이 전역 실행 컨텍스트와 전역 메모리를 생성한다는 것을 안다. 
그리고, 코드에서 함수를 호출하면:

• 자바스크립트 엔진이 도움을 요청하고
• 그 도움은 자바스크립트 엔진의 친구 호출 스택으로부터 오며
• 호출 스택은 당신의 코드에서 어느 함수가 호출될 것인지 파악하고 있다

하지만 자바스크립트에서 함수를 실행하려면 또 다른 한 가지가 발생해야 한다. 
첫 번째로, 함수는 전역 실행 컨텍스트에 나타난다.
그리고, 함수 옆에 또 다른 미니 컨텍스트가 나타난다. 
그 작은 상자를 지역 실행 컨텍스트(Local Execution Context)라고 부른다. 
뭐??
눈치챘다면, 이전 그림에서 새로운 변수가 전역 메모리에 나타났다: var res
res 변수는 먼저 undefined 값을 갖고 있다.
그 후 pow가 전역 실행 컨텍스트에 나타나자마자, 함수가 실행되고 res는 함수의 리턴 값을 갖는다. 
실행 단계 동안 지역 변수를 담아두기 위해서 지역 실행 컨텍스트가 생성된다. 
얼마나 강력한 개념인가. 
// 첨부되어있는 그림이 깨짐
기억해두라.
전역과 지역 실행 컨텍스트 모두를 이해하는 것이 스코프와 클로저를 마스터하는 키이다. 

 

자바스크립트: 실행 컨텍스트란? 호출 스택이란? 정리

4줄의 코드 뒤에 무엇이 있었는지 믿을 수 있는가?
자바스크립트 엔진은 실행 컨텍스트, 전역 메모리 그리고 호출 스택을 생성한다. 
하지만 당신이 함수를 호출하면 엔진은 지역 메모리를 가지고 있는 지역 실행 컨텍스트를 생성한다. 
이 포스트가 끝날 무렵 자바스크립트 코드를 실행할 때 무엇이 일어나는지 이해할 수 있어야 한다.
종종 간과되는 자바스크립트 내부는 새로운 개발자들에 의해 항상 불가사의한 것으로 여겨진다. 
하지만 그것이 고급 자바스크립트 개념을 마스터하는 키이다. 
실행 컨텍스트, 전역 메모리, 호출 스택을 배운다면, 스코프, 클로저, 콜백 그리고 그 밖의 것들은 아주 쉬울 것이다.
특히 호출 스택을 이해하는 것이 가장 중요하다.
이것을 시각화할 수 있으면 모든 자바스크립트가 이해되기 시작할 것이다.
최종적으로 왜 자바스크립트가 비동기인지 왜 콜백이 필요한지를 이해하게 될 것이다. 
4줄의 코드 뒤에 무엇이 있는지 알고 있었는가?
이제는 안다. 

Thanks for reading!

This material is part of my Advanced Javascript class available both as remote 1 to 1 training or as on site training in Europe.