1 분 소요

image-20220311153508878

image-20220311153622069

​ - 널리 알려진 자바스크립트의 동작 과정

자바스크립트 엔진은 Memory Heap 과 call Stack으로 구성되어 있다.

단일 스레드 프로그래밍 언어인데 이 의미는 call stack이 하나로

멀티가 되지 않고, 하나씩 처리한다는 의미이다.

Web API

자바스크립트 엔진이 아니다. Web API 는 브라우저에서 제공하는 API 로, DOM, Ajax, Timeout 등이 있다. Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue에 밀어 넣는다.

Event Queue ( Task Queue )

비동기적으로 실행된 콜백함수가 보관 되는 영역이다. 예를 들어 setTimeout에서 타이머 완료 후 실행되는 함수(1st 인자), addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수(2nd 인자) 등이 보관된다.

비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수(setTimeout(), setInterval())의 콜백 함수가 보관되는 영역으로 이벤트 루프(Event Loop)에 의해 특정 시점(call stack이 비어졌을 떄)에 순차적으로 call stack으로 이동되어 실행된다.

  • Queue(큐) : 자료 구조 중 하나, 선입선출(FIFO, Frist In Frist OUT)의 룰을 따른다.

Call stack ( 호출 스택 )

  • Call Stack : 코드가 실행될 때 쌓이는 곳. stack 형태로 쌓임.
  • 자바스크립트는 단 하나의call stack을 사용하기 때문에 실행중인 task가 종료하기 전까지는 다른 어떤 task도 수행될 수 없다.
  • Stack(스택) : 자료구조 중 하나, 선입후출(LIFO, Last In First Out)의 룰을 따른다.

Event Loop

실제로 동작하는 웹 애플리케이션은 많은 task가 동시에 처리되는 것처럼 느껴진다. 이처럼 자바스크립트의 동시성(Concurrency)을 지원하는 것이 이벤트 루프(Event Loop)이다.

Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여, Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다. 이러한 반복적인 행동을 틱(tick) 이라 부른다.

결과

  • V8 엔진에서 코드가 실행되면 call stack에 쌓인다.
  • stack의 선입후출의 룰에 따라서 제일 마지막에 들어온 함수가 실행되며
  • stack에 쌓여진 함수가 모두 실행된다.
  • 비동기 함수가 실행되면 web api가 호출된다.
  • web api는 비동기함수의 콜백함수를 callback queue에 밀어넣는다.
  • Event loop는 call stack이 빈 상태가 되면 callback queue에 있는 첫번째 Call stack으로 이동시킨다.

자바스크립트는 단일 스레드 프로그래밍 언어이기 때문에 하나씩 밖에 실행할 수 없다.

그러나 web API, Callback Queue, Event Loop 덕분에 멀티 스레드 처럼 보여진다.

카테고리:

업데이트:

댓글남기기

참고