이벤트 루프

자바스크립트 이벤트 루프

콜 스택

• 함수가 호출되는 순서대로 저장되는 스택
• 함수실행시 호출 스택에 해당함수를 넣음
• 함수의 실행 문맥
• 호출 스택이 비어있다 === 실행할 함수가 남아 있지 않다.
• 자바스크립트는 싱글스레드 방식으로 동작한다 === 콜 스택이 하나다 === 동시에 하나의 일만 처리할 수 있다

힙

• 자바스크립트 파일 실행시 변수, 객체 등 실행에 필요한 데이터들이 메모리에 저장되는 공간

백그라운드( Web APIs )

• 자바스크립트가 비동기적으로 작업을 처리할 수 있게 해주는 공간
• 비동기 작업 : 특정 작업을 시작하고 기다리는 동안 다른 작업을 수행할 수 있도록 해줌

백그라운드에서 실행되는 작업

• 타이머 작업 : setTimeout, setInterval , 백그라운드에서 타이머를 세고, 타이머가 완료되면 태스크 큐로 콜백 함수를 보냄
• 이벤트 기반 작업 : 클릭, 키보드, AJAX요청, XMLHttpRequest 이벤트등 이벤트를 백그라운드에 등록하고 대기하고 있다가 해당 이벤트가 발생하면 발생한 이벤트에 대한 콜백함수를 태스크 큐에 보내 함수를 실행함
• Promise: 백그라운드에서 실행되는 비동기 작업의 결과를 대기함, 완료되면 콜백함수를 태스크 큐로 보내 콜 스택이 비면 태스크 큐에 있는 작업을 실행함 , 이때 태스크큐에 있는 작업의 우선순위는 일반 작업보다 promise의 우선순위가 높음

태스크 큐

• 비동기 작업의 콜백함수 와 관련된 이벤트들을 저장하는 자료구조
• 백그라운드에서 시간이 만료됐거나, 발생한 이벤트들에 대한 작업을 큐에 저장하고 콜스택이 비면 저장된 순서대로  콜백함수를 실행함 => 다른 작업보다 promise의 우선순위를 먼저처리함(새치기)

이벤트루프

• 콜 스택과, 태스크 큐를 주시하고 있다가 호출스택이 비게 되면 태스크 큐에 있는 콜백함수를 콜 스택으로 옮겨주어 코스택에서 콜백 함수가 실행되도록 해주는 역할

콜백 함수

• 함수안에 인자로 들어가 있느 함수
• 콜백 수신 함수에 의해 특정 시점에 실행
• 동기 콜백의 경우 호출 즉시 실행
• 비동기 콜백의 경우 조건을 만족했을때, 이벤트 리스너, 타이머, AJAX요청 등

예시 코드

1.실행 컨텍스트 예측

function multiply(a, b) {
  return a * b;
}

function square(n) {
  return multiply(n, n);
}

function printSquare(n) {
  let squared = square(n);
  console.log(squared);
}


printSquare(4);

2.실행 컨텍스트 예측

function second() {
  setTimeout(function () {
    console.log('고독하구만..');
  }, 2000)
}

function first() {
  console.log('왜 답장이 없지')
  second();
  console.log('술이나 마셔야지..')
}

first();

3. 실행 컨텍스트 예측

function aaa() {
  setTimeout(() => {
    console.log('d');
  }, 0)
  console.log('c')
}

setTimeout(() => {
  console.log('a');
  aaa()
}, 0);


setTimeout(() => {
  aaa();
  console.log('b')
}, 0)