글을 작성하기에 앞서 코드를 하나 보고 시작하자.
const a = 1;
var b = 2;
function add(p) {
const a = 3
console.log(p + a + b)
}
add(5) // 10
console.log(a) // 1
console.log(p) // errorjs 를 이미 알고 있는 사람이라면 위의 코드가 어떤 결과를 내는가는 쉽게 알 수 있을 것이다. 하지만 위의 코드를 보면 동일해 보이는 변수 a 는 어떻게 스코프를 구분하는가, 변수 p 는 어떻게 휘발성으로 다뤄지는가 와 같이 효율적으로 정확하게 코드가 동작하기 위한 js 만의 메커니즘이 필요해보인다. 우린 이 메커니즘 더 구체적으로 식별자의 저장, 코드의 실행 등을 관리하는 것을 실행 컨텍스트 라고 부른다. 이 실행 컨텍스트가 어떻게 동작하는가에 대해서 글을 작성해보겠다.
1. 코드 타입
자바스크립트는 코드를 네 가지 타입으로 구분하고 타입에 따라 각자에 맞는 실행 컨텍스트를 생성한다.(모두 동일하게 각 스코프에서 정의된 함수, 클래스 등의 '내부 코드'는 포함하지 않는다.)
1) 전역 코드(global code) : 전역에 존재하는 소스 코드
2) 함수 코드(function code) : 함수 내부에 존재하는 소스 코드
3) eval 코드(eval code) : 내장 함수임 eval 함수에 인수로 전달되는 소스 코드
4) 모듈 코드(module code) : 모듈 내부에 존재하는 소스 코드
2.실행 컨텍스트의 역할
실행 컨텍스트는 크게
1) 소스코드의 평가
2) 소스코드의 실행
의 역할을 하고 순차적으로 실행한다.
코드를 위에서 부터 아래로 실행하기에 앞서, 내가 쓸 도구들이 무엇인가에 대해 정리하는 것이 우선일 것이다. 실행컨텍스트에서도 마찬가지로 소스코드의 평가 즉 변수, 함수 등의 선언을 먼저 진행한다. 즉 코드를 순차적으로 실행하기 이전에 전체 코드를 살피어 사용되는 변수들의 선언을 제일 위로 끌어올린다는 의미이다. 우린 이 단계를 호이스팅 이라고 부른다.
//오해하지 말아야 할 것은 아직 변수의 '선언'단계만이 이루어졌기에 변수에 특정값이 할당되어 있다는 것은 아니다.//
아무튼 선언 단계가 이루어졌고 우리는 이 정보를 "현재" 실행 컨텍스트가 관리하는 렉시컬 환경 이란 곳에서 관리한다.
이 쯤에서 코드를 다시 보자.
const a = 1; // 전역 컨텍스트
var b = 2; // 전역 컨텍스트
function add(p) {
const a = 3 // 함수 컨텍스트
console.log(p + a + b) // p, a : 함수 컨텍스트, b : 전역 컨텍스트
}
add(5) // 10
console.log(a) // 1
console.log(p) // error여기서 각 변수가 어떻게 관리 되는가를 위와 같이 표시할 수 있을 것이다.
이 과정에서 고려 해야할 것은
1. 전역 컨텍스트 -> add 함수 컨텍스트 -> 전역 컨텍스트의 순으로 실행이 되어야 한다.
2. add 함수 내부에서 전역 변수인 b 와 전역 객체인 console에 접근이 가능해야한다.
를 볼 수 있다. 이를 해결한 아이디어를 살펴보자.
2.1 실행 컨텍스트 스택
1번의 문제는 실행 컨텍스트를 스택으로 관리함으로써 해결한다.
1. 전역 컨텍스트를 생성 후 실행 컨텍스트 스택에 푸시. 실행 컨텍스트 렉시컬환경에 변수와 함수를 선언. 이후 코드 실행
2. 전역 코드 실행 중 add 함수 호출 시, add 함수 컨텍스트 생성 후 실행 컨텍스트에 푸시. add 함수 컨텍스트 렉시컬 환경에 add 함수 내부의 변수와 함수를 선언. 이후 코드 실행
3. 함수가 종료되면 실행 컨텍스트 스택에서 함수 컨텍스트는 팝되어 사라지고 다시 전역컨텍스트로 돌아오게 됨.
3. 렉시컬 환경
위에서 렉시컬 환경에 대해서 간략하게 애기했지만, 정확히 말하면 사용할 도구들을 기록하는 공간이다. 사용할 도구들이란 현재 스코프의 값들 뿐 아니라 상위 스코프에 대한 참조까지 포함한 개념이다.
그렇기에 현재 컨텍스트의 렉시컬 환경은 크게 "현 스코프의 저장 공간" + "외부 렉시컬 참조 공간"으로 구성된다. (렉시컬의 구성은 키를 통해 찾고자 하는 값 또는 환경을 가리키도록 한다.)
