실행 컨텍스트(Excecution Context)란?
실행컨텍스트는 js 코드가 실행되는 환경을 추상화한 개념입니다.
js 엔진이 코드를 실행할 때 "지급 어떤 상황에서 실행 중인지" 에 대한 정보를 모아둔 환경이라고 할 수 있습니다.
실행 컨텍스트에는 다음과 같은 정보들이 포함됩니다
- 변수 객체: 현재 컨텍스트에서 접근할 수 있는 변수들의 집합
- 스코프 체인: 변수를 찾을 때 참조하는 스코프들의 연결 리스트
- this 값: 현재 컨텍스트에서 this가 가리키는 대상
실행 컨텍스트의 종류
JS에는 세 가지 유형의 실행 컨텍스트가 있습니다.
1. 전역 컨텍스트
코드가 처음 실행될 때 자동으로 생성되는 기본 컨텍스트입니다. 브라우저 환경에서는 window객체가, Nodw.js환경에서는 global 객체가 이 컨텍스트의 this가 됩니다.
2. 함수 컨텍스트
함수가 호출될 때마다 해당 함수를 위한 새로운 실행 컨텍스트가 생성됩니다. 각 함수 호출은 고유한 실행 컨텍스트를 가지며, 함수 실행이 완료되면 해당 컨텍스트는 소멸합니다.
3. Eval 컨텍스트
eval() 함수 내에서 실행되는 코드를 위한 컨텍스트입니다. 보안 및 성능 문제로 인해 현대 js에서는 사용을 권장하지 않습니다.
실행 컨텍스트의 생성 과정
1. 생성 단계
코드가 실행되기 전에 다음 작업이 수행됩니다.
- 변수 환경 구성: 변수와 함수 선언을 메모리에 저장(호이스팅 발생 단계)
- 스코프 체인 구성: 외부 환경에 대한 참조 설정
- this 값 결정: 실행 컨텍스트의 this 값 설정
2. 실행 단계
코드가 한 줄씩 실행되며 변수에 실제 값이 할당되고 함수가 호출됩니다.
let x = 10;
function foo() {
let y = 20;
console.log(x + y); // 30
function bar() {
let z = 30;
console.log(x + y + z); // 60
}
bar();
}
foo();위 코드가 실행될 때 생성되는 실행 컨텍스트의 변화는 다음과 같습니다.
- 전역 실행 컨텍스트 생성
- 변수 x와 함수 foo가 메모리에 저장
- this = window (브라우저 환경)
- foo 함수 실행 컨텍스트 생성
- 변수 y와 함수 bar가 메모리에 저장
- 외부 환경으로 전역 컨텍스트 참조
- foo의 this값 결정 (일반 호출이므로 window)
- bar 함수 실행 컨텍스트 생성
- 변수 z가 메모리에 저장
- 외부 환경으로 foo 컨텍스트 참조
- bar의 this 값 결정 (일반 호출이므로 window)
- bar 함수 코드 실행
- x + y + z 계산 후 출력 (10 + 20 + 30 = 60)
- bar 실행 컨텍스트 제고
- foo 함수 나머지 코드 실행
- foo 실행 컨텍스트 제고
- 전역 코드 나머지 실행
- 전역 실행 컨텍스트는 프로그램이 종료될 때까지 유지
스코프란?
스코프는 변수나 함수가 코드 내에서 접근 가능한 범위를 결정하는 규칙입니다. 스코프는 코드 가독성을 높이고, 변수 이름 충돌을 방지하며, 메모리 사용을 최적화하는 데 도움을 줍니다.
스코프의 종류
1. 전역 스코프
전역 스코프에 선언된 변수나 함수는 코드의 어느 부분에서도 접근할 수 있습니다.
2. 함수 스코프
var로 선언된 변수나 함수 내에서 선언된 함수는 해당 함수 내에서만 접근할 수 있습니다.
3. 블록 스코프
ES6에서 도입된 let과 const로 선언된 변수는 블록 스코프를 가집니다. 블록은 중괄호 {}로 둘러싸인 코드 영역으로 if, for, while 등의 제어문도 블록을 형성합니다.
4. 렉시컬 스코프
js는 함수가 어디서 선언되었는지에 따라 상위 스코프가 결정되는 렉시컬 스코프(정적 스코프)를 사용합니다. 이는 함수가 어디서 호출되는지와는 관계없이 선언된 위치만이 중요하다는 의미입니다.
스코프 체인
스코프 체인은 중첩된 함수에서 변수를 찾을 때 사용되는 변수 참조의 연결목록입니다. js 엔진이 변수를 찾는 과정은 다음과 같습니다.
- 현재 스코프에서 변수를 찾습니다.
- 찾지 못하면 바깥쪽 스코프로 이동하여 검색을 계속합니다.
- 이 과정을 변수를 찾거나 전역 스코프에 도달할 때까지 반복합니다.
- 전역 스코프에서도 찾지 못하면 ReferenceError가 발생합니다.
스코프 체인은 함수가 선언될 때 생성되며, 이것이 바로 렉시컬 스코프의 핵심입니다.
스코프와 실행 컨텍스트의 관계
-
스코프는 정적(static)이며, 코드가 작성될 때 결정됩니다. 이는 변수와 함수의 접근성과 가시성을 정의합니다.
-
실행 컨텍스트는 동적(dynamic)이며, 코드가 실행될 때 생성됩니다. 이는 코드 실행에 필요한 환경과 상태를 관리합니다.
실행 컨텍스트는 함수가 호출될 때마다 새로 생성되지만, 스코프는 함수가 선언될 때 한 번 결정된다는 것입니다.
클로저와 스코프의 관계
렉시컬 스코프와 실행 컨텍스트의 특성이 결합하여 js의 강력한 기능인 클로저가 가능해집니다.
클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 즉, 내부 함수가 외부 함수의 변수에 접근할 수 있으며, 외부 함수가 실행을 완료한 후에도 변수에 접근할 수 있는 현상입니다.
function createGreeting(greeting) {
// 외부 함수의 변수
return function(name) {
// 내부 함수
console.log(`${greeting}, ${name}!`);
};
}
const sayHello = createGreeting('Hello');
const sayHi = createGreeting('Hi');
sayHello('John'); // "Hello, John!"
sayHi('Jane'); // "Hi, Jane!"이 예제에서:
- createGreeting 함수는 실행 후 greeting 변수를 포함하는 환경을 생성합니다.
- 반환된 내부 함수는 이 환경에 대한 참조를 유지합니다.
- sayHello와 sayHi는 서로 다른 greeting 값을 가진 별도의 클로저입니다.
- createGreeting 함수가 이미 실행을 완료했음에도 불구하고, 반환된 함수들은 여전히 해당 함수의 변수에 접근할 수 있습니다.
결론
실행 컨텍스트와 스코프는 자바스크립트의 핵심 개념으로, 변수와 함수가 어떻게 접근되고 실행되는지를 결정합니다. 이러한 개념을 제대로 이해하면 자바스크립트 코드의 동작을 정확히 예측하고, 더 효율적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.
요약하자면:
- 실행 컨텍스트는 코드가 실행되는 환경으로, 변수 객체, 스코프 체인, this 값을 포함합니다.
- 스코프는 변수와 함수의 접근 가능 범위를 결정하며, 전역 스코프, 함수 스코프, 블록 스코프가 있습니다.
- 렉시컬 스코프는 함수가 선언된 위치에 따라 상위 스코프가 결정되는 방식입니다.
- 스코프 체인은 중첩된 함수에서 변수를 찾을 때 사용되는 참조의 연결 목록입니다.
- 클로저는 함수가 자신이 생성된 렉시컬 환경을 기억하는 현상으로, 정보 은닉과 상태 관리에 유용합니다.
