Of ine Lecture 1.

5
Async functions vs sync functions, real use of callbacks
JS Browser architecture
Promises
Async await
fl
 Async functions vs sync functions

What does synchronous mean? What does asynchronous mean?

Together, one after the other, sequential Opposite of synchronous
Only one thing is happening at a time Happens in parts
Multiple things are context switching with each other
 Async functions vs sync functions
Lets build some intuition

Human brain and body is single threaded

1. We can only do one thing at a time
2. But we can context switch b/w tasks, or we can delegate tasks to other people
 Async functions vs sync functions
Lets build some intuition

Human brain and body is single threaded

1. We can only do one thing at a time
2. But we can context switch b/w tasks, or we can delegate tasks to other people

You have 4 tasks -

1. Boil water
2. Cut vegetables
3. Cut maggi packet
4. Get ketchup from the shop nearby

How would you do this? Synchronously or Asynchronously?

Async functions vs sync functions
Lets build some intuition

Lets say you have 4 tasks to make food -

1. Boil water
2. Cut vegetables
3. Open maggi packet
4. Get ketchup from the shop nearby

How would you do them?

 Async functions vs sync functions
Lets build some intuition

Total time
5+

5 minutes
Async functions vs sync functions
Lets build some intuition

Total time
5+

2 minutes
Async functions vs sync functions
Lets build some intuition

Total time
5+2

2 minutes
Async functions vs sync functions
Lets build some intuition

Total time
5 + 2 +10

10 minutes
Async functions vs sync functions
Lets build some intuition

Total time
5 + 2 +10 +20
= 37 mins

20 minutes
 Async functions vs sync functions
Lets build some intuition

Or, you could multi-task

(More technically, context switch and delegate)
 Async functions vs sync functions
Lets build some intuition

Total time

Turn on gas (2 seconds)

Async functions vs sync functions
Lets build some intuition

Total time

Delegate task to house help

Async functions vs sync functions
Lets build some intuition

Total time

Delegate task to house help (kamla didi)

 Async functions vs sync functions
Lets build some intuition

Total time

Cut Maggi packet (2 mins) On the way to get ketchup (2 mins)

 Async functions vs sync functions
Lets build some intuition

Total time

Check on water (1s) On the way to get ketchup (2 mins 1 s)

Async functions vs sync functions
Lets build some intuition

Total time

Cutting vegetables (8 mins) She’s back with ketchup (10 mins)

 Async functions vs sync functions
Lets build some intuition

Total time

Cut vegetables (10 mins) Waits for 2 mins for u to nish

fi
Async functions vs sync functions
Lets build some intuition

Total time
12 minutes

Everything is done!
 Async functions vs sync functions
Lets build some intuition

Turn on gas(1s)
Delegate task
Total time
12 minutes

Cut Maggi packet (2 mins)

Get ketchup (10 mins)
Cut vegetables (10 mins)
 Async functions vs sync functions
What did we learn?

Even if you are single threaded (brain can do only one thing at a time), you can do things parallely by Delegating
You can also context switch between tasks if need be (the net time to do both the things would still be the same)

Net amount of time take to do a task can be decreased

by doing these two things (delegating and context switching)
 Async functions vs sync functions

How does JS do the same? Can JS delegate? Can JS context switch?

 Async functions vs sync functions

How does JS do the same? Can JS delegate? Can JS context switch?

Yes! Using asynchronous functions

 Async functions vs sync functions

Until now, we’ve only seen synchronous functions

 Async functions vs sync functions

Lets introduce an asynchronous function (setTimeout)

https://gist.github.com/hkirat/a75987a32fdfcab27672410930327f1a

Calling an async function

 Async functions vs sync functions

Lets introduce an asynchronous function (setTimeout)

https://gist.github.com/hkirat/a75987a32fdfcab27672410930327f1a

After 1 second,
remind me to run a function

Calling an async function

 Async functions vs sync functions

Lets introduce an asynchronous function (setTimeout)

https://gist.github.com/hkirat/a75987a32fdfcab27672410930327f1a

Maintains a clock for 1s

Proceeds to to his own thing

 Async functions vs sync functions

Lets introduce an asynchronous function (setTimeout)

https://gist.github.com/hkirat/a75987a32fdfcab27672410930327f1a

Still running 1s clock

Done with his own thing, sitting idle

 Async functions vs sync functions

Lets introduce an asynchronous function (setTimeout)

https://gist.github.com/hkirat/a75987a32fdfcab27672410930327f1a

Calls the callback

 Async functions vs sync functions

Lets introduce an asynchronous function (setTimeout)

https://gist.github.com/hkirat/a75987a32fdfcab27672410930327f1a

Starts executing
the callback

Done with their task!

 Async functions vs sync functions

What are common async functions?

setTimeout
fs.readFile - to read a le from your lesystem
Fetch - to fetch some data from an API endpoint

Things that are delegated

fi
fi
 Async functions vs sync functions

Lets try fs to read a le

https://gist.github.com/hkirat/8e85f1bc53207ea878801c9f18aab016

Reads from the lesystem

fi
fi
 Async functions vs sync functions
Lets look at the javascript architecture that lets us achieve this asynchronous nature

http://latent ip.com/loupe

https://gist.github.com/hkirat/bd8ea48f26e4f2ba44204216377ba27c
fl
 Good checkpoint

Async functions vs sync functions, real use of callbacks ✅

JS Browser architecture ✅
Promises
Async await
 Promises
Lets see the communication b/w these 2

Timmy Simmy
 Promises
Lets see the communication b/w these 2

Timmy gives her a task, and a callback function

Timmy Simmy
 Promises
Lets see the communication b/w these 2

Timmy Simmy

She does the task (reads from le/waits for 1s …)

callback
fi
 Promises
Lets see the communication b/w these 2

Timmy Simmy

She puts the result in the callback queue

callback
 Promises
Lets see the communication b/w these 2

Timmy Simmy

callback

Event loops picks it

 Promises
Lets see the communication b/w these 2

callback()

Timmy Simmy

Timmy executes it
 Promises
What does the code look like?
 Promises

This code is ugly

Promises are syntactical sugar that make this code slightly more readable
 Promises

Until now, we’ve only used other people’s asynchronous functions

How can we create an asynchronous function of our own?
 Promises

Until now, we’ve only used other people’s asynchronous functions

How can we create an asynchronous function of our own?

Ugly way

It is just a wrapper on top of another async function,

which is ne.
Usually all async functions you will write will be on top of
JS provided async functions like setTimeout or fs.readFile

https://gist.github.com/hkirat/621d9168e39d99bcc14d767c912e9777
fi
 Promises

Until now, we’ve only used other people’s asynchronous functions

How can we create an asynchronous function of our own?

1. Breathe before the next slide

2. It’s supposed to be overwhelming
3. You only need to understand the syntax for now
4. Don’t worry about how it actually works under the hood
 Promises

Until now, we’ve only used other people’s asynchronous functions

How can we create an asynchronous function of our own?

Cleaner way (promises)

Its just syntactic sugar

Still uses callbacks under the hood

https://gist.github.com/hkirat/75be07d3ea18f93cba907c85233b4217
 Lets see how Timmy and Simmy talk

Timmy

Can you read a le, promise me simarpreet

Simmy
fi
Lets see how Timmy and Simmy talk

Timmy

Sure, here’s a promise,

I may or may not resolve this promise
Returns it immediately

(Notice, no callback anywhere)

Simmy
 Lets see how Timmy and Simmy talk

Timmy

Does her thing, reads the le

Simmy
fi
 Lets see how Timmy and Simmy talk

Timmy

Calls resolve with the nal data

Simmy
fi
Lets see how Timmy and Simmy talk

onDone gets called on Timmy’s side

Timmy

Simmy
 Lets see how Timmy and Simmy talk

Ugly code Pretty code

 What even is a promise?
It is just a class that makes callbacks and async functions slightly more readable
 What even is a promise?
Whenever u create it, you need to pass in a function as the rst argument which has resolve as the
First argument

fi
Here’s a simple promise that immediately resolves
 Promises

Place for the writer of the async

function to do their magic (get
ketchup) and call resolve at the
end with the data
 Promises

.then gets called whenever the

async function resolves
 Promises

Dummy async function that almost immediately resolves

Actually logging the data with what the function above

Resolved with

https://gist.github.com/hkirat/46580244f43ca2847cfd57664a3803b1
 Promises
Try to marinate both the sides
1. Creating an async fn
2. Calling an async fn
Why even make it async Harkirat seems like you are just doing something
that can be done with a normal function

https://gist.github.com/hkirat/46580244f43ca2847cfd57664a3803b1
 Why even make it async Harkirat seems like you are just doing something
that can be done with a normal function

Intimidating async function Simple function

 You actually can, but you will need to pass in a callback which is what promises help you
write in a cleaner fashion

Intimidating async function Simple function

Async functions vs sync functions, real use of callbacks
JS Browser architecture
Promises
Async await
Async await
 Aynsc await syntax
(Again, just syntactic sugar. Still uses callbacks/Promises under the hood)

Normal syntax Async/await syntax

https://gist.github.com/hkirat/ceac2c9198f1411ba8f5aea3ada769f3 https://gist.github.com/hkirat/9e00de2335d1ead90436adef68c9b2f9
 Aynsc await syntax

Again, it is just syntactic sugar. Still uses callbacks/Promises under the hood
Makes code much more readable than callbacks/Promises
Usually used on the caller side, not on the side where you de ne an async function

fi
 Aynsc await syntax

Any function that wants to use

await, needs to be async

Rather than using the

.then syntax, we add
await before and get the
nal value in the variable
fi
 Aynsc await syntax
Again, both do the same thing

Normal syntax Async/await syntax

https://gist.github.com/hkirat/ceac2c9198f1411ba8f5aea3ada769f3 https://gist.github.com/hkirat/9e00de2335d1ead90436adef68c9b2f9
 Aynsc await syntax
In fact, all three are very similar (becomes more manageable as you move to the right

Promise (then) syntax Async/await syntax

Callback syntax

https://gist.github.com/hkirat/9843537dfcaf48ea69df1ec4c4d9091d
https://gist.github.com/hkirat/9e00de2335d1ead90436adef68c9b2f9

https://gist.github.com/hkirat/ceac2c9198f1411ba8f5aea3ada769f3