실행컨텍스트
코드의 실제 진행상황을 추적하는데 필요한 정보들을 모아둔 구조
- 함수가 ()로 호출되면 실행컨텍스트가 생성됨.
- 실행 컨텍스트에는 파라미터를 포함한 지역 메모리와 실행문이 있음.
- 함수가 종료되면 실행 컨텍스트는 사라진다.
자바스크립트의 함수 객체
- 서브루틴으로 실행할 수 있는 객체
- 동작을 나타내는 실행코드가 있으면서, 일반 객체와 동일하게 동작할 수 있다.
- 서브루틴 실행 : sum()
- 일반 객체 : sum.a = 1;
콜스택
- 현재 실행되고 있는 실행 컨텍스트를 추적하기 위한 구조체
- 함수가 실행되면 실행순서에 따라 차례대로 콜 스택에 쌓이고 종료되면 Pop된다.
- 함수가 실행될 때마다 실행컨텍스트가 생성되는데, 자바스크립트 엔진이 현재 실행중인 함수의 실행컨텍스트를 추적하기 위해선 콜스택의 top을 사용한다.
스코프
- 현재 접근할 수 있는 변수들의 범위
- 현재 실행중인 실행 컨텍스트에서 변수를 찾을 수 없다면, 상위 스코프의 실행 컨텍스트로 탐색 범위를 옮긴다.
- 이를
스코프 체인이라고 함.
- 이를
- 서로 독립된 스코프에서 생성된 함수는 스코프체인이 일어나지 않는다.
- 즉, 스코프체인은 상위 스코프의 실행 컨텍스트을 탐색하는 것을 말한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 스코프 체인이 일어나지 않음
function sum() {
return a + b;
}
function calc(a, b, expr) {
return expr();
}
calc(1,3, sum); // 에러
// 스코프 체인이 일어남
function calc(a, b) {
const sum = () => {
return a+ b;
}
return sum();
}
calc(1,3) // 4
클로저
- 함수가 함수를 반환할 때, 반환되는 함수는 자신을 둘러싼 메모리 환경을 가지고 반환하는 것
- 함수의 호출이 아닌 정의된 위치에 결정되는 스코프이며, 이를
렉시컬 스코프라고 한다.
- 함수의 호출이 아닌 정의된 위치에 결정되는 스코프이며, 이를
1
2
3
4
5
6
7
8
9
10
function outer() {
var n = 0;
function increase() {
n += 1;
}
return increase;
}
var newFn = outer();
newFn(); // n이 1 증가하여 1이 됨.
newFn(); // n이 1 증가하여 2가 됨
- 상위 실행 컨텍스트로 스코프 체인을 이어가기 전, 클로저에 변수가 있는지 먼저 확인한다.
- 클로저 변수는 함수가 호출이 되어야만 접근이 가능하기 때문에 정보은닉에 활용된다.
- 함수 호출간 공유 메모리로도 활용이 가능하다.
- 일반적으로 함수가 종료되면 메모리 환경이 사라져, 각 호출간 연결고리가 없다.
- 위 예제에서 newFn의 호출마다 이전 호출의 결과가 누적되어 n이 하나씩 증가하는 것을 말함.
비동기 자바스크립트
- 자바스크립트 엔진은 기본적으로 싱글스레드이다.
- 개발자들은 브라우저 API를 활용하여 비동기 프로그래밍을 할 수 있음.
- 동작
- 브라우저 API는 콜백을 실행조건이 되면 스레드 큐에 등록시킨다.
- 실행조건 : 네트워크 요청 종료, 타이머 종료
- 엔진이 콜백을 실행시킬 준비가 되면, 스레드 큐에서 콜 스택으로 콜백함수를 넘겨준다.
- 준비 : 콜스택이 비어있음 + 전역 실행 콘텍스트에서 실행할 코드가 없음
- 브라우저 API는 콜백을 실행조건이 되면 스레드 큐에 등록시킨다.
- 이렇게 조건을 계속 체크하고, 콜백함수를 큐에서 스택으로 옮겨주는 걸 이벤트 루프라고 한다.
출처
https://forward.nhn.com/2021/sessions/17