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)
[Link]
Calling an async function
Async functions vs sync functions
Lets introduce an asynchronous function (setTimeout)
[Link]
After 1 second,
remind me to run a function
Calling an async function
Async functions vs sync functions
Lets introduce an asynchronous function (setTimeout)
[Link]
Maintains a clock for 1s
Proceeds to to his own thing
Async functions vs sync functions
Lets introduce an asynchronous function (setTimeout)
[Link]
Still running 1s clock
Done with his own thing, sitting idle
Async functions vs sync functions
Lets introduce an asynchronous function (setTimeout)
[Link]
Calls the callback
Async functions vs sync functions
Lets introduce an asynchronous function (setTimeout)
[Link]
Starts executing
the callback
Done with their task!
Async functions vs sync functions
What are common async functions?
setTimeout
[Link] - 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
[Link]
Reads from the lesystem
fi
fi
Async functions vs sync functions
Lets look at the javascript architecture that lets us achieve this asynchronous nature
[Link] [Link]/loupe
[Link]
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 [Link]
[Link]
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
[Link]
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
[Link]
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
[Link]
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
[Link] [Link]
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
[Link] [Link]
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
[Link]
[Link]
[Link]