[JavaScript] Chapter 22. 이벤트 동작원리

이벤트 루프

• 싱글 스레드 기반 언어
• 한 번에 한 개만 작업 진행

 

이벤트 루프 동작 방식

• Javascript Engine
  • Heap과 Call Stack으로 구성
• Heap
  • 메모리 할당이 일어나는 공간
  • 변수, 함수 선언 시 메모리 할당 일어남
• Call Stack
  • 코드 실행 시 쌓임
  • LIFO (Last In First Out)
• WebAPIs
  • 브라우저에서 제공하는 API
  • DOM, Ajax, 타이머 함수 등
  • Callback 함수를 Callback Queue에 넣음 
• Callback Queue
  • 비동기적으로 실행된 콜백 함수 있음
    • ex) Ajax나 타이머 함수 실행 완료 후, 실행할 콜백함수가 보관
  • FIFO (First In First Out)
• Event Loof
  • 이벤트 루프
  • 틱(tick. 반복적인) 동작을 함 

 

정리 : Callback Stack에서 실행된 비동기 함수는 WebAPI를 호출해서, WebAPI는 비동기 함수를 실행하고 나서 Callback 함수를 Callback Queue에다 넣고, Callback Queue는 Javascript Engine의 Call Stack에 비어있는지 확인하고나서, 비어있으면 Callback Queue에 있는 것을 Call Stack으로 넣는 반복되는 구조. (이벤트 루프)

자바스크립트는 하나 씩 처리하는 싱글 스레드 기반 언어이지만, 이벤트 루프를 통해서 위의 구조로 동시성을 가지고 한 번에 여러가지 작업을 처리하는 것처럼 보이게 한다.

 

---

 

실행 컨텍스트

• 코드 실행 환경

실행 컨텍스트 생성 방법

1. 전역 공간
2. eval()
3. 함수
4. 블록문(block) : (ES6+)

var str = "전역 컨텍스트";

function fnOuter() {    // outer 컨텍스트
  function fnInner() {  // inner 컨텍스트
    var str = "내부변수";
    console.log(str);  // 내부변수
  }
  fnInner();
  console.log(str);  // 전역 컨텍스트
}
fnOuter();
console.log(str);  // 전역 컨텍스트

 

실행 컨텍스트 구성

1. VariableEnvironment
2. LexicalEnvironment
3. ThisBinding

=> 실행 컨텍스트 구성 시 수집함

 

 VariableEnvironment

• 변수 환경
• LexicalEnvironment와 동일한 값
  • => 현재 컨텍스트 내의 식별자 정보 + 외부 정보
• 변경 사항이 반영 안됨

 LexicalEnvironment

• 어휘적 환경
  • => 현재 컨텍스트 내의 식별자 정보 + 외부 정보
• 컨텍스트 내부를 전체적, 순서대로 수집함
• 변경 사항이 반영 됨

식별자 정보

• 현재 컨텍스트와 관련된 정보 저장
• 매개변수, 함수, 변수
  • => 호이스팅

외부 정보

• 함수 선언 당시의 언어적 환경을 참조

let str = "전역";
function test() {
  let str2 = "지역";
  console.log(str);
}
test();

ThisBinding

• this는 실행 컨텍스트 생성 시 결정
• 함수 호출 시 객체를 참조