JS Event Loop

Creator

Creator

Seonglae Cho

Created

Created

2021 Apr 21 5:41

Editor

Editor

Seonglae Cho

Edited

Edited

2023 Feb 28 16:0

Refs

Refs

콜 스택을 체크해주는 역할을 하는 것이 이벤트루프

콜 스택이 비어있을 때 콜백 큐의 첫번째 콜백을 넘겨주도록

JS Macro Task Queue

JS Microtask Queue

현재 콜 스택에 있는 모든 함수가 실행됩니다. 함수가 값을 반환하면 스택에서 빠져나옵니다.

호출 스택이 비어있으면, 대기중인 모든 마이크로 태스크가 콜 스택으로 하나씩 들어가고, 실행됩니다! (마이크로 태스크는 스스로 새로운 마이크로 태스크를 반환해서 효율적으로 무한 마이크로 루프를 생성할 수 있습니다

호출 스택과 마이크로 스택이 모두 비게 되면, 이벤트 루프는 (매크로)태스크 큐에 남아있는 작업이 있는지 확인합니다. 작업이 남아있다면 콜스택으로 들어가서 실행되고, 값을 반환한 후에 빠져나옵니다!

notion image

[번역] 자바스크립트 시각화 : 비동기 처리

원문 : ⭐️🎀 JavaScript Visualized: Promises & Async/Await JS 코드를 다루면서 예상대로 동작하지 않은 적이 있나요? 아마 함수가 무작위로 예상되지 않는 시간에 실행되거나 실행이 지연되었을 겁니다. ES6에서 도입된 Promise는 이런 일을 다룰 새롭고 멋진 기능입니다! 수 년전의 고민이 해결되고 잠 못 이루는 밤은 다시 한 번 애니메이션을 만들 시간을 주었습니다.

[번역] 자바스크립트 시각화 : 비동기 처리

https://velog.io/@jjunyjjuny/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%9C%EA%B0%81%ED%99%94-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

[번역] 자바스크립트 시각화 : 비동기 처리

[번역] 자바스크립트 시각화 : 이벤트 루프

원문 : ✨♻️ JavaScript Visualized: Event Loop 이벤트 루프는 자바스크립트 개발자가 어떤 방식으로든 다루게 되지만, 처음 이해하기엔 다소 난해할 수 있습니다. 나는 시각적으로 학습하는 사람이고, gifs를 통한 시각적 설명으로 당신을 돕고자 합니다. 하지만 먼저, 이벤트 루프는 무엇이며, 왜 신경써야할까요? 자바스크립트는 싱글스레드로, 한 번에 한 가지일만 할 수 있습니다.

[번역] 자바스크립트 시각화 : 이벤트 루프

https://velog.io/@jjunyjjuny/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%9C%EA%B0%81%ED%99%94-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84

[번역] 자바스크립트 시각화 : 이벤트 루프

Recommendations

//////////