DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Nico Zerpa (he/him)
Nico Zerpa (he/him)

Posted on • Originally published at nicozerpa.com

When should I use asynchronous code in JavaScript?

If you were learning JavaScript for some time, I'm sure that you've heard about asynchronous code. Promises, callbacks, the async and await keywords, etc. But a question that often gets unanswered is, when should I even use asynchronicity?

The short answer is: only if you have to use a function that is already asynchronous and you need the return value of that function.

For example, imagine that we have to create a function that receives the number of a PokΓ©mon and returns its name, e.g. if you pass the number 25, it returns "Pikachu".

In this function, we'll call the PokΓ©API using the native fetch function.

The thing is, fetch is an asynchronous function. And we need what this function returns because it's the response from the API. It means that the function we create should be asynchronous.

"use strict"; // Enable strict mode

async function getPokemonName(pokemonNumber) {
    let pokeApiResponse = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${pokemonNumber}`
    );
    pokeApiResponse = await pokeApiResponse.json();

    return pokeApiResponse.name;
}

const pokemon25 = await getPokemonName(25);
console.log(`PokΓ©mon #25 is ${pokemon25}`);
// πŸ‘† Prints "PokΓ©mon #25 is pikachu"
Enter fullscreen mode Exit fullscreen mode

In some cases, however, you can choose whether to use synchronous or asynchronous functions to perform the same task. This often happens in Node.js, where you can read and write files using synchronous functions or asynchronous ones. Which ones should I use?

If you're creating the back end of a website using Node.js (or Deno) or you're working on the front end, you should definitely use the async versions.

Synchronous tasks block everything else. It means that, if a task takes a lot of time in Node, other people won't be able to enter the website until that task finished. On the front end, the site will freeze while a synchronous task runs. That's why async works better in those cases.


If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter

Top comments (2)

Collapse
 
miketalbot profile image
Mike Talbot ⭐

I built JS Coroutines to allow you to run heavy functions like JSON parse, compression and any of your own heavy functions in an async fashion. It's really useful in both the browser and Node to unblock the event loop when heavy calculations are happening.

Meeting a new developer

Stop by this week's meme thread!