DEV Community: Diana

Async, Await in Javascript

Diana — Thu, 24 Oct 2024 09:25:38 +0000

In Javascript async, await provide more readable and "cleaner" way to work with promises. (You can read about promises here).

First let's understand the syntax.

async Keyword:

We have the async key word, when we declaring that a function is async we know that this function will always return a promise. Even if you return a value directly, JavaScript automatically wraps it in a promise.

await Keyword:

First of all we must know that if we want to use the await keyword, we can only use it inside an async function.
This await keyword is pausing the execution of an async function until the promise is resolved or rejected.

Let's see a very simple example of async/await and after that we will use a bigger example that will compare the full promises approach (without async/await) to the async/await approach.

simple example of async/await:

Let's break it:

response.ok: This property checks if the HTTP status code of the response is in the successful range (200-299).
response.json(): If the response is successful, this function parses the JSON data returned by the server.
response.status: This gives you the exact status code, such as 404 (Not Found) or 500 (Server Error).

Now that we understand the basics of async/await let's dive deeper and see another example with promises.
We have 3 functions, each function is returning a promise:

(The explanation for those function you can find here)

Now, we can call those function with than() and catch():

This code is an example of promise chaining in JavaScript, where asynchronous operations (like fetching data) are performed sequentially, and each step relies on the result of the previous one.

Once getOrders(user.id) resolves, it passes the orders array to the callback function inside the next .then().
The orders are logged to the console.
Then, getOrderDetails(orders[1]) is called, which takes the second order in the orders array (assuming it exists).
This function returns a promise that resolves when the order details are fetched.
The promise from getOrderDetails() is returned, so the next .then() waits for this promise to resolve.

Result:

Async/Await approach:

This code is an example of how async/await is used in JavaScript to handle asynchronous operations in a more readable, compared to the promise chaining approach.

Explanation:
1.async function asyncAwaitExample():

This function is marked as async, which means it will always return a promise. It allows the use of the await keyword within it.
- Inside the function, asynchronous code can be written in a way that looks and behaves like synchronous code, improving readability.

try { ... } catch (error) { ... }:

The try-catch block is used to handle errors. Any errors that occur during the execution of asynchronous operations will be caught in the catch block.

const user = await getUser(1);:

The await keyword pauses the execution of the function until the getUser(1) promise is resolved. -Once the getUser promise resolves, the result (the user object) is stored in the user variable -If the promise is rejected (i.e., an error occurs), it jumps to the catch block to handle the error -Same operation for const Order, const details

4.catch (error) { console.log("error is:", error); }:

If any of the asynchronous functions (getUser, getOrders, or getOrderDetails) throw an error or their promise is rejected, execution jumps to the catch block.

Result:

Benefits of async/await:

1.Readability: Asynchronous code looks like synchronous code, reducing the need for nesting .then() blocks or dealing with callback hell.
2.Error Handling: With a simple try-catch block, you can handle errors in a more straightforward manner than using .catch() with promises.
3.Maintainability: As the logic becomes more complex, it’s easier to follow and maintain with async/await than with promise chains.

Promise in Javascript

Diana — Sun, 20 Oct 2024 06:04:05 +0000

Promise

represents a value that may be available now, or in the future, or never.
Promise Life Cycle:

Pending: The function starts to work.
Fulfilled: The operation completed successfully, and we have a result value.
Rejected: The operation failed, and we have an error object.

Syntax of a Promise:

A promise is created using the new Promise constructor, which takes a function with two arguments: resolve and reject.

In the code snippet, we have a function called getUser, which returns a new Promise (a promise object that has methods to handle asynchronous operations).

Inside the Promise constructor, we have a setTimeout function that simulates an asynchronous operation, such as fetching data from a database. The promise has two key methods passed to it:

resolve: This is called when the operation is successful. In this case, if id === 1, it returns a mock user object { id: 1, name: "Diana", email: "Diana@test.com" }.
reject: This is called when the operation fails. If the id is not 1, the promise is rejected with an error message "User not found...".

The resolve and reject functions act like return statements in the context of promises, allowing the caller to handle the success or failure of the operation.

Chaining Promises

Promises can be chained, allowing you to perform a series of asynchronous operations in sequence:

In this example, we are chaining multiple promises to simulate fetching data step by step.

First, we call getUser(1) to get the user data. If it works, we move to the next step.
Second, we take the user.id and use it to get the orders for that user by calling getOrders(user.id).

-Third, we pick the second order (orders[1]) from the list and get its details using getOrderDetails(orders[1]).

If anything goes wrong at any point (like the user not being found or orders missing), the error will be caught in the .catch() block and displayed.

Simple Breakdown:

You ask for a user.
If you find the user, you ask for their orders.
If you get the orders, you ask for details about one of the orders.
If anything goes wrong (like the user or orders not being found), - it will show an error.

result:

This approach makes it easier to work with asynchronous tasks in a clean, step-by-step way instead of having messy code.

Promise Methods:

Promise.all(): Executes multiple promises in parallel and waits until all of them are resolved.

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results);  // Array of all fulfilled values
  });

Example:

(I recommend to read and compare this approach to callbacks)

Callbacks in Javascript

Diana — Sat, 19 Oct 2024 14:24:56 +0000

In JavaScript we have different ways to handle asynchronous calls.
It allows you to handle asynchronous tasks like fetching data from a server, reading files, or waiting for an event.

Callbacks

This is a function that calls to another function.
Let's see an example so we can understand it better:

Calling getUser() with an id and callback function that will print users id, name and email. The callback will be executed once the asynchronous getUser operation completes.

The getUser() Function:

id: This is the id of the user you want to retrieve passed from the getUser(1, ...) call.
callback: This is the function that will be called after the "user data" is retrieved (simulated here by the setTimeout() function).
Inside the setTimeout() function the callback() function is called after the delay, passing a mock user object as its argument: { id: id, name: 'Diana', email: 'Diana@test.com' }.

Execution Flow:

getUser(1, user => { console.log('User', user); }); is called.
Inside getUser(), a 3-second delay is triggered using setTimeout().
After 3 seconds: The message 'Fetching user from DB...' is logged to the console. The callback function is invoked with the user object { id: 1, name: 'Diana', email: 'Diana@test.com' }.
The callback function logs User and the user object to the console.

Final Output:

Callback Hell

Callback hell pattern - this happens when multiple asynchronous operations depend on each other, leading to deeply nested callbacks. As the nesting increases, the code becomes harder to read, maintain, and debug. Let's see an example:

Let's break it down:

Fetching the User: Here, we initiate the first asynchronous call, getUser(1), which simulates fetching user data from a database. Once the data is fetched, the callback function is executed, logging the user details to the console.

getUser(1, user => {
    console.log('User', user);
    // ...
});

Fetching the User's Orders:
Inside the callback for getUser(), we make another asynchronous call to getOrders(user.id), simulating fetching the user's orders from the database. This requires nesting another callback inside the first one. Once the orders are fetched, the orders are logged.

getOrders(user.id, orders => {
    console.log(`${user.name}'s orders`, orders);
    // ...
});

Fetching the Order Details: After fetching the orders, we need to get the details of one specific order (orders[1]). This leads to a third level of nesting, where getOrdersDetails() is called to fetch the order details, and then logs them to the console.

getOrdersDetails(orders[1], details => {
    console.log('Order Details', details);
});

Code Structure (Nesting):

Notice how each asynchronous operation depends on the previous one, resulting in a deeply nested structure. Making the code difficult to:

Read: It’s hard to follow the flow of the logic when callbacks are deeply nested.
Error handling: It's difficult to handle errors at multiple levels of callbacks.

3.Debug: Identifying where an error occurs becomes more complex when many levels of callbacks are involved.

Also it makes the code "Tight coupling" - each function depends on the previous one’s output, which means that the code is tightly coupled, reducing reusability.

Result:

Avoiding Callback Hell:
Callback hell can be avoided by using modern JavaScript features like Promises and async/await. These methods allow asynchronous code to be written in a more readable, sequential manner.

Synchronous and asynchronous code in javascript

Diana — Thu, 19 Sep 2024 07:48:47 +0000

In JavaScript, synchronous and asynchronous code refer to the way tasks are executed and handled. Before we are diving into Callbacks, Promises, Async Await let's understand the difference between these two concepts.

Synchronous code:

Basically it's a code that executed line by line. Each line waits to the previous one to complete. This means that the code is executed in the order that is written.

Example of Synchronous Code:

console.log('Start'); // This will run first
console.log('Hello World'); // This will run second
console.log('Finish'); // This will run third

However, if a task takes time, such as a long loop or a blocking operation (like file I/O or database access), it can cause delays in the entire application.

console.log('Start');
for (let i = 0; i < 1000000000; i++) {
  // Simulating a long-running task
}
console.log('End');

The loop takes several seconds, the program will be "frozen" until it completes, making it unresponsive to user interactions or other events.

Asynchronous Code:

Asynchronous code allows JavaScript to start a task but not wait for it to complete before moving on to the next one. JavaScript can continue executing other tasks and come back to the asynchronous task once it's done.

Non-blocking - JavaScript has a single-threaded execution model, meaning it can only execute one task at a time. However, the event loop enables it to handle asynchronous tasks without blocking the main thread. It does this by delegating time-consuming operations (like network requests, file I/O, timers, etc.) to external APIs (e.g., Web APIs in the browser) or the environment (Node.js APIs). Once these tasks are completed, the event loop adds the results (callbacks or promises) back to the task queue or microtask queue for execution when the main call stack is clear.

Callbacks, Promises, and Async/Await are tools or mechanisms that enable us to work with asynchronous tasks more easily within this event loop model. They don't make JavaScript non-blocking on their own but help you manage the non-blocking behavior effectively.

console.log('Task 1'); // This will run first

setTimeout(() => {
  console.log('Task 2'); // This will run after 3 second
}, 3000);

console.log('Task 3'); // This will run immediately after Task 1

Asynchronous code makes it possible to handle tasks like:

Fetching data from a server.
Waiting for a user input.
Timers, like setTimeout or setInterval.

How the Event Loop works:

Call stack- Manages the execution of all functions in a single-threaded manner, using a stack to track function calls.
Web APIs- A set of functionality to interact with the browser features. When an asynchronous operation (like setTimeout or fetch) is invoked, it's handed over to the Web API.
Task queue/callback queue- Holds Web API callbacks, once the asynchronous operation completes, the associated callback is placed in the callback queue.
Event loop- Responsible to check if the call stack is empty. If the queue is empty it takes a task from the microtask queue, if the microtask is empty he taking tasks from callback queue.
Microtask queue- When we working with promises we are using the microtask queue. The event loop priorities the microtask queue. This is a special queue dedicated to the next callback:

.then(() => {...})
.catch(() => {...})
.finally(() => {...})
Function body after await
queueMicrotask(): This function explicitly adds a task to the microtask queue.
MutationObserver: This is another example of a mechanism that adds tasks to the microtask queue.

Async example:

console.log('Start');

setTimeout(() => {
  console.log('Async Task Complete');
}, 1000); // Asynchronous operation, handled by Web API

console.log('End');

Execution flow:

console.log('Start') runs first, logging "Start".
setTimeout() Registering to Web APIs, the asynchronous task is scheduled to move into the callback queue after 1 second and will log 'Async Task Complete' when the call stack is empty (note that it may take longer than 1 second if the call stack is not empty).
console.log('End') runs immediately, logging "End".
After 1 second, the event loop pulls the callback from the callback queue and logs "Async Task Complete".

The React Hooks Explained

Diana — Sun, 15 Sep 2024 06:27:41 +0000

React Hooks have simplified the way we write React components. With Hooks, we can manage state, handle side effects, and more, all within functional components. Introduced in React 16.8, Hooks allow us to use state and other React features in functional components, making our code simpler and more intuitive.

useState hook:

The most common hook is the useState hook. To understand useState, let's first try to understand what state is.

State refers to data that will change and needs to be tracked. So, let's see the structure of the useState hook:

n this example, we have two states: name on line 4 and displayName on line 5. name and displayName are the state variables that we are trying to track. setName and setDisplayName are the update functions that will be triggered when we want to update the value of the state variables.

We start with an empty string for each state variable (as we see in the parentheses of each state on lines 4 and 5—the starting value is optional, but note that you will have an empty state if you do not provide a default value).

By convention, the update function name will always have a prefix of set followed by the state variable name.

The state name is tracking what the user is typing in the input on line 17. Every time the value in the input changes, handleInputChange is triggered, and inside this function, we set name with the current value using setName.

Similarly, we have displayName, which is the name that will be displayed when the user clicks the button we created on line 18.

Every time we change the input, the name state is updated (I added a log so we can see it):

Only when we click on the button the displayName will be set to the current value we have in the name state. (what we see in the console is the name state changing)

useEffect hook:

The useEffect hook allows us to perform side effects in our application. In simple terms, side effects are things that happen as a result of some task we performed, like data fetching, updating the DOM, and more.

Let's understand the structure of the useEffect hook:

IMPORTANT: It's guaranteed that the useEffect will run at least once. If no dependency is given in the dependency array, the useEffect will run only one time when the component mounts.

In this example, the effect is a console.log of the state variable count. Every time count changes, the useEffect is triggered because we're listening to count in our dependency array.

Now, let's understand how the cleanup function works. To do this, we need to understand the lifecycle of the useEffect hook. Let's add another console.log for the cleanup function:

Now, when we run our code and change the count, the component is re-rendered then the cleanup function is running and then the code in the useEffect.

useRef hook:

The useRef hook is used to track or store values without triggering a re-render. The value from useRef will not be used in the return body. It takes an initial value and returns an object with a current property. Let’s look at an example of useRef to understand how it works. We’ll also compare it to the useState hook for better understanding.

We have here the example of the counter with the useRef hook:

When we increment the number, we will still see 0. This is because it's not causing a re-render, but in the console, we can see that the value is updated correctly:

So now we know: useRef is a hook that provides a way to persist values across renders without causing a re-render when those values change. This makes it ideal for scenarios where you want to store information that doesn't need to affect the rendering process, such as keeping track of previous values or interacting with DOM elements directly.
Additionally, useRef can be used to access DOM elements, making it useful for controlling focus, text selection, or animations in functional components. Since it persists through renders and doesn't cause re-renders, useRef is efficient for certain tasks where you don't need to update the UI.

useMemo hook:

The useMemo hook is commonly used to optimize performance by memoizing the result of a computation. It acts like a cache between re-renders, ensuring that expensive calculations are only re-executed when one of the dependencies changes. This helps avoid unnecessary recalculations on every re-render, making your component more efficient.

doubleNumber Function:

This function simulates an expensive operation with a loop (for(let i = 0; i<= 10000000000; i++) {}) and doubles the input number. It's a heavy computation meant to illustrate performance optimization.
Every time the component re-renders, running this function would normally cause a performance delay.

useMemo(() => doubleNumber(count), [count]): The useMemo hook memoizes (caches) the result of doubleNumber(count).

It only re-executes doubleNumber when the count state changes. This means if the component re-renders due to changes in the color state, the expensive doubleNumber function won't run again unless count has changed.

We can see that when we press on Increment the operation takes time, but the change color is immediate:

useCallback hook:

This hook is very similar to the useMemo hook. The difference between them is that useMemo takes a function and returns the result of that function, while useCallback takes a function and returns the function itself.

In the next example, we can see that when the component re-renders, the getNumbers function is recreated, even if only the color has changed. Therefore, each time the component updates, it generates a new function, even though the actual number did not change:

We can fix it with useCallback:

useContext hook:

The useContext hook in React is used to access values from a context without needing to pass props down through multiple layers of the component tree. It simplifies prop drilling by allowing components to subscribe to context values directly.

What is a Context?
Context is a way to share data (like a global variable) between components without having to pass it explicitly via props at every level. This is useful for things like themes, user authentication, or settings, where multiple components need access to the same data.

How useContext Works:

Creating a Context:
First, you create a context using React.createContext(). This creates a "context object" which holds the value you want to share.
Providing the Context Value:
Next, you wrap the components that need access to the context with the Context.Provider component. The Provider accepts a value prop, which is the data that will be available to all the components that use this context.
Consuming the Context Value:
Inside a child component, instead of passing props down, you can use the useContext hook to access the value of the context.

In the next example, we create a context in the Example component (line 5). Then, we wrap the User component with so that any children within the User component tree can access the context. Finally, the PersonalInfo and LocationInfo components consume the context and display the data using const user = useContext(UserContext).

Result:

useReducer hook:

The useReducer hook in React is a more advanced alternative to useState. It helps manage complex state logic in components, especially when the state depends on multiple actions or is composed of multiple values.
When you have complex state logic that involves multiple sub-values or state transitions or the next state depends on the previous state, you probably will need the useReducer.
Let's check the example and understand from it how it works:
In line 15 we declaring on the useReducer hook it takes 2 parameters that are mandatory:

reducer: A function that determines how the state should change, based on the action dispatched. We created the function in line 3-12.
{ count : 0 }: The starting state of your component. Usually, we use an object because we have complex variables.
dispatch: A function you call with an action to trigger the reducer function. We have the dispatch in the increment and decrement functions.

In the reducer function, we always check the action type to determine the appropriate action. I used a switch statement, but you can also use if statements (although switch tends to be more readable).
Each time we click one of the buttons, the corresponding button's function is triggered, which calls the reducer function.