Scribd
Upload
25 views

JS Event Loop, Promises, Async Await Etc: Slava Kim

This document discusses JavaScript concurrency concepts including the event loop, promises, and async/await. It explains that JavaScript is single-threaded but concurrent by using an event loop and callback queue. This allows multiple tasks to be handled simultaneously by passing control back and forth between functions in response to events. Promises help solve callback hell by providing a cleaner way to handle asynchronous code. Async/await provides an even cleaner syntax by allowing asynchronous code to be written similarly to synchronous code.

Uploaded by

ravilla aswinikumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

JS Event Loop, Promises, Async Await Etc: Slava Kim

This document discusses JavaScript concurrency concepts including the event loop, promises, and async/await. It explains that JavaScript is single-threaded but concurrent by using an event loop and callback queue. This allows multiple tasks to be handled simultaneously by passing control back and forth between functions in response to events. Promises help solve callback hell by providing a cleaner way to handle asynchronous code. Async/await provides an even cleaner syntax by allowing asynchronous code to be written similarly to synchronous code.

Uploaded by

ravilla aswinikumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

JS Event Loop, Promises,

Async Await etc


Slava Kim
Synchronous
Happens consecutively, one after another
Asynchronous
Happens later at some point in time
Parallelism vs Concurrency
What are those????
Concurrency - multiple tasks are handled

Parallelism - doing multiple tasks at the same time


Parallelism vs Concurrency

TA
Parallelism vs Concurrency

TA Student
Parallelism vs Concurrency

TA
Parallelism vs Concurrency

TA
Parallelism vs Concurrency

TA
Parallelism vs Concurrency

TA
Parallelism vs Concurrency

TA
Is TA concurrent or parallel?
TA is not parallel - there is only one TA

TA is concurrent tho, the TA goes around and is helping 3 students


“simultaneously”, but some students need to wait
Parallelism vs Concurrency

TA TA
Parallelism vs Concurrency

TA TA
Parallelism vs Concurrency

TA

TA
Parallelism vs Concurrency

TA
TA
Parallelism vs Concurrency

TA

TA
Is TA concurrent or parallel?
There are multiple TAs - we can achieve parallelism with concurrency

Still handling multiple students at the same time


CPU analogy
Each TA - one CPU

Each student - a separate task

Some programming languages allow you to use multiple cores (C++, Java)

JavaScript is single threaded, can only use one core, but is still concurrent

How?
Queue

TA
Queue

TA
Queue

TA
Queue

JS click keypressclick click time


out
Why callbacks?
Why callbacks?

click
Callbacks to handle a result of an operation

result
Time outs and intervals

timeout
Event Loop

JS click result click timeout


Each individual event is handled in some order
New events are queued up in the end
Somewhere in C++ implementation of JS Engine
Event Loops example
Event Loops example

A
C
… (2 second delay)
B
Event Loops example
Event Loops example

A
C
… (virtually no delay)
B
Event Loops: Good
It is a “simple” model to work with to achieve concurrency

No need for locks, or critical sections. Each function is a critical section

Good when you have a lot of I/O work (most web servers, UI systems)

Examples of I/O: talking to database, handling requests, waiting for user to click
Event Loop: bad
CPU intensive operations will bring down your browser/server

Can be confusing for new users

No real way to predict in which order events will happen


Promises - motivation
Promises - motivation

Callback hell!
Possible solution with promises
Only one additional level
of nesting

Error handling can be


grouped together

Only one branch of


continuation
Possible solution with promises
Only one additional level
of nesting

Error handling can be


grouped together

Only one branch of


continuation
Promises - await all
Promises - await all
Promises - race
Promises - availability
Available in all modern browsers (rip IE)

Available in latest Node.js

Works with MongoDB client

Might need to wrap other libraries into promises interface with “promisify”

Makes code cleaner and easier to manage, yay!

Your interviewers will impressed


Async/Await
New feature in the latest spec of JavaScript

Can await on anything that returns a promise

Is not yet available widely without special setup

Makes code even nicer


Callback hell!
Possible solution with promises
Solution with Async/Await
No extra indentation or
nesting at all

Code “reads”
synchronous but
actually is async

Handle errors with


try/catch construct just
like synchronous code
Solution with Async/Await
No extra indentation or
nesting at all

Code “reads”
synchronous but
actually is async

Handle errors with


try/catch construct just
like synchronous code
Why don’t we use it now?
To make it work, you need to setup a compiler from “newest JS” to “old JS”

Every function that makes use of “await” needs to be marked “async”

Can make code difficult to follow


But you still can use it
Supported in latest node, latest Chrome and latest Firefox

Probably will break on a lot of other places

[demo]

You might also like