실행 컨텍스트는 JavaScript에서 코드가 실행되는 환경을 의미한다. 이 환경은 변수, 함수 선언, 스코프, this값 등을 포함한다. 추가적으로 실행 컨텍스트는 코드의 실행을 위해 필요한 정보를 수집하고 관리하는 역할을 한다.
컨텍스트는 한국말로 번역하면 문맥이다. 쉽게 코드의 실행 환경이라고 이해하면 된다. 컨텍스트는 코드의 실행 순서와 범위를 결정하는 데 중요한 역할을 한다. 실행 컨텍스트는 스택 형태로 관리되며, 함수가 호출될 때마다 새로운 컨텍스트가 생성된다. 각 컨텍스트는 독립적으로 관리되며, 변수와 함수의 식별자를 저장하고 상위 스코프와의 관계를 유지한다.
실행 컨텍스트는 자바스크립트가 왜 그렇게 동작 하는지 설명해 준다. 개념이 복잡하긴 하지만 자바스크립트의 동작 원리에 대해 아주 큰 역할을 차지하고 있기 때문에 이해하고 넘어가야 하는 부분이다. lexical scoping과 실행컨텍스트 부분만 이해하면 자바스크립트를 이해하는 데 필수적인 개념인 호이스팅, 클로저까지 모두 쉽게 이해가 가능하다.
본격적인 설명 전 렉시컬 스코핑에 대해서 정확하게 알고 넘어가야 실행컨텍스트의 전반적인 내용을 이해하기에 적절하다. 많이 헷갈릴 수 있는 개념인데 스코프는 함수를 호출할 때가 아니라 선언할 때 생긴다. 호출이 아니라 선언임을 기억해야 한다.
이는 정적 스코프라고도 불리는데, 다음 코드에서 console이 어떻게 찍힐지 예상해 보자.
var name = 'Kim';
function log() {
console.log(name);
}
function wrapper() {
name = 'Park';
log();
}
wrapper(); // park
console에 출력된 값을 살펴보면. log를 호출하기 전에 name을 ‘Park’으로 바꿨기 때문이다.
다음 코드도 console이 어떻게 찍힐지 예상해 보자.
var name = 'Kim';
function log() {
console.log(name);
}
function wrapper() {
var name = 'Park';
log();
}
wrapper(); // kim
똑같이 Park이라고 예상했으면 스코프를 다시 공부해야 한다.
스코프는 함수를 선언할 때 생긴다고 했으므로, log 안의 name은 wrapper안의 지역변수 name이 아니라, 전역변수 name을 가리키고 있는 것이다. 이를 lexical scoping이라고 한다. 함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 스코프로부터 가장 가까운 곳에 있는 변수를 계속 참조하게 된다. 위의 예시에서는 log 함수 안의 name 변수는 선언 시 가장 가까운 전역변수 name을 참조하게 된다. 그래서 wrapper 안에서 log를 호출해도 지역변수 name=’Park'를 참조하는 게 아니라 그대로 전역변수 name의 값인 ‘Kim’이 나오는 것이다. console에 찍히는 name을 바꿀 수 있는 방법은 예제 1처럼 전역변수에 있는 name의 값을 함수 스코프 안에서 전역변수로써 바꿔주는 것이다.
컨텍스트에는 4가지 원칙이 따른다.