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
