Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result.

One of the long-running tasks that you would often encounter is making HTTP requests using fetch().

Synchronous programming

To understand what asynchronous programming means better, let's look at an example of synchronous programming.

const pet = 'pug'
const statement = `I want to have a ${pet}!`;
console.log(statement);

// Output
I want to have a pug!

The above code is a synchronous program because the code is executed line by line in order from top to bottom. Another example would be:

function favAnimal(animal) {
  return `My favourite animal is a ${animal}!`;
}

const animal = 'dog';
const sayFavAnimal = favAnimal(animal);
console.log(sayFavAnimal);

// Output
My favourite animal is a dog!

The above is also a synchronous program although it didn't run like the previous example. It's because favAnimal() function needed to wait for the function to finish its work and return a value before the caller can continue.

Asynchronous programming

So far by looking at some of the example codes, you may notice that the keywords to explain synchronous programming are "line by line" or "wait". So asynchronous programming is the opposite of that - no need to run a code line by line and no need to wait.

What if the task of the synchronous function takes a long time? There would be a serious problem because your program won't respond or allow your users to do anything until the task is completed. That's when you should consider implementing the asynchronous program.

Event handlers

One of the examples of asynchronous programming is event handlers. Your function (the event handler) will be called whenever the event happens, which is not a straight way and you need to wait until it happens.

Promise

Next, let's look into another example of asynchronous programming.

A promise is an object returned by an asynchronous function, which represents the current state of the operation. At the time the promise is returned to the caller, the operation often isn't finished, but the promise object provides methods to handle the eventual success or failure of the operation.

To understand how promise works, let's make an HTTP request to the server.

const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

console.log(fetchPromise);  // Promise {<pending>}

fetchPromise
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data[0].name))
  .catch(error => console.error(`Could not get products: ${error}`));

// Output
baked beans

Let's look into the above in detail.

1. We called fetch() to make an HTTP request.
2. As console.log() result shows, Promise object is returned. It has a state whose value is pending, which means the fetch operation is still going on.
3. We passed a handler function into the Promise's then() method. When (and if) the server accepted and was able to handle the request, we return response.json(). We can return the promise returned by json() on the first then(), and call the second then() on that return value.
4. We again call the second then() method. Inside, we can handle the data that has been returned from the server.
5. If you add catch() to the end of a promise chain, then it will be called when any of the asynchronous function calls fail. So you can implement an operation as several consecutive asynchronous function calls, and have a single place to handle all errors.

What if you would like to fetch multiple data? In that case, we can use Promise.all() method. It returns promises when they are all fulfilled. This means if any of the promises in an array is rejected, it results reject.

async and await

The async keyword gives you a simpler way to work with asynchronous promise-based code.

async function fetchData(){
    try {
        const response = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json')

        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status}`);
        }
        const data = await response.json()
        console.log(data[0].name);
    } catch (error) {
    console.error(`Could not get products: ${error}`);
  }
}

fetchData();

// Output 
baked beans

Inside an async function, you can use the await keyword before a call to a function that returns a promise. This makes the code wait at that point until the promise is settled, at which point the fulfilled value of the promise is treated as a return value, or the rejected value is thrown. Here try...catch block is used for error handling instead of catch().

Conclusion

We have taken a look at what asynchronous programming means in JavaScript along with examples. This is a very important concept to understand as a JavaScript developer as it significantly affects your code performance.

Array.forEach() Method

The forEach() method loops through an array and execute a provided function once for each array element.

// Inline callback function
array.forEach(function(currentValue, index, arr) { 
      // Do what you like to do
}, thisValue);

// Arrow function
array.forEach((currentValue, index, arr) => { 
      // Do what you like to do
}, thisValue);

The syntax above covers two main ways of writing the forEach() method.

The callback function is specified in the forEach() method and executes only once for each element. It can accept the specified arguments to be used within the callback function.

Some of the parameters passed would be optional depending on what you like to do.

• currentValue is the current element from the array that is being processed. This is the only parameter that is required.

• index is the index of currentValue. This is optional.

• arr is the array that was passed to the forEach() method.

• thisValue is the value that will be used in the callback function. This is optional.

Let's look into some examples to see how the forEach() method works with real data.

const dogs = ["Pug", "Shiba inu", "Rottweiler", "Golden retriever", "German shepherd"];
const pluralS = "s";

dogs.forEach((currentDog, index) => {
  if(index > 1) {
    console.log(`I have ${index} ${currentDog}${pluralS}.`);
  } else {
    console.log(`I have ${index} ${currentDog}.`);
  }
});

// Output
I have 0 Pug.
I have 1 Shiba inu.
I have 2 Rottweilers.
I have 3 Golden retrievers.
I have 4 German shepherds.

The forEach() method is useful when you want to loop through an array of any type of item. You could achieve the same results with for loop, however the forEach() method provides you with cleaner codes.

The forEach() method is also handy when you want to iterate an array but you don't want to return anything. If you want to return value, consider using the map() method that we are going to look into next.

Array.map() Method

The map() method is one of the most used and popular methods on my list in the article. It executes a provided function once for every element in the array and it returns a new array that is created.

The syntax of the map() methods are as follows:

// Inline callback function
array.map(function(currentValue, index, arr) { 
      // Do what you like to do
}, thisValue);

// Arrow function
array.map((currentValue, index, arr) => { 
      // Do what you like to do
}, thisValue);

The parameters options are the same as the forEach() method - currentValue is required and others are optional. Now, let's look at some of the examples.

// Example 1
const dogsArray = ["Pug", "Shiba inu", "Rottweiler", "Golden retriever", "German shepherd"];

const newDogsArray = dogsArray.map(dog => dog.concat("s"));
console.log(newDogsArray);

// Output
['Pugs', 'Shiba inus', 'Rottweilers', 'Golden retrievers', 'German shepherds']

// Example 2
const dogsDetails = [
    {type: "pug", age: 2, color: "light brown"}, 
    {type: "shiba inu", age: 1.2, color: "brown"},
    {type: "rottweiler", age: 0.5, color: "brown and white"},
    {type: "golden retriever", age: 3, color: "black"},
    {type: "german shepherd", age: 1.3, color: "black"},
];

const newDogsDetails = dogsDetails.map(dog => {
    return `My ${dog.type} is ${dog.age} years old.`;
});
console.log(newDogsDetails);

// Output
['My pug is 2 years old.', 'My shiba inu is 1.2 years old.', 
  'My rottweiler is 0.5 years old.', 'My golden retriever is 3 years old.', 
  'My german shepherd is 1.3 years old.']

The map() method is useful because you can create a new array without affecting the original array. However, don't forget to return the value except when you write an arrow function with one line of statement code.

Array.reduce() Method

The reduce() method executes a reducer function (that you provide) on each element of the array, and it returns a single output value.

// Inline callback function
array.reduce(function(previousValue, currentValue, currentIndex, arr) {
      // Do what you like to do
}, initialValue)

// Arrow function
array.reduce((previousValue, currentValue, currentIndex, arr) => {
      // Do what you like to do
}, initialValue);

Let's look into the parameters in detail.

• previousValue is the result from the previous call to the callback function. For the first round, it will be array[0] unless initialValue is specified.

• currentValue is the current element from the array that is being processed. For the first round, it will be array[1] if there is no initialValue specified and it will be array[0] if the theinitialValue is specified.

• currentIndex is the index of currentValue. On the first call, it is 0 if initialValue was specified, otherwise it is1.

• arr is the array that was passed to the reduce() method.

• initialValue is the starting value to the accumulation and previousValue when the callback is called for the first time.

When you read the explanation and each meaning, it can be confusing. The simplest way to understand the reduce() method is to return the sum of all the elements in an array. Let's look at some examples now.

const numsArray = [1, 2, 3, 4, 5];

const sum = numsArray.reduce((accumulator, number) => {
  console.log("accumulator: " + accumulator); // To see what is happening
  return accumulator + number; 
}, 0);
console.log(sum);

// Output
accumulator: 0 // This is because we set `initialValue` to be `0`
accumulator: 1
accumulator: 3
accumulator: 6
accumulator: 10
15 // sum of all the elements in an array

Now we understand what's happening behind the scenes, let's look into another example.

const numsArray = [1, 2, 4, 551, 39, 38, 20, 5, 10, 2, 1, 1, 1, 20, 20];

const sortedNumsObj = numsArray.reduce((acc, current) => { 
    acc[current] ? acc[current]++ : acc[current] = 1    
  return acc;
}, {});
console.log(sortedNumsObj);

// Output
{1: 4, 2: 2, 4: 1, 5: 1, 10: 1, 20: 3, 38: 1, 39: 1, 551: 1}

The above example demonstrates how to count the same elements in the array. It returns in an object format with the element as keys and the number of elements as values because we set the initial value to be an empty object. It's very useful to sort the data and know how many of each exist but don't forget to return the result, which is the accumulator in this case.

Array.sort() Method

The sort() method is useful to sort out the array of data. The default sort order is ascending but you can control the order once you understand how it works.

// Inline compare function
array.sort(function(a, b) { 
      // Do what you like to do
})

// Arrow function
array.sort((a, b) => {
      // Do what you like to do
} )

Simply pass 2 parameters that you want to compare:

• a is the first element for comparison.
• b is the second element for comparison.

Let's start looking at some examples with numbers array and then move on to see how alphabetical order can be handled.

const numsArray = [3, 5, 1, 4, 2];

const ascending = numsArray.sort();
console.log(ascending);

const descending = numsArray.sort((a, b) => b - a);
console.log(descending);


// Output
[1, 2, 3, 4, 5]
[5, 4, 3, 2, 1]

const dogs = ["Pug", "Shiba inu", "Rottweiler", "Golden retriever", "German shepherd"];

// Alphabetical order
const sortedDogs = dogs.sort();
console.log(sortedDogs);

// Output
['German shepherd', 'Golden retriever', 'Pug', 'Rottweiler', 'Shiba inu']

const dogsDetails = [
    {type: "pug", age: 2, color: "light brown"}, 
    {type: "shiba inu", age: 1.2, color: "brown"},
    {type: "rottweiler", age: 0.5, color: "brown and white"},
    {type: "golden retriever", age: 3, color: "black"},
    {type: "german shepherd", age: 1.3, color: "black"},
];

const sortedDogsDetails = dogsDetails.sort((a, b) => {
    return a.type < b.type ? -1 : 1;
});

// Output
[{type: 'german shepherd', age: 1.3, color: 'black'}
  {type: 'golden retriever', age: 3, color: 'black'}
  {type: 'pug', age: 2, color: 'light brown'}
  {type: 'rottweiler', age: 0.5, color: 'brown and white'}
  {type: 'shiba inu', age: 1.2, color: 'brown'}]

The comparator always returns either -1, 0, or 1. If the two values' comparison evaluates something negative, the first element is placed before the second one in an array. If it evaluates positive, the first element comes after the second one. If it returns 0, then the two elements are equal.

As explained, it is handy to sort your data array but be mindful that the sort() method overwrites the original array.

Array.filter() Method

The filter() method returns a new array that meets the given condition. The syntax is shown as follows:

// Inline callback function
array.filter(function(currentValue, index, arr) { 
      // Do what you like to do
}, thisValue);

// Arrow function
array.filter((currentValue, index, arr) => { 
      // Do what you like to do
}, thisValue);

The filter() method always returns an array, which means if you don't pass any parameters it will return an empty array. Now let's check some examples.

const dogsDetails = [
    {type: "pug", age: 2, color: "light brown"}, 
    {type: "shiba inu", age: 1.2, color: "brown"},
    {type: "rottweiler", age: 0.5, color: "brown and white"},
    {type: "golden retriever", age: 3, color: "black"},
    {type: "german shepherd", age: 1.3, color: "black"},
];

const filteredArray = dogsDetails.filter(dog => dog.age > 1.2);
console.log(filteredArray);

// Outcome
[{type: "pug", age: 2, color: "light brown"}, 
  {type: "golden retriever", age: 3, color: "black"},
  {type: "german shepherd", age: 1.3, color: "black"}];

The filter() comes in convenient if you want to filter your data with the condition. To expand the scenario, let's consider the following cases and the better functions that you may want to use instead of the filter().

every(): Only if you want to know true/false if the condition meets with all of the elements in an arrray

const filteredArray2 = dogsDetails.every(dog => dog.age > 0.5);
console.log(filteredArray2);

// Outcome 
false

some(): Only if you want to know true/false if the condition meets with some of the elements in an array

const filteredArray3 = dogsDetails.some(dog => dog.age > 0.5);
console.log(filteredArray3);

// Outcome 
true

find(): Only if you want to return the first element that meets the condition

const filteredArray4 = dogsDetails.find(dog => dog.color === 'black');
console.log(filteredArray4);

// Outcome 
{type: "golden retriever", age: 3, color: "black"}

Summary

We have looked into some of the most popular and used array methods. It's important that you know what is the best approach to handle your data and consider which one is the most efficient way to handle the array.