DEV Community: Adam Blazek

Promises in JavaScript: Understanding, Handling, and Mastering Async Code

Adam Blazek — Mon, 02 Sep 2024 21:03:42 +0000

Intro

I used to work as Java developer and I remember for the first time when I got in touch with promises in JavaScript. Even though the concept seemed simple, I still couldn’t fully grasp how Promises worked. It changed when I started to use them in projects and understood the cases they solved. Then came the AHA moment and all became more clear. Over time, Promises became a valuable weapon on my toolbelt. It is oddly satisfying when I can use them at work and solve the async handling between functions.

You probably first come across Promises when fetching data from an API, which is also the most common example. Recently, I’ve been interviewed, and guess what was the first question “Can you tell me the difference between Promise and Async Await?”. I welcome that because I see it as a good starting point to know better how the applicant understands how the mechanisms work. However, he or she is mostly using other libraries and frameworks. It let me write down the differences and describe good practices for handling async function errors.

What is the Promise

Let’s start with the initial question: “What is the Promise?” Promise is a placeholder for the value that we don’t know yet but we will get it as a result of asynchronous computation/function. If the promise goes well, then we will get the result. If the promise does not go well, then the promise will return an error.

A basic example of a Promise

Defining a Promise

You define Promise by calling its constructor and passing two callback functions: resolve and reject.

const newPromise = new Promise((resolve, reject) => {
    resolve('Hello');
    // reject('Error');
});

We call resolve function when we want to succesfully resolve the Promise. reject is for rejecting the promise in the case when an error occurs during evaluating our logic.

Retrieving the Promise Result

We use the built-in function then to get the Promise's result. It has two passed callbacks, result and error. The result is called when the Promise is successfully resolved by the function resolve. If the Promise isn’t resolved, the second function error is called. This function is triggered either by reject or by another error that’s thrown.

newPromise.then(result => {
    console.log(result); // Hello
}, error => {
    console.log("There shouldn't be an error");
});

In our example, we will get the result Hello because we successfully resolved the Promise.

Error handling of promises

When the Promise is rejected then is always invoked its second error callback.

const newPromise1 = new Promise((resolve, reject) => {
  reject('An error occurred in Promise1');
});

newPromise1.then(
  (result) => {
    console.log(result); // It is not invoked
  },
  (error) => {
    console.log(error); // 'An error occurred in Promise1'
  }
);

A more recommended approach for its clarity is to use the built-in catch method.

const newPromise2 = new Promise((resolve, reject) => {
  reject('An error occurred in Promise2');
});

newPromise2
  .then((result) => {
    console.log(result); // It is not invoked
  })
  .catch((error) => {
    console.log(error); // 'An error occurred in Promise2'
  });

catch method is chained and has provided its own error callback. It gets invoked when the Promise is rejected.

Both versions work well but the chaining is IMO more readable and it is handy when using other built-in methods that we cover further.

Chaining promises

The result of a promise could likely be another promise. In that case, we can chain an arbitrary number of then functions.

getJSON('categories.json')
    .then(categories => {
        console.log('Fetched categories:', categories);

        return getJSON(categories[0].itemsUrl);
    })
    .then(items => {
        console.log('Fetched items:', items);

        return getJSON(items[0].detailsUrl);
    })
    .then(details => {
        console.log('Fetched details:', details);
    })
    .catch(error => {
        console.error('An error has occurred:', error.message);
    });

In our example, it serves to narrow down the search results to get details data. Each then function can also have its error callback. If we care only about catching any error in the chain of calls, then we can leverage catch function. It will be evaluated if any of the Promises return an error.

Promise all

Sometimes we want to wait for the results of more independent promises and then act on the results. We can use the built-in function Promise.all if we don’t care about the order of how the Promises got resolved.

Promise.all([
    getJSON('categories.json'),
    getJSON('technology_items.json'),
    getJSON('science_items.json')
])
    .then(results => {
        const categories = results[0];
        const techItems = results[1];
        const scienceItems = results[2];

        console.log('Fetched categories:', categories);
        console.log('Fetched technology items:', techItems);
        console.log('Fetched science items:', scienceItems);

        // Fetch details of the first item in each category
        return Promise.all([
            getJSON(techItems[0].detailsUrl),
            getJSON(scienceItems[0].detailsUrl)
        ]);
    })
    .then(detailsResults => {
        const laptopDetails = detailsResults[0];
        const physicsDetails = detailsResults[1];

        console.log('Fetched laptop details:', laptopDetails);
        console.log('Fetched physics details:', physicsDetails);
    })
    .catch(error => {
        console.error('An error has occurred:', error.message);
    });

Promise.all takes an array of Promises and returns an array of results. If one of the Promises is rejected then Promise.all is rejected as well.

Racing promises

Another built-in functionality is Promise.race. It’s used when you have multiple asynchronous functions - Promises - and you want to race them.

Promise.race([
    getJSON('technology_items.json'),
    getJSON('science_items.json')
])
    .then(result => {
        console.log('First resolved data:', result);
    })
    .catch(error => {
        console.error('An error has occurred:', error.message);
    });

Execution of the Promises can take different times and Promise.race evaluates the first resolved or rejected Promise from the array. It is used when we don’t care about the order but we want the result of the fastest asynchronous call.

What is Async Await

As you can see, writing Promises requires a lot of boilerplate code. Luckily, we have the native Async Await feature, which makes using Promises even easier. We mark a function by the word async and by that, we say that somewhere in the code we will be calling asynchronous function and we should not wait for it. Then the async function is called with the await word.

Basic example of Async Await

const fetchData = async () => {
    try {
        // Fetch the categories
        const categories = await getJSON('categories.json');
        console.log('Fetched categories:', categories);

        // Fetch items from the first category (Technology)
        const techItems = await getJSON(categories[0].itemsUrl);
        console.log('Fetched technology items:', techItems);

        // Fetch details of the first item in Technology (Laptops)
        const laptopDetails = await getJSON(techItems[0].detailsUrl);
        console.log('Fetched laptop details:', laptopDetails);
    } catch (error) {
        console.error('An error has occurred:', error.message);
    }
};

fetchData();

Our fetchData is marked as async and it allows us to use await to handle asynchronous calls inside the function. We call more Promises and they will evaluated one after the other.

We use try...catch block if we want handle the errors. Rejected error is then caught in the catch block and we can act on it like logging the error.

What’s different

They are both features of JavaScript handling with asynchronous code. The main difference is in the syntax when Promises use chaining with then and catch but async await syntax is more in synchronous way. It makes it easier to read. Error handling for async await is more straightforward when it leverages try...catch block. This is a question that you can easily get at the interview. During the answer, you can get deeper into the description of both and highlight those differences.

Promise features

Of course, you can use all the features with async await. For example Promise.all.

const fetchAllData = async () => {
    try {
        // Use await with Promise.all to fetch multiple JSON files in parallel
        const [techItems, scienceItems, laptopDetails] = await Promise.all([
            getJSON('technology_items.json'),
            getJSON('science_items.json'),
            getJSON('laptops_details.json')
        ]);

        console.log('Fetched technology items:', techItems);
        console.log('Fetched science items:', scienceItems);
        console.log('Fetched laptop details:', laptopDetails);
    } catch (error) {
        console.error('An error occurred:', error.message);
    }
};

Practical use cases

Promises are a fundamental feature in JavaScript for handling asynchronous code. Here are the main ways it is used:

Fetching Data from APIs

As was already shown in the examples above, this is one of the most used use cases for Promises and you work with it daily.

Handling file operations

Reading and writing files asynchronously can be done using promises, especially by Node.js module fs.promises

import * as fs from 'fs/promises';

const writeFileAsync = async (filePath, content, options = {}) => {
    try {
        await fs.writeFile(filePath, content, options);
        console.log(`File successfully written to ${filePath}`);
    } catch (error) {
        console.error(`Error writing file to ${filePath}:`, error.message);
    }
};

const filePath = 'output.txt';
const fileContent = 'Hello, this is some content to write to the file!';
const fileOptions = { encoding: 'utf8', flag: 'w' }; // Optional file write options

writeFileAsync(filePath, fileContent, fileOptions);

Promise based libraries

Axios is library that you should be familiar with. Axios handles HTTP requests in client and is vastly used.

Express is a web framework for Node.js. It makes it easy to build web apps and APIs, and when you use promises with Express, your code stays clean and easy to manage.

Repository with examples

All the examples can be found at: https://github.com/PrincAm/promise-example

Summary

Promises are a fundamental part of JavaScript, essential for handling asynchronous tasks in web development. Whether fetching data, working with files, or using popular libraries like Axios and Express, you’ll frequently use promises in your code.

In this article, we explored what Promises are, how to define and retrieve their results, and how to handle errors effectively. We also covered key features like chaining, Promise.all, and Promise.race. Finally, we introduced async await syntax, which offers a more straightforward way to work with promises.

Understanding these concepts is crucial for any JavaScript developer, as they are tools you’ll rely on daily.

If you haven’t tried it yet, I recommend writing a simple code snippet to fetch data from an API. You can start with a fun API to experiment with. Plus, all the examples and code snippets are available in this repository for you to explore.

Demystifying JSON Web Token (JWT): A Practical Overview

Adam Blazek — Thu, 23 Nov 2023 09:09:42 +0000

Introduction

After reading this article, you will learn what JWT stands for, what are its parts, and what is its use in communication between client and server. You will find the mechanism of JWT simple and useful!

What is JWT

JWT stands for Jason Web Token and the main purpose is to enable secure data transmission between the parts. They are usually the client and the server. JWT can be passed in the header of HTTP request, as a body parameter of POST request, or parameter in URL request but it is less common and secure. The practice is to pass the JWT in the Authorization header. It is the most secure way because it is prevented from being logged which reduces the risk of exposure. Here is a simple example:

fetch('https://example.com/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${YOUR_JWT_TOKEN}`
  },
  body: JSON.stringify(data)
})

You can see that JWT is sent as Bearer token. Bearer token is type of token primarily used for authorization and it is usually associated with OAuth 2.0.

Purpose of JWT

JWT token can hold information that is encrypted and is available right away. It means it will avoid extra calling the database. Usually JWT has information about the user but it is also used for authorization. After login, calls of APIs must have access token which is the JWT. Then the user is allowed to make such a call.

Now, let's cover parts of the token. JWT consists of header, payload, signature.

Header

Header keeps information about what type of token it is and how the JWT is encoded. It can be for example:

{
  "alg": "HS253"
  "type": "JWT"
}

It is the first part of the JWT. Here is base64url encoded:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

The client is not doing a lot with the header. It sends the JWT with the header to server and server then takes the alg information from header to verify signature.

Payload

Payload part holds the data about the entity, usually the user, and other metadata. Data is so cold claims. This is an example of a simple payload:

{
  "sub": "1234567890", // subject, usually the ID
  "name": "Adam",
  "admin": true, // custom claim
  "iat": 1516239022 // issued at, timestamp when the token was created
}

Payload is not encrypted, sometime is it not even encoded therefore it should not contain any sensitive information.

Signature

Signiture is the last part of the token. It is used to verify that the sender of the token is who says it is and that token wasn’t changed along the way. Steps to create a signature are: Firstly, you have take the encoded header, the encoded payload, a secret, algorithm specified in the header and sign it. Pseudocode to create a signature can look like this

// pseudo code
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

The purpose of the signature is to secure the token agains uncotrolled changes and to verify the sender of the JWT is who it says it is.

Practical example

And now we can go step by step through to real scenario how is JWT treated during the HTTP call and authorization.

User Login
First step is the user login. He fills the credentials on the login page and sends them to the server.
Verification
The server validates the credentials against the database and if the login is successful then the JWT is created.
JWT Creation
As we described in the previous chapter, JWT contains payload with user information and claims. The server uses secret to sign the JWT that ensures that the JWT hasn’t been transformed on the way from the client.
Token Transmission
Then the server sends the token to client usually as response to the HTTP request.
Client Stores the Token
Client might to store the JWT in the browser’s local storage, cookie or session storage.
Subsequent Requests
Then with every subsequent request to the server, JWT is usually included in the header of HTTP request as Authorization: Bearer <token>
Server JWT Validation
When the server receives HTTP request with the token, then it validates the signature to ensure it is legitimite. If the token is valid and not expired then the server returns requested response.
Token Expiration and Refresh
JWT often contains information about expiration time (exp claim). Token can’t be used when is expired. Application may use refresh token mechanism to issue a new JWT without need to login again.

Conclusion

In summary, we've covered the building blocks of JSON Web Tokens (JWT): the header, payload, and signature. We've also highlighted how JWT serves as a handy tool for passing information between the client and server. Importantly, when included in a request's header, JWT acts as a way to authorize and secure the communication between the two. It's like a secret passcode that ensures smooth and safe data exchange in web applications.

JavaScript Event Loop simply explained

Adam Blazek — Wed, 06 Sep 2023 08:08:45 +0000

In order to better understand how the browser works, it is good to know the event loop and the event queue. It will also complete the picture of single-threaded JavaScript and answers your questions like "How is possible that the task is completed asynchronously?". Knowing how the event loop works can help you understand why JavaScript and web browsers might have some speed or performance issues. You can think about the event loop as the main function of the browser which infinitely takes task after task until interaction with the browser ends.

Event Loop

The event loop has at least two queues that hold actions. In practice, it has even more but we will stay with two. Actions are called tasks and can be divided into Microtasks and Macrotasks. Tasks in the queue are executed in order first in, first out.

Macrotasks

Macrotasks are often called just tasks. Their purpose includes

creating the main document object
parsing HTML
executing mainline JavaScript code
changing URL
page loading
timer events
network events
and more...

When the macrotask is finished, then the browser can continue with other assignments like UI re-rendering or garbage collection.

Microtasks

Microtasks are smaller types of tasks that usually update the state of the application and should be done before UI re-rendering. Example includes

promise callback
DOM mutation changes

Microtasks are actions that should be done before the re-rendering, executed before Macrtotasks, and therefore avoid unnecessary UI re-renders. It could then lead to an inconsistent state of the application and we definitely don't want it.

Lifecycle

We should know two main principles:

Tasks are handled one at a time
A task has to be completed and can't be interrupted by another task

Let's take a look at the following diagram and go through one iteration of the event loop to better understand how these principles are applied.

At the start, the event loop first checks if there is a macrotask in the macrotask queue waiting for execution. If there is, it executes just that one macrotask. Once that one macrotask is fully completed or the queue is empty, then the event loop moves to process the microtask queue. It checks to see if there are any microtasks waiting for execution. It executes all microtasks one by one to full completion. Notice the difference between the macrotask and microtask queues. Only one task from the macrotask queue is processed but all the tasks from microtask queue have to be completed before the event loop moves to the rendering of UI. After the microtask queue is empty, the event loop continues to the rendering phase. It checks if UI needs to be rerendered. If the rerendering is resolved, then the event loop is finished and goes back to the start and checks if the macrotask queue is not empty.

Downside

Downside of this model is that if the task takes too long, user is not able to interact with UI, like click or scroll. Browser tends to render 60 frames per second, it is one rerendering each 16ms. So if the task takes more than 16ms then you can see that browser froze until the task didn't run to completion.

It is good practice to divide such a task into smaller pieces and execute them using setTimeout or webworkers.

Other resources

The video What the heck is the event loop anyway? by Philip Roberts is legendary and one of the best explanations of how the event loop works. The model they show is simpler than our example, but I'd still suggest watching it. It's a good starter guide and it's entertaining!

https://www.youtube.com/watch?v=8aGhZQkoFbQ

Summary

The event loop typically has one or more queues. Usually, there's at least one for macrotasks and another one for microtasks. In one go-around of the loop, only one macrotask is run to completion but all the microtasks are completed before the next rerendering. The browser runs rerendering every 16ms for a smooth UI experience, so task execution shouldn't take more time.

JavaScript Closures simply explained

Adam Blazek — Mon, 10 Jul 2023 20:08:58 +0000

Closures are one of the main pillars of JavaScript. It is also a popular interview question. So, it's really useful to understand what closures are and what we can do with them.

Understanding Closures

Simply said, closures allow accessing variables outside the function. Closure is a combination of a function bundled together with references to its surrounding state. It means that the function can access and manipulate variables located in the outer function's scope even after the outer function has finished. Then if the function is called at a time when the external scope with the variable already doesn't exist, the function still keeps access to the variable. It creates a bubble around our function, it keeps all variables in a scope when the function was created. Let's take a look at the following code snippet. It is a classic example.

const outerFunction = (outerVariable) => {
  const innerFunction = (innerVariable) => {
    console.log('outerVariable:', outerVariable);
    console.log('innerVariable:', innerVariable);
  }
  return innerFunction;
}

const newFunction = outerFunction('outside');
newFunction('inside');
// logs outerVariable: outside
// logs innerVariable: inside

innerFunction is a closure that is created when we call outerFunction and it keeps access to the outerFunction scope after the outerFunction was executed.

Closure is like a protective bubble. Closure for the innerFunction keeps the variables in the function's scope alive as long as the function exists.

Practical examples

Closures are used a lot in JavaScript, even when we don't always notice it. For example in data privacy, factory functions, stateful functions, and can often be found in JavaScript libraries and frameworks.
Now, we will go through two practical examples where we will explain how the Closures work.

Private variables

JavaScript doesn't support private variables but we can achieve a similar behavior by using a Closure. When we don't want to allow direct access to a variable, we can create accessors - the getters and setters - to enable them outside of the function. Let's describe it better in the following example:

const post = () => {
  let likes = 0; // private variable

  return {
    getLikes: () => {
      return likes;
    },
    like: () => {
      return likes++;
    };
  }
}

var post1 = post();
post1.like();

console.log(post1.likes); // undefined
console.log(post1.getLikes()); // 1

var post2 = post();

console.log(post2.getLikes()); // 0

First, we declare the private variable likes inside the function's constructor. likes is in the function's scope and isn't accessible from outside. Then we create the accessor method for likes count. Defining the getter we give read-only access to the value. The second method is for incremental increasing the number of likes. No one can change the value more than we allow. In the end, if you check the console, you'll see that we can't get likes directly. But, we can find out the value by using getLikes(), or add more likes by calling like().

Callback as a Closure

It is another practical example of when we do asynchronous fetching of data and then updating the UI or logging. Check out this example.

const fetchData = (url, callback) => {
  // It is simulating an asynchronous operation
  setTimeout(() => {
    const data = { name: 'Adam', age: 20 };
    callback(data);
  }, 2000);
}

const processUserData = (user) => {
  console.log('Name:', user.name);
  console.log('Age:', user.age);
}

fetchData('https://example.com/api/user', processUserData);

fetchData function takes two parameters. The first one is an url from which we fetch data. The second one is the callback that will be called after the asynchronous call is done. processUserData function is our callback function and also it is the Closure! When the fetchData is executed then setTimeout is called and the callback has access to the outer user data. And the access remains even after the execution of the fetchData is finished.
This is a common way how callback can access data returned by async fetch and then do various things, for example, update the UI.

Disadvantage

As you can see, the biggest downside is that Closure comes with an extra bag of other variables. This can use up more memory than needed if we're not careful.

Summary

We talked about a Closure as a function having access to variables that were in the outer scope at the time when the closure was defined. Closures have many practical applications. We describe how are used as accessors to private variables - the getters and setters - or together with a callback function for updating the user interface based on asynchronously fetched data.

JavaScript Object Prototypes simply explained

Adam Blazek — Wed, 24 May 2023 19:31:45 +0000

Did you hear about object prototypes but you weren't sure what they exactly do? They are mentioned here and there but you never got in touch with them? The concept of object prototypes is not difficult and when you will have a better understanding of their purpose, suddenly other principles will get more clear to you as well. For example, how JavaScript Classes work.

Let's start with an explanation of JavaScript objects. What they are and how they behave.

JavaScript Objects

Object is one of JavaScript's data types. Object can have properties holding values as key-value pair. Property value can be a value of any type. It can be for example string, number, or function. When the value is a function, then it is called the object's method.
Object is created by using curly braces {} but can be also created by a call of Object() constructor. The second option is not used much in daily work.
This is example of the initialization of a new simple object.

const vegetable = {
  taste: 'good',
  isHealthy: true,
  calories: 65
}

We create a new object called vegetable with three properties describing the vegetable. And that is. The object is another type of how to describe data.
Object property can also point to another object. We can illustrate it in the example of the vegetable zucchini which was originally bred in Milan, Italy.

const milan = {
  name: 'Milan',
  country: 'Italy'
}

const zucchini = {
  color: 'green',
  taste: 'delicious',
  placeOfOrigin: milan
}

Then, we simply use dot notation to get the name of the zucchini's place of origin, zucchini.placeOfOrigin.name is Milan.

Object Prototypes

Let's move further and investigate if that's all that the object includes!
If you log an empty object into a console, you can see that the object isn't actually empty! There are a lot of extra methods. Those methods toString(), toLocaleString(), valueOf(), and more are defined in the object prototype!

Object prototype is a built-in property that every object has. Prototype itself is an object that has another prototype and optional properties. It adds an additional description to the original object. Now, we will explain it with an example.

We have the vegetable object with a few properties.

const vegetable = {
  taste: 'good',
  isHealthy: true,
  calories: 65
}

Then, we define the vegetable as the prototype of the zucchini using the __proto__ property.

const zucchini = {
  color: 'green',
  taste: 'delicious',
  placeOfOrigin: milan,
  __proto__: vegetable
}

Prototype chain

When we want to know what color zucchini has, it takes a look if the object zucchini has a property called color, it has and returns its value green.
zucchini.color is 'green'

Then, if we want to know how many calories zucchini has, it checks zucchini object, there is no calories property. It continues to take a look into prototype object. And __proto__ refers to vegetable that contains calories. It then returns the value 65.
zucchini.calories is 65

Also, if we want to know the taste of the zucchini, it goes to zucchini object, finds the property taste, and returns the value delicious. It doesn't continue with searching for the taste in prototype although there is also a defined taste property. This is called shadowing the property.
zucchini.taste is 'delicious'

Lastly, if we want to know the value of the property isVegan, then it checks zucchini object. There is no property called isVegan. It continues to the prototype object. It is the object vegetable but there also isn't any property isVegan. Therefore, the value is undefined.
zucchini.isVegan is undefined

And that's it! Prototype is used for many powerful features in JavaScript. We can combine objects and reuse the code. Prototype is leveraged for inheritance in JavaScript and is hidden under the roof of JavaScript Classes.

Recapitulation

We learned what are the objects in JavaScript and that they can have properties with values. Property value can point to another object. Further, we found out that an empty object is not quite empty but has built-in methods in the prototype object. We can add properties to the prototype, it is called prototype chaining and it extends the original object. This principle is used for inheritance in JavaScript.