<목차>
- 이벤트 루프와 실행 컨텍스트
- 클로저
8. 이벤트 루프와 실행 컨텍스트
- 비동기 작업과 코드 실행 순서를 관리하는 핵심 개념
실행 컨텍스트
-
자바스크립트 코드가 실행될 때 생성되는 "환경"
-
자바스크립트는 싱글 스레드 언어(한 번에 하나의 작업만 처리할 수 있는 프로그래밍 언어)이기 때문에 하나의 실행 컨텍스트만 활성화 됨
-
자바스크립트는 콜 스택을 사용하여 실행 컨텍스트를 관리
-
새로운 함수가 호출되면 해당 함수의 실행 컨텍스트가 콜 스택의 최상단에 쌓이고 함수가 종료되면 최상단의 실행 컨텍스트가 제거
-
실행 컨텍스트의 종류
1.글로벌 실행 컨텍스트: 자바스크립트 코드가 시작될 때 생성, 전역 코드나 전역 변수, 전역 함수가 실행되는 환경. 애플리케이션이 종료될 때까지 남아있음
2.함수 실행 컨텍스트: 함수가 호출될 때마다 생성되며, 함수가 종료되면 제거된다. -
실행 컨텍스트의 구성 요소
1. 변수 환경 : 함수 내에서 선언된 변수나 함수 선언이 저장
2. 스코프 체인 : 변수 접근을 위한 참조 체인, 현재 실행 컨텍스트와 부모 컨텍스트의 변수를 참조 할 수 있음
3. this 바인딩 : this 키워드가 현재 실행 컨텍스트 내에서 가리키는 대상을 정의
이벤트 루프
- 비동기 작업 메커니즘
- 자바스크립트느 싱글 스레드로 동작하기 때문에 비동기 코드처리를 위해 이벤트 루프 필요
- 이벤트 루프의 주요 역할은 콜 스택과 태스크 큐를 관리
- 콜스택과 태스크 큐
1. 콜스택 : 실행중인 함수들의 실행 컨텍스트가 쌓이는 곳으로 함수 호출 시 스택에 쌓이고 함수 종료 시 스택에서 제거됨
2. 태스크 큐 : 비동기 작업의 콜백함수들이 대기하는 곳. - 이벤트 루프의 동작방식
1. 콜 스택이 비어있는지 확인합니다.
2. 콜 스택이 비어 있으면 메시지 큐에서 대기 중인 콜백을 꺼내 콜 스택에 넣고 실행
3. 이 과정을 반복하면서 비동기 작업이 순차적으로 처리
실행 컨택스트와 이벤트 루프의 관계
- 실행 컨텍스트는 주로 함수 실행에 관련된 환경을 정의.
- 이벤트 루프는 비동기적으로 실행되는 코드의 순서를 조율하는 역할
- 이벤트 루프는 실행 컨텍스트를 직접적으로 변경하지 않지만 비동기 콜백(이벤트가 완료된후 실행되도록 예약된 함수)이 호출되면 해당 콜백의 실행 컨텍스트가 콜 스택에 추가되어 실행
Q. 이벤트 루프와 실행 컨텍스트에 대해서 설명해주세요.
9. 클로저
- 함수가 선언될 때 스코프를 기억하여 외부 함수가 종료된 이후에도 해당 스코프에 접근할 수 있는 기능
- 함수가 자신이 선언된 환경 (렉시컬 환경)을 기억하여 외부 함수가 끝난 이후에도 해당 환경에 접근가능
- 자바스크립트의 함수는 "렉시컬 스코핑"을 따르기 때문에 가능
- 함수가 어디서 호출되는지가 아니라 어디서 선언되었는지에 따라 접근 가능한 변수 범위가 결정
function outerFunction() {
const outerVariable = "I'm an outer variable";
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const closureFunc = outerFunction();
closureFunc(); // "I'm an outer variable"위 코드에서:
outerFunction이 호출되면 outerVariable이라는 변수가 생성되고, innerFunction을 반환합니다.
outerFunction이 종료되어도, 반환된 innerFunction이 여전히 outerVariable에 접근할 수 있습니다.
이렇게 innerFunction은 외부 함수가 종료된 후에도 자신이 선언된 스코프(즉, outerFunction의 스코프)를 기억하는 클로저가 됩니다.
클로저의 특징
- 데이터 은닉 : 클로저는 외부 함수 내부의 변수를 외부에서 직접 접근하지 못하게 하면서, 클로저 함수를 통해서만 접근할 수 있게 만든다. 이를 통해 데이터를 은닉하고 보호할 수 있습니다.
- 상태 유지 : 클로저는 자신이 선언된 환경을 기억하기 때문에 외부 함수가 종료된 이후에도 그 환경을 유지할 수 있음. 예를 들어 클로저를 사용하여 카운터와 같은 상태를 저장하고 업데이트할 수 있음
데이터 은닉과 상태 유지 예시
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3클로저의 실용적인 활용 예
1. 프라이빗 변수 : 클로저를 이용해 객체의 프라이빗 변수를 만들 수 있음. -> 객체 지향 프로그래밍에서 중요한 개념
2. 콜백함수 : 비동기 작업에서 클로저는 종종 콜백 함수로 사용되어 , 실행시점에서의 스코프 상태 기억
클로저 주의사항
- 메모리 누수 : 자신이 접근하는 외부 변수의 참조를 계속 유지하기 때문에 메모리를 소모. 클로저를 과도하게 사용하면 메모리 누수 발생
- 성능 문제 : 클로저는 자주 사용되면 메모리와 성능에 부담 , 필요할 때만 사용하는 것이 좋음
=> 클로저는 함수가 선언될 당시 스코프를 기억하여, 외부 함수가 종료된 이후에도 해당 스코프에 접근할 수 있는 메커니즘입니다. 클로저를 사용하면 데이터 은닉과 상태 유지를 쉽게 할 수 있으며, 자바스크립트의 비동기 처리나 콜백 함수 등 다양한 상황에서 유용하게 사용됩니다.
Q. 클로저에 대해 설명해주세요.
