Async Jscript
Async Jscript
**Highlights**:
+ [00:02:20][^3^][3] **Synchronous**: One task after another, the next task starts
only when the previous one is completed.
* Example: Doing three tasks one by one
+ [00:05:24][^4^][4] **Asynchronous**: Multiple tasks start at the same time, the
response is given whenever the task is completed.
* Example: Doing four tasks at the same time, the response is given in the
order of completion
+ [00:08:15][^5^][5] **Parallelism**: Multiple tasks run at the same time on
different threads or cores, increasing the performance and speed.
* Example: Using web workers to run tasks on different threads
+ [00:10:55][^6^][6] **Concurrency**: Multiple tasks run at the same time on the
same thread or core, using a queue or a stack to manage the execution order.
* Example: Using event loop to run tasks on the same thread
Part 2 of the video talks about the difference between synchronous and asynchronous
code in JavaScript, and how to use callbacks, promises, and async/await to handle
asynchronous tasks. It also explains the concept of the event loop and how it
manages the execution of code on the main stack and the side stack.
**Highlights**:
+ [00:12:00][^3^][3] **Synchronous vs asynchronous code**
* Synchronous code runs line by line, waiting for each line to finish before
moving to the next
* Asynchronous code runs multiple lines at the same time, without waiting for
each line to finish
* Asynchronous code is useful for tasks that take an unknown amount of time,
such as fetching data from a server
+ [00:17:03][^4^][4] **Callbacks**
* Callbacks are functions that are passed as arguments to another function, and
are executed when a certain condition is met
* Callbacks can be used to run some code after an asynchronous task is
completed
* Callbacks can also be nested inside each other, but this can lead to callback
hell, which is a situation where the code becomes hard to read and maintain
+ [00:23:17][^5^][5] **Promises**
* Promises are objects that represent the state of an asynchronous task, such
as pending, fulfilled, or rejected
* Promises can be created using the new Promise constructor, or using the
built-in methods like fetch, setTimeout, etc.
* Promises can be chained using the then and catch methods, which take
callbacks as arguments and return another promise
* Promises can also be resolved or rejected using the resolve and reject
functions, which pass the value or the error to the next promise in the chain
+ [00:28:01][^6^][6] **Async/await**
* Async/await is a syntactic sugar that makes working with promises easier and
more readable
* Async/await consists of two keywords: async and await
* Async is used to declare a function that returns a promise
* Await is used to pause the execution of the function until the promise is
resolved or rejected
* Await can only be used inside an async function, and it returns the value or
the error of the promise
+ [00:31:02][^7^][7] **Event loop**
* Event loop is a mechanism that handles the execution of code on the main
stack and the side stack
* Main stack is where the synchronous code runs, and it follows the first in,
last out (FILO) principle
* Side stack is where the asynchronous code runs, and it follows the first in,
first out (FIFO) principle
* Event loop checks the main stack and the side stack, and moves the code from
the side stack to the main stack when the main stack is empty and the side stack
has some code ready to execute
Part 3 of the video talks about how to use callback functions and promises in async
JavaScript. It covers the concepts of single-threading, event loop, call stack, web
APIs, and microtasks queue. It also explains how to handle errors and chaining in
promises.
**Highlights**:
+ [00:34:00][^3^][3] **Introduction**
* The instructor introduces the topic and the code editor
* He shows an example of a callback function with setTimeout
+ [00:36:19][^4^][4] **Single-threading and event loop**
* He explains that JavaScript is single-threaded and can only execute one task
at a time
* He demonstrates how the event loop works with the call stack, web APIs, and
callback queue
+ [00:40:05][^5^][5] **Callback functions**
* He defines a callback function as a function that is passed as an argument to
another function
* He shows how to use callback functions with fetch, then, and catch
+ [00:44:06][^6^][6] **Promises**
* He defines a promise as an object that represents the future outcome of an
asynchronous operation
* He shows how to create and use promises with resolve, reject, and then
+ [00:47:13][^7^][7] **Promise chaining and error handling**
* He explains how to chain multiple promises with then and catch
* He shows how to handle errors and rejections with catch and finally
Part 4 of the video talks about how to use promises in JavaScript to handle
asynchronous tasks. It covers the syntax, the states, and the chaining of promises.
It also gives some examples of creating and using promises with different
conditions and functions.
**Highlights**:
+ [00:48:59][^3^][3] **What is a promise and how to create one**
* A promise is an object that represents a future value
* To create a promise, use the `new Promise` constructor with a function
* The function takes two parameters: `resolve` and `reject`
* To fulfill the promise, call `resolve` with the value
* To reject the promise, call `reject` with the reason
+ [00:51:07][^4^][4] **How to use a promise and handle its state**
* A promise can be in one of three states: pending, resolved, or rejected
* To use the value of a resolved promise, use the `.then` method with a
callback function
* To handle the reason of a rejected promise, use the `.catch` method with a
callback function
* The callback functions receive the value or the reason as an argument
+ [00:54:08][^5^][5] **How to chain promises and return new promises**
* To perform multiple asynchronous tasks in order, return a new promise from
the `.then` or `.catch` method
* The new promise will be resolved or rejected based on the return value or the
error
* The next `.then` or `.catch` method will receive the value or the reason of
the new promise
* This way, the promises can be chained together and avoid the callback hell
+ [00:57:00][^6^][6] **How to create and use a simple promise example**
* The example asks the user to enter a number between 0 and 9
* If the number is below 5, the promise is resolved with the message "Below"
* If the number is not below 5, the promise is rejected with the message "Not
below"
* The `.then` method prints the data and returns a new promise with the message
"Gate open and close"
* The `.catch` method prints the error and returns a new promise with the
message "Door open and close"
Part 5 of the video talks about how to use async and await keywords to simplify
asynchronous code in JavaScript. It covers the concepts of promises, then, catch,
and finally, and how to convert them to async and await syntax. It also explains
the difference between concurrency and parallelism, and how to use throttling to
control the number of executions.
**Highlights**:
+ [01:02:04][^3^][3] **How to chain promises using then and return new promises**
* Example of a task that involves three promises
* How to use then to access the resolved value of each promise
* How to return a new promise inside then to continue the chain
+ [01:09:29][^4^][4] **How to use async and await to write synchronous code for
asynchronous tasks**
* How to declare a function as async and use await to get the resolved value of
a promise
* How to convert the previous example of chaining promises to async and await
syntax
* How to handle errors using try and catch blocks
+ [01:14:30][^5^][5] **The concept of concurrency and parallelism in JavaScript**
* How JavaScript can run multiple tasks at the same time using the event loop
and callbacks
* How parallelism can be achieved using multiple processor cores and threads
* How to use Web Workers to run parallel tasks in the browser
+ [01:15:50][^6^][6] **The concept of throttling and how to use it to optimize
performance**
* How scrolling events can trigger many callbacks and affect performance
* How to use throttling to limit the number of times a function is executed in
a given time interval
* How to use a library like Lodash to implement throttling easily