소스코드 타입
각각의 소스코드는 독자적인 실행 컨텍스트를 생성한다.
- 전역 코드 : 전역에 존재하는 소스코드
- 함수 코드 : 함수 내부에서 존재하는 소스코드
- eval 코드 :
eval함수에 인수로 전달되는 소스코드 - 모듈 코드 : 모듈 내부에 존재하는 소스코드
소스코드는 평가와 실행 과정으로 분리된다.
- 평가 : 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.
- 실행 : 선언문 외의 소스코드를 실행하는 과정으로 런타임이다. 실행 과정에서 필요한 정보들은 실행 컨텍스트에서 관리하는 스코프에서 가져온다.
실행 컨텍스트 스택(Call Stack)
자바스크립트는 전역 실행 컨텍스트를 생성한 뒤에 함수, eval, 모듈 호출 여부에 따라 고유의 실행 컨텍스트를 생성한다. 이때 생성된 실행 컨텍스트들은 스택으로 관리되는데 이를 실행 컨텍스트 스택 또는 콜 스택이라 한다.
실행 컨텍스트 스택은 코드의 실행 순서를 관리한다.
렉시컬 환경(Lexical Environment)
식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트다. 렉시컬 환경은 두 개의 컴포넌트로 구성된다.
- 환경 레코드 : 스코프에 포함된 식별자를 등록하고 식별자에 바인딩된 값을 관리하는 저장소
- 외부 렉시컬 환경에 대한 참조 : 상위 스코프(외부 렉시컬 환경. 즉, 실행 컨텍스트를 생성한 상위 실행 컨텍스트의 렉시컬 환경)
클로저
클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합
렉시컬 스코프
자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는데, 이를 렉시컬 스코프(정적 스코프)라 한다.
const x = 1;
function foo() {
const x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // 1
bar(); // 1렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값. 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 이것이 렉시컬 스코프다.
클로저와 렉시컬 환경
외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있는데, 이러한 중첩 함수를 클로저라고 부른다. 클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정한다.
클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 그러므로 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.
const Counter = () => {
let num = 0;
return (cb) => {
num = cb(num);
return num;
};
};
const increase = (num) => {
return ++num;
};
const decrease = (num) => {
return --num;
};
const c = Counter();
console.log(c(increase)); // 1
console.log(c(increase)); // 2
console.log(c(decrease)); // 1
console.log(c(decrease)); // 0