Week 2.
1
1. Callbacks,
2. Async functions
3. Promises
4. JS functions (map, lter)
5. Assignment
If you already know this, feel free to skip this video!
More of a revision video
No bounties today
fi
Week 2.1
Before we start
We have covered this
Week 2.1
Before we start
For people who are struggling here -
1. Try going through the o ine videos
2. This (esp promises) gets better
with practise
3. As the weeks progress, if you are
We have covered this
consistent the syntax will fall into
place
4. Consistency is everything, don’t
drop o
5. You need one eureka moment at
which you get async programming
and then the ride is smooth until
React
ff
ffl
There are 3 big humps in Full stack
1. Async nature of JS
2. React
3. JS to TS
We are here
This is the gist of the hump
If you understand this, you are sorted
If not, there is a knowledge gap
1.5 | Async, Await and Promises
Pre-requisites - Functions, var, const, data types in JS
What did we cover until now?
Live session 1 - Computers, Basic JS syntax, intro to callbacks
O ine session 1 - Simple JS APIs (Classes, Date class, string functions, object functions)
O ine session 2 - Loops, functions and callback functions
O ine session 3 - Async functions, JS Architecture and Promises
ffl
ffl
ffl
What all we need to know
Before we proceed to HTTP?
De nitely - callback
Good to know - JS Architecture, Promises
fi
Callbacks
Look at the code on the right, can you understand it?
https://gist.github.com/hkirat/1809806cb30e5dbdfafe0ee170b8437d
Callbacks
Look at the code on the right, can you understand it?
Now add a sumOfCube function to it
https://gist.github.com/hkirat/1809806cb30e5dbdfafe0ee170b8437d
Callbacks
Look at the code on the right, can you understand it?
Now add a sumOfCube function to it
https://gist.github.com/hkirat/aa8d262e 8bede7475e118004ba50b1
ff
Callbacks
Problem? Code repetition
https://gist.github.com/hkirat/aa8d262e 8bede7475e118004ba50b1
ff
Callbacks
Problem? Code repetition
Can you create a single function (squareOfSomething) that does
This logic on a function it gets as an input
https://gist.github.com/hkirat/aa8d262e 8bede7475e118004ba50b1
ff
Callbacks
Problem? Code repetition
Can you create a single function (squareOfSomething) that does
This logic on a function it gets as an input
https://gist.github.com/hkirat/aa8d262e 8bede7475e118004ba50b1
ff
Callbacks
Both are the same
1. Callbacks,
2. Async functions
3. Promises
4. JS functions
5. Assignment
2. Async functions
2. Async functions
What is async? - Asynchronous
1. Your javascript thread doesn’t have access to everything immediately
2. There are some tasks it needs to wait for
For example -
1. Reading a le
2. Sending a network request
3. A deliberate timeout
fi
2. Async functions
Lets see an async function call
2. Async functions
Lets see an async function call
2. Async functions
Lets see an async function call
2. Async functions
Lets see an async function call
2. Async functions
Lets see it on loupe
http://latent ip.com/loupe/
fl
1. Callbacks,
2. Async functions
3. Promises
4. JS functions
5. Assignment
Promises
Lets start with a question
Promises
What are promises?
1. Just syntactical sugar
2. Just a more readable way to write async functions
Can you write JS without them
Yes - Just use callbacks
Promises
Lets start with a question
How would you create your own async function?
Promises
Approach #1
(Wrapping another async fn)
Promises
Approach #1
(Wrapping another async fn)
This approach uses a callback
You have created a function where other people can send a callback
This is good, but could lead to callback hell
Promises
Approach #1
(Wrapping another async fn)
This approach uses a callback
You have created a function where other people can send a callback
This is good, but could lead to callback hell
What if I tell you -
Create a function that logs something after 1s
And then waits for 2 seconds to log another thing
https://gist.github.com/hkirat/70eecb2d8ed0b5ef6a393e4f1e5369e1
Promises
Approach #1
(Wrapping another async fn)
This approach uses a callback
You have created a function where other people can send a callback
This is good, but could lead to callback hell
What if I tell you -
Create a function that logs something after 1s
And then waits for 2 seconds to log another thing
https://gist.github.com/hkirat/70eecb2d8ed0b5ef6a393e4f1e5369e1 Callbacks lead to unnecessary indentation
This is called callback hell
Promises
Approach #1
(Wrapping another async fn)
This approach uses a callback
You have created a function where other people can send a callback
This is good, but could lead to callback hell
What if I tell you -
Create a function that logs something after 1s
And then waits for 2 seconds to log another thing
https://gist.github.com/hkirat/70eecb2d8ed0b5ef6a393e4f1e5369e1 Callbacks lead to unnecessary indentation
This is called callback hell
Lets see how promises x this
fi
Promises
Approach #1
(Wrapping another async fn)
Promises
Approach #1 Approach #2
(Wrapping another async fn) (Using promises)
https://gist.github.com/hkirat/9a7a0ef9ad6788f645497a2cd2b92106
Promises
Approach #3
Approach #1 Approach #2
(Async await)
(Wrapping another async fn) (Using promises)
https://gist.github.com/hkirat/9a7a0ef9ad6788f645497a2cd2b92106
1. Callbacks,
2. Async functions
3. Promises
4. JS functions
5. Assignment
map
Question - Convert an array of numbers into a new array with every element
Multiplied by 2
map
Question - Convert an array of numbers into a new array with every element
Multiplied by 2
Do it yourself
Filter
Question - Convert an array of numbers into a new array with only the even elements
Do it yourself
1. Callbacks,
2. Async functions
3. Promises
4. JS functions
5. Assignment
Assignments
