EpicTrave

들어가기 전

자바스크립트를 주 개발 언어로 선택하여 업무를 한 지 1년이 되었습니다. 개발 작업 완료에 몰두하여 정작 자바스크립트가 어떻게 동작을 하고, 기본 개념부터 고급 개념에 대한 이해와 정리의 필요성을 느꼈습니다.

그러던 중 자바스크립트 개발자라면 알아야 할 33가지 개념에 대한 GitHub 레포를 발견하여 33가지 개념을 개인적으로 정리하고자 합니다.

실행 컨텍스트

자바스크립트 엔진은 코드를 실행할 때 전역 실행 컨텍스트를 생성하게 됩니다.

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 설명하기 위한 개념입니다.

자바스크립트 엔진은 이 코드를 

• 1번 라인에 10의 값을 가진 변수 num가 선언되어 있네. 전역 메모리(Global memory)에 저장을 하자.
• 3번 라인에 multiplyBy2 함수가 선언되어 있네. 이것도 전역 메모리에 저장하자.
• 7번 라인에 epictrave라는 값을 가진 변수 name이 선언되어 있네. 이것도 전역 메모리에 저장하자.

이렇게 해석할 것입니다.

이때, 함수 multiplyBy2의 내부인 4번, 5번 라인을 무시하고 바로 7번 라인으로 해석하는데, 이는 multiplyBy2가 호출되지 않았기 때문입니다.

첫 번째 코드에서 name 변수가 없애고 output, anotherOuput 변수에 multiplyBy2를 사용하여 할당하였습니다.

해당 코드 분석을 도식을 이용해 설명하겠습니다.

엔진이 코드를 실행하게 되면, 전역 실행 컨텍스트와 전역 메모리가 생성됩니다. 10의 값을 가진 변수 num를 전역 메모리에 저장을 합니다.

함수 multiplyBy2를 전역 메모리에 저장을 합니다.

현재 multiplyBy2(5)의 결과를 알지 못하기 때문에 변수 output을 기본값이 undefined로 전역 메모리에 저장이 되고, 전역 실행 컨텍스트에서 함수 multiplyBy2(4)를 호출하여 실행합니다.

이때, 함수의 로컬 실행 컨텍스트(함수 실행 컨텍스트)와 로컬 메모리가 생성이 되고 로컬 실행 컨텍스트로 들어가게 됩니다.

인자 값이 5이므로 inputNumber를 로컬 메모리에 먼저 저장하고, 값이 10인 result 변수를 로컬 메모리에 저장합니다.

변수 result의 값을 반환하여 변수 output을 10으로 전역 메모리에 저장하고 로컬 실행 컨텍스트를 나와 전역 실행컨텍스트로 다시 돌아옵니다.  anotherOutput도 output과 동일한 과정으로 진행이 됩니다.

콜 스택

앞의 내용을 보면, 자바스크립트 엔진이 코드를 실행시킬 때, 전역 실행 컨텍스트와 전역 메모리를 생성하고, 함수를 호출하게 되면, 로컬 실행 컨텍스트와 로컬 메모리가 생성됩니다.

자바스크립트 엔진은 코드가 작동하는 동안 무슨 일이 일어나고 있는지 계속 추적해야 합니다. 이때, 콜 스택을 이용해 일련의 실행 컨텍스트를 추적하게 됩니다.

쉽게 말하자면, 콜 스택은 현재 실행 중인 프로그램의 로그와 유사합니다.

해당 함수가 호출이 되면 Push가 되고 함수 실행이 끝나면 Pop이 됩니다.

가장 먼저 Push가 되는 것은 main()(혹은 global())이며, 자바스크립트 프로그램의 주요 실행 스레드입니다.

2번째 코드의 콜 스택은 다음과 같습니다.

요약

위 내용들은 간단하게 요약한다면 다음과 같습니다.

• 자바스크립트 엔진은 코드를 실행할 때, 전역 실행 컨텍스트와 전역 메모리를 생성한다.
• 함수가 호출되면 로컬(함수) 실행 컨텍스트와 로컬 전역 메모리가 생성된다.
• 자바스크립트 엔진은 콜 스택을 통해 실행 컨텍스트를 추적한다.

실행 컨텍스트, 메모리, 콜 스택에 대한 이해는 스코프(Scope), 클로져(Closure), 콜백(Callbacks)에 대해 이해를 도울 것이라 생각됩니다.