Javascript

이벤트 루프

2023. 7. 19. 14:42
목차
  1. 자바스크립트 이벤트 루프
  2. 콜 스택
  3. 힙
  4. 백그라운드( Web APIs )
  5. 백그라운드에서 실행되는 작업
  6. 태스크 큐
  7. 이벤트루프
  8. 콜백 함수
  9. 예시 코드
  10. 1.실행 컨텍스트 예측
  11. 2.실행 컨텍스트 예측
  12. 3. 실행 컨텍스트 예측

자바스크립트 이벤트 루프

콜 스택

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

힙

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

백그라운드( 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)

'Javascript' 카테고리의 다른 글

배열 생성  (0) 2023.10.22
프로미스와 async/await  (0) 2023.07.26
new Date() 객체  (0) 2023.04.06
객체복사  (0) 2023.04.06
자바스크립트 화살표 함수  (0) 2023.04.05
  1. 자바스크립트 이벤트 루프
  2. 콜 스택
  3. 힙
  4. 백그라운드( Web APIs )
  5. 백그라운드에서 실행되는 작업
  6. 태스크 큐
  7. 이벤트루프
  8. 콜백 함수
  9. 예시 코드
  10. 1.실행 컨텍스트 예측
  11. 2.실행 컨텍스트 예측
  12. 3. 실행 컨텍스트 예측
'Javascript' 카테고리의 다른 글
  • 배열 생성
  • 프로미스와 async/await
  • new Date() 객체
  • 객체복사
index.ys
index.ys
머리속에 떠도는 코드조각들을 맞추는 공간입니다.
index.ys
코린이 개발일지
index.ys
전체
오늘
어제

공지사항

블로그 메뉴

  • 홈
  • 방명록
  • Github
  • Notion
  • Figma
  • 타닥타닥 (235)
    • 개발일지 (124)
    • html , css (0)
    • Javascript (30)
    • Node.js (8)
    • React (2)
    • 네트워크 (1)
    • DB, SQL (5)
    • AWS (11)
    • CS (21)
    • 면접 (13)
    • 사진 (4)
    • 북로그 (3)
    • 머릿속 (5)

인기 글

최근 글

최근 댓글

hELLO · Designed By 정상우.
index.ys
이벤트 루프
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.