DEV Community: Daniel Budziński

JavaScript's asynchronicity - Promises, callbacks and async/await

Daniel Budziński — Wed, 25 Aug 2021 13:09:23 +0000

One of the core concepts of JavaScript is asynchronicity, which means doing many things simultaneously. It's a solution for avoiding your code being blocked by a time-intensive operation (like an HTTP request). In this article, you're going to learn the basic concept of asynchronicity and how to use it in JavaScript.

But before we start...

... we need to cover some computer theory. Programming is the process of telling your computer what it's supposed to do, we communicate with it using code. Every code is just a set of instructions for our machine that we want to execute. Every line of our code is executed by a so-called thread. A thread is executing only one instruction at a time. Let's analyze this pseudo-code:

set x to 10
set y to 5
add x to y save result to r
display r

When we execute this code, a thread is going to firstly set our variables x value to 10, THEN it will set y to 5, AFTER THAT it is going to add these two numbers together and save the result to our variable r and at the end it will display the value of r. The keywords are THEN and AFTER THAT, our thread can't simultaneously set x to 10 and y to 5, it has to wait with setting y until setting x is done. This is type of code is named synchronous code - every instruction is executed one after another. With such simple operations, we're not going to find any issues, but what when we want to execute something that is time-consuming? Like downloading an image? Well, there's the tricky part.

Such an operation is a blocking code because it stops our thread from performing anything else until the image is downloaded. We don't want our users to wait every time such instruction occurs. Imagine downloading a meme and when it's happening your computer can't do anything else - your music player stops, desktop freezes, etc. - using such computers would be a pain. As you probably noticed, such things are not happening, you can listen to music, watch a video on YouTube and code your breakthrough project all at the same time. That's because computer engineers found a solution to this problem.

Wise people once thought, if one thread can execute one operation at a time, couldn't 16 threads execute 16 operations in parallel? Yes, they can - and that's the reason why modern CPUs have many cores and every core has many threads. Programs using many threads are multi-threaded.

The problem with JavaScript is that it's not multi-threaded, JavaScript is single-threaded, so it can't use many threads to do many operations at the same time. We're left with the same problem again - is there any other way to fix this? Yes! It's writing asynchronous code.

Let's assume that you want to fetch posts from your server every time your user scrolls your website. For this, we need to make an API call. API calls are just HTTP requests, which means that our browser making such call needs to establish a connection to our server, then our server processes the request, then sends it back, then our browser needs to process it... it's all time-consuming, and waiting for it to finish will block other interactions on our website, but it would only happen if our code was synchronous. Most time-consuming things like HTTP requests are mostly handled not by our main thread, but by lower-level APIs implemented in our browser. Asynchronous code uses this principle. We don't have to wait for our browser to finish the HTTP request, we can just inform the browser that we need to make an HTTP request, the browser will handle it and report to us with the result - in the meantime, other code can be executed on the main thread.

You probably noticed that asynchronous code is similar to multi-thread code. Well, kind of. Both help us to solve the problem with blocking code, but asynchronous code in JavaScript is pseudo-parallel. For example, if we want to run two compute-intensive calculations in parallel we can't do it until the execution is handled by something else (like a lower-level API of our browser). For real parallelism in JavaScript, we can use WebWorkers, which run specified code in the background. However, WebWorkers are not today's topic, so I won't talk about them - for now. 😉

Ok, that's enough theory. How we can write this asynchronous code in JavaScript? There are two major ways to do it, the older method using callbacks and the newer method using Promises. It's time to look at them in deep.

Callbacks

Earlier I said that when our asynchronous operation is done, we inform our main thread about it. The older way to report back is using a callback. A callback is basically a function that is called when our task is done. It can also carry arguments with data like a result of the asynchronous task. Let's analyze some examples.

We are going to fetch information about Charmander from pokeapi.co using XMLHttpRequest API.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://pokeapi.co/api/v2/pokemon/charmander', true);
xhr.responseType = 'json';
xhr.onload = (e) => {
  if (xhr.status === 200) {
    console.dir(xhr.response);
  } else {
    console.error('Something went wrong...');
  }
};
xhr.send(null);

The first 3 lines are just configuring the XMLHttpRequest object. The thing that interests us the most is xml.onload, because here we specify our callback using an arrow function. When we send our request, the browser is going to handle it and when it's done it's going to call our callback function in which we can further process the received data.

Another common example of using callbacks to handle asynchronous tasks are Event Listeners. Look at the code below.

const button = document.getElementById('myButton');
button.addEventListener('click', (event) => {
  console.info('Button clicked!');
});

We get our button element using its ID, then we attach a listener to its click event. Listener functions are nothing else than just callbacks. Our arrow function is called every time the user clicks this button. This whole process is not blocking code, because we don't have to wait for the click in our main thread. Events are handled by the browser and we only attach a callback that is called when the click is done.

One more example. Timeout and Intervals are also asynchronous.

const timeout = setTimeout(() => {
  console.info('Boo!');
}, 5000);

The Timeout or Interval handler function is also a callback and it's called only after a certain time has been deducted. The whole time measurement code is handled by our browser's components, not by us, so we are only informed when the right amount of time has passed.

Now let's combine some of these examples as a recap.

const button = document.getElementById('myButton');
button.addEventListener('click', (event) => {
  console.info('Button clicked!');
});

const request = setTimeout(() => { // This timeout is going to simulate a very long HTTP request
  console.info('Response received!');
}, 5000);

In this code, we attach a listener to our button and make an HTTP request. If you run this example, you can see that you can click the button despite the fact that the HTTP request is being made. You don't have to wait with the request until the button is clicked, nor do you have to wait with handling the button click until the HTTP request is done - no operation is blocked. That's the power of asynchronicity!

Promises

The modern way to handle asynchronicity in JavaScript is to use Promises. You can think of them like a promise made by people. It's not the result of something, it's just a promise that something will be done in the future (or not). If your roommate promises you to take out the trash this week, she's telling you that she will do it in the future, but not now. You can focus on your things and after some hours your roommate is going to tell you that the trashcan is empty and that she fulfilled her promise. Your roommate can also tell you, that she couldn't fulfill it because there is a raccoon living in your trashcan and it behaves aggressively when you try to take out the litter bag. In this case, she couldn't keep this promise, because she doesn't want to be attacked by an aggressive raccoon.

Remember, not every raccoon is aggressive! Photo by Vincent Dörig on Unsplash

A Promise can be in one of three states:

pending - This is an initial state, the Promise is running and we don't know if it's fulfilled or something went wrong.
fulfilled (or resolved) - Everything is ok. The Promise has completed its task successfully.
rejected - Something went wrong and the operation failed.

So let's create our first promise.

const promise = new Promise((resolve) => {
  setTimeout(resolve, 3000);
});

We are creating a new Promise object by calling the Promise constructor. As you can see in this example the constructor of a Promise object takes an arrow function as an argument. This argument is called an executor or executor function. The executor is going to be called when we are creating our Promise object and it is the connector between your Promise and the result. The executor takes two arguments a resolve function and a reject function - both of them are used to control your Promise. Resolve is used to mark our promise as fulfilled and return result data. Reject is used to notify that something is wrong and the Promise is not going to be fulfilled - it's rejected. Reject like resolve can also carry data, in most cases, it carries information about why the Promise was not fulfilled.

Resolving and rejecting promises can be handled by methods, provided by the Promise object. Take a look at this code.

const promise = new Promise((resolve) => {
  setTimeout(resolve, 3000);
});

promise.then(() => {
  console.info('3 seconds have passed!');
});

Our promise is very simple, our executor is going to create a Timeout and call our resolve function after 3 seconds. We can intercept this information using .then() by providing a callback to it. .then() takes two arguments, the first is a callback called, when the Promise is fulfilled, the second one (not seen in this example) is a callback called when the Promise is rejected. But for handling rejected promises we can use a more convenient method - .catch(). Let's modify our example.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const number = Math.floor(Math.random()*100);

    if (number % 2 === 0) {
      resolve(number);
    }

    reject(new Error('Generated number is not even!'));
  }, 3000);
});

promise.then((result) => {
  console.info('Promise fulfilled!');
  console.info(`${result} is even.`);
}).catch((error) => {
  console.info('Promise rejected!');
  console.error(error);
});

This code after 3 seconds is going to generate a random number and check if it's even or not. If it's even then the Promise is resolved and we return the even number, if not, we reject the Promise with an error message. .catch() as an argument accepts a callback that is called when the Promise is rejected.

We can also reject Promises by throwing an error.

const promise = new Promise((resolve) => {
  throw new Error('Error message');
});

promise.then((result) => {
  console.info('Promise fulfilled!');
}).catch((error) => {
  console.info('Promise rejected!');
  console.error(error);
});

However, this has some limitations. If we throw an error inside an asynchronous function like Timeout's callback in our example, .catch() will not be called and the thrown error will behave as an Uncaught Error.

const promise = new Promise((resolve) => {
  setTimeout(() => {
    const number = Math.floor(Math.random()*100);

    if (number % 2 === 0) {
      resolve(number);
    }

    throw new Error('Generated number is not even!'); // This is an Uncaught Error
  }, 3000);
});

promise.then((result) => {
  console.info('Promise fulfilled!');
  console.info(`${result} is even.`);
}).catch((error) => {
  console.info('Promise rejected!');
  console.error(error);
});

Also, you need to remember that every error thrown after calling resolve() is going to be silenced.

const promise = new Promise((resolve) => {
  resolve();
  throw new Error('Error message'); // This is silenced
});

Beside .then() and .catch() we also have a third method - .finally(). Finally is called when the Promise is done, it doesn't bother if it was resolved or rejected, it runs after .then() and .catch().

const promise = new Promise((resolve, reject) => {
  if (Math.random() < 0.5) {
    resolve('Promise fulfilled');
  }

  reject(new Error('Promise rejected'));
});

promise.then((result) => {
  console.dir(result); // Runs only when the Promise is resolved
}).catch((error) => {
  console.error(error); // Run only when the Promise is rejected
}).finally(() => {
  console.dir('Promise has finished its work'); // Run everytime the Promise is finished
});

Now, let's analyze a real-case example.

const fetchCharmanderData = fetch('https://pokeapi.co/api/v2/pokemon/charmander');

fetchCharmanderData.then((response) => {
  if (response.status === 200) {
    return response.json();
  } else {
    throw new Error(response.statusText);
  }
}).then((data) => {
  console.dir(data);
}).catch((error) => {
  console.error(error);
});

This code will fetch information about Charmander from pokeapi.co but it uses the new, promise-based fetch API. Fetch will make an HTTP request and return a Promise for it. When the data is fetched, we process the response. If we received a HTTP status 200 (OK) we are returning the JSON representation of the response body, if the status code is different (like 404 not found or 500 internal server error) we throw an error with a status message. As you see, we are using .then() twice. The first time is used, as I mentioned, to process the response, the second time we use .then() to process a second Promise. response.json() also returns a Promise (JSON parsing can also take some time so it can also be blocking code, that's why we want to make it asynchronous). Basically, this proves to us that you can have a Promise that resolves another Promise and you can handle them one after another by chaining control methods like then, catch and finally.

async/await

Chaining .then(), .catch() and .finally() can be sometimes painful and lead to the creation of hard-to-read code. ES8 (or EcmaScript 2017) introduced some syntax sugar for easier handling promises - async and await. Let's rewrite our Charmander example using async/await.

(async () => {
  const response = await fetch('https://pokeapi.co/api/v2/pokemon/charmander');

  try {
    if (response.status === 200) {
      const charmanderData = await response.json();
      console.dir(charmanderData);
    } else {
      throw new Error(response.statusText);
    }
  } catch (error) {
    console.error(error);
  }
})();

This code does exactly the same which is done by the previous code - it's only written in a different way. We can't use await outside of asynchronous functions, so we are bypassing it by creating a self-calling async function. Inside this function, we are waiting for the response returned by fetch(). After we receive the response we are going to check its status code, when it's OK we await for the response body to be parsed and after that, we are going to output it. You probably noticed the missing of .catch(). We replaced it with a try-catch block, basically, it is going to do the same thing as .catch(). If anything inside try throws an error the code will stop to execute and the error handling code inside catch will be run instead.

I mentioned async functions and that await can be used only inside them. It is a new type of functions introduced in ES8, and, simplifying, it's a function that utilizes Promise-based behavior, which means that an async function always returns a Promise. It can be then awaited in another async function or treated like a Promise.

async function getCharmanderData() {
  const response = await fetch('https://pokeapi.co/api/v2/pokemon/charmander');
  return response.json();
}

(async () => {
  console.dir(await getCharmanderData());
})();

NOTE. This example was simplified, and no exception handling is now included.

We moved our logic that is responsible for fetching Charmander's data from pokeapi.co to an async function. After this, every time, when we need that data we can simply call this function with await and we can deal with it without writing long promise chains.

I said that an async function can be treated like a Promise, and here is an example of how we can do this.

async function getCharmanderData() {
  const response = await fetch('https://pokeapi.co/api/v2/pokemon/charmander');
  return response.json();
}

getCharmanderData().then((data) => {
  console.dir(data);
});

Await can also be used on normal functions that return a Promise.

function delay(time) {
  return new Promise((resolve) => {
    setTimeout(resolve, time);
  });
}

(async () => {
  console.info('Start!');
  await delay(5000);
  console.info('5 seconds have passed.');
})();

Promise helpers

The Promise object has also some pretty useful methods that can help us with handling many Promises.

Promise.all()

Promise.all() awaits for all passed Promises to be fulfilled and resolves all results to an array.

const charmander = fetch('https://pokeapi.co/api/v2/pokemon/charmander').then((response) => response.json());
const bulbasaur = fetch('https://pokeapi.co/api/v2/pokemon/bulbasaur').then((response) => response.json());
const squirtle = fetch('https://pokeapi.co/api/v2/pokemon/squirtle').then((response) => response.json());

Promise.all([charmander, bulbasaur, squirtle]).then((result) => {
  console.dir(result);
});

Worth mentioning is the fact, that when one of the passed promises is rejected Promise.all() is also rejected.

Promise.allSettled()

It's similar to Promise.all() but it's not rejected when one (or more) of the passed promises is rejected.

const charmander = fetch('https://pokeapi.co/api/v2/pokemon/charmander').then((response) => response.json());
const fail = fetch('https://pokeapi.co/api/v2/pokemon/non-existing').then((response) => response.json()); // This Promise is going to fail
const squirtle = fetch('https://pokeapi.co/api/v2/pokemon/squirtle').then((response) => response.json());

Promise.allSettled([charmander, fail, squirtle]).then((result) => {
  console.dir(result);
});

Promise.any()

Promise.any() is fulfilled when any of the passed Promises is fulfilled. It is also going to return the result of the first resolved Promise. When none of the passed promises is fulfilled Promise.any() is going to be rejected.

const charmander = fetch('https://pokeapi.co/api/v2/pokemon/charmander').then((response) => response.json());
const bulbasaur = fetch('https://pokeapi.co/api/v2/pokemon/bulbasaur').then((response) => response.json());
const squirtle = fetch('https://pokeapi.co/api/v2/pokemon/squirtle').then((response) => response.json());

Promise.any([charmander, bulbasaur, squirtle]).then((result) => {
  console.dir(result);
});

Promise.race()

It is resolved when any of the passed promises is resolved or rejected.

const charmander = fetch('https://pokeapi.co/api/v2/pokemon/charmander').then((response) => response.json());
const bulbasaur = fetch('https://pokeapi.co/api/v2/pokemon/bulbasaur').then((response) => response.json());
const squirtle = fetch('https://pokeapi.co/api/v2/pokemon/squirtle').then((response) => response.json());

Promise.race([bulbasaur, charmander, squirtle]).then((result) => {
  console.dir(result);
});

Now you should have a better understanding of JavaScript's asynchronicity. As homework try to play with pokeapi.co and the Fetch API. Create custom Promises that are going to fetch Pokemons after a certain delay or Fetch data based on something you received in an earlier Promise. You can also use async/await and Promise helpers in your code to experiment even more with this topic. See you (or read you?) and happy coding!

P.S. If you like my work remember to checkout my blog and consider signing up for my newsletter (only good content, no SPAM, I Promise 😃)

JavaScript array methods 2/3 - iterating arrays

Daniel Budziński — Tue, 17 Aug 2021 12:19:59 +0000

As we know, arrays are collections of elements. JavaScript arrays have something named iteration methods - these methods operate on every element of the collection and can help us with creating new arrays based on individual entries of our original array or just simply do something with every single element. In this part of our JavaScript array methods series, we are going to cover them in deep.

Looping through an array

Looping (or iterating) through an array in most languages is commonly done using a for-loop. JavaScript is not different.

const images = [
  'https://image-cdn.com/my-image-1.jpeg',
  'https://image-cdn.com/my-image-2.jpeg',
  'https://image-cdn.com/my-image-3.jpeg',
];

for (let i = 0; i < images.length; ++i) {
  console.dir(images[i]);
}

This code is going to output every single URL in the images array. As you see, our iteration is working, nothing special. It may look familiar to you if you worked with languages other than JavaScript.

However, it's not the only way to loop through our array. The Array prototype has implemented a forEach method, which calls a callback on every element of an array.

const images = [
  'https://image-cdn.com/my-image-1.jpeg',
  'https://image-cdn.com/my-image-2.jpeg',
  'https://image-cdn.com/my-image-3.jpeg',
];

images.forEach((image) => console.dir(image));

NOTE. You can access the index of the current element by passing a second argument to the function inside forEach.

The result is the same - we've printed every element of this array. Although there is a difference between a classic for loop and a forEach - performance. forEach may be more convenient, but it's slower, so when you're dealing with big arrays you shouldn't use it.

In these benchmark results, you can see that there is a third method of iteration, which is a bit faster than forEach and more friendly than a classic for loop - I'm talking about for...of. It was introduced after for and forEach and works...

const images = [
  'https://image-cdn.com/my-image-1.jpeg',
  'https://image-cdn.com/my-image-2.jpeg',
  'https://image-cdn.com/my-image-3.jpeg',
];

for (const image of images) {
  console.dir(image);
}

...the same way - I mean, it produces the same result. Being slightly more performant than forEach it's a better choice in most cases. Furthermore, opposite to forEach, it can be controlled with statements like break, but this article is not about loops, so we're going to stop talking about for...of.

Modify all elements of an array - mapping arrays

Sometimes you'll need to transform every single element of your array and create a new array with these elements. In this case, map is the remedy. It simply runs a callback on every element and then creates a new array from the results.

const names = ['dave', 'emma', 'alan', 'simon', 'stacy'];
const capitalizedNames = names.map((name) => {
  return name[0].toUpperCase() + name.slice(1);
});

console.dir(capitalizedNames); // Output: ["Dave", "Emma", "Alan", "Simon", "Stacy"]

This example is going to capitalize the first letter of every word in the array and return a new array consisting of capitalized words.

NOTE. You can access the index of the current element by passing a second argument to the function inside map.

With using map comes one thing that you need to remember - the resulting array is the same length as the original array and every missing element is just changed to undefined. It can occur in a case like this:

const array = ['1', '6', '17', 'boo!', '32'];

const numbers = array.map((x) => {
  const n = +x; // It's just a short way to cast a string into number
  if (!isNaN(n)) {
    return n;
  }
});

console.dir(numbers); // Output: [1, 6, 17, undefined, 32]

In this example, we are converting an array of numeric strings to an array of numbers. There is only one problem, when conversion fails we get a NaN, and our statements under the condition are never called so this iteration never returns a value, in this case, map is going to return an undefined for that element.

Mapping and flattening?

Now, as we already covered map, let's talk about flatMap, which works like map followed by flat. Let's assume we have a text as an array of sentences and we want to tokenize it.

const text = [
  "I've gotta go. You'll find out in thirty years.",
  "That's a great idea. I'd love to park.",
  "What the hell is a gigawatt? Lorraine, are you up there?",
];

const sentenceToken = text.map((sentence) => sentence.split(" ")).flat();
console.dir(sentenceToken); // Output: [ "I've", "gotta", "go.", "You'll", "find", "out", "in", "thirty", "years.", "That's", … ]

NOTE. It's not a proper way to tokenize strings. It's a very simplified example to show how flatMap works.

We map our text array and create an array of arrays containing single word tokens, then we flatten that array to get a one-dimensional array with all tokens. Simple, right? But do you know that we can do it better using flatMap?

const text = [
  "I've gotta go. You'll find out in thirty years.",
  "That's a great idea. I'd love to park.",
  "What the hell is a gigawatt? Lorraine, are you up there?",
];

const sentenceToken = text.flatMap((sentence) => sentence.split(" "));
console.dir(sentenceToken); // Output: [ "I've", "gotta", "go.", "You'll", "find", "out", "in", "thirty", "years.", "That's", … ]

It produces the same result, is a bit shorter, and is also slightly more performant.

The choice should be obvious.

Reducing arrays

Reducing is a process where an array is reduced to a single value, it is achieved by calling a reducer function on every element. A reducer function can take four arguments:

Accumulator - it contains a value that is passed to every iteration, and after the final iteration, it becomes the value returned by reduce.
Current value - as the name says, it's the value of the current element.
Current index - an array index of the current iteration.
Source array - the array on which reduce is called.

Now some of you may wonder "ok, but where can I use this method?". Let's assume we have an array of numbers and we want to count the sum of its elements. It can be done using a for and adding every element of this array to a variable, but also it can be done using reduce.

Counting sum of array elements

const numbers = [77, 94, 668, 371, 2, 194, 54, 674, 7, 213, 26];
const sum = numbers.reduce((acc, value) => acc + value);
console.dir(sum); // Output: 2380

Reduce can also be used to find the minimal and maximal value in an array.

Finding minimum and maximum in an array

const numbers = [77, 94, 668, 371, 2, 194, 54, 674, 7, 213, 26];
const min = numbers.reduce((acc, value) => acc < value ? acc : value);
console.dir(min); // Output: 2

const numbers = [77, 94, 668, 371, 2, 194, 54, 674, 7, 213, 26];
const max = numbers.reduce((acc, value) => acc > value ? acc : value);
console.dir(max); // Output: 674

But hey! JavaScript has methods like min and max in its Math object, can't we just use them? Of course, we can! Although, surprisingly, using reduce is faster. On a 10 000 elements array the result is as follows:

Let's check it also on a smaller array (with 10 elements).

Grouping objects in an array

Another very useful case for reduce is grouping objects in an array by their properties. Let's take a look at this example:

const animals = [
  { name: "Dog", group: "mammals" },
  { name: "Eagle", group: "birds" },
  { name: "Tiger", group: "mammals" },
  { name: "Dolphin", group: "mammals" },
  { name: "Frog", group: "amphibians" },
  { name: "Parrot", group: "birds" },
];

const groupsSchema = {
  mammals: [],
  birds: [],
  amphibians: [],
};

const groups = animals.reduce((acc, value) => {
  acc[value.group].push(value);
  return acc;
}, groupsSchema);

console.dir(groups);

In this example we got an array of animals, every animal has its name and the group it belongs to. Using reduce we group them into separate arrays based on the value of group. If you haven't noticed - we can pass an initial value for our accumulator by passing a second argument to reduce.

Reducing backward?

reduce is going to iterate from the lowest index to the highest (from start to end). However, sometimes we may need to reduce an array backward - in that case, we can use reduceRight. It works identically to reduce, only the iteration starts from the highest index and goes to the lowest index.

const array = [[1, 2], [3, 4], [5, 6]];
const result1 = array.reduce((acc, value) => acc.concat(value));
const result2 = array.reduceRight((acc, value) => acc.concat(value));
console.dir(result1); // Output: [1, 2, 3, 4, 5, 6]
console.dir(result2); // Output: [5, 6, 3, 4, 1, 2]

Check if every element fulfils your condition

To check if all of the elements of an arrays are meeting our condition we can use every. This method runs a test on every element. If everything will pass, then it returns true - if not it returns false.

const positives = [1, 56, 17, 592, -5, 9];
const isEveryPositive = positives.every((value) => value > 0);
console.dir(isEveryPositive); // Output: false

const positives = [1, 56, 17, 592, 5, 9];
const isEveryPositive = positives.every((value) => value > 0);
console.dir(isEveryPositive); // Output: true

NOTE. The test function also accepts a second argument after value, it's the index of the current element.

Check if any element fulfils your condition

When you want to check if one or more element pass your test, you can use some. It's similar to every, but it expects only some values to pass the test.

const positives = ["Hammer", "Screwdriver", null, "Wrench"];
const isSomeNull = positives.some((value) => value === null);
console.dir(isSomeNull); // Output: true

const positives = ["Hammer", "Screwdriver", "Pliers", "Wrench"];
const isSomeNull = positives.some((value) => value === null);
console.dir(isSomeNull); // Output: false

NOTE. Similar to every you can also access the index of the current element by passing a second argument to the test function.

Filtering arrays

Removing elements that don't fulfill our conditions can be pretty handy. filter creates a new array consisting of elements that pass our test.

const numbers = [456, 1837, 123, 416, 12, 312, 7];
const filtered = numbers.filter((value) => value >= 100);
console.dir(filtered); // Output: [456, 1837, 123, 416, 312]

Removing duplicates from an array

const pets = ["Dog", "Cat", "Hamster", "Dog", "Canary"];
const filtered = pets.filter((value, index, array) => array.indexOf(value) === index);
console.dir(filtered); // Output: ["Dog", "Cat", "Hamster", "Canary"]

NOTE. this method is not performant on big arrays. With bigger arrays consider using the ES6 way to create unique arrays.

const pets = ["Dog", "Cat", "Hamster", "Dog", "Canary"];
const filtered = [...new Set(pets)];
console.dir(filtered); // Output: ["Dog", "Cat", "Hamster", "Canary"]

This will create a Set from our array and then convert it back to a classic array. Sets are collections like array but they have a unique constraint - they don't accept duplicates and every value is unique. Below is a test comparing these methods on a 1000 elements array.

and on a small 20 elements array.

And that's all! We are almost at the end of this short series! The last part is going to cover searching in arrays. For now, take care! If you like my work consider visiting my blog signing up for my newsletter.

JavaScript array methods 1/3 - altering arrays

Daniel Budziński — Sun, 15 Aug 2021 19:06:11 +0000

The Array prototype in modern JavaScript contains many useful methods which every developer should know. However, some of them were introduced in the more recent ECMAScript. So if you don't keep up with the newest standards or you're just a beginner - it is a good time to learn something new. I'm also going to show you some tricks and trivia about these methods.

Before you read

If you're an absolute beginner before reading this article you can check my brief introduction to JavaScript arrays where I discussed this construct in short.

How to add new items to an array?

push()! One of the most common operations that we can do on arrays. It simply adds new elements to the array.

const array = ["🐒", "🐬", "🐅"];
array.push("🐓");
console.dir(array) // Output: ["🐒", "🐬", "🐅", "🐓"]

push() will automatically extend the size of the array and add our new element at the end. We can push() more than one element at once:

const array = ["🐒", "🐬", "🐅"];
array.push("🐓", "🐉", "🐄");
console.dir(array) // Output: ["🐒", "🐬", "🐅", "🐓", "🐉", "🐄"]

It's also worth noting that push() returns the new length of the array.

const array = ["🐒", "🐬", "🐅"];
console.dir(array.push("🐉")); // Output: 4
console.dir(array); // Output: ["🐒", "🐬", "🐅", "🐉"]

Sometimes we may need to manually extend an array and add elements at certain indexes.

const array = [];
array[2] = "🐬";
console.dir(array); // Output: [undefined, undefined, "🐬"]
array[0] = "🐅";
array[1] = "🐉";
console.dir(array); // Output: ["🐅", "🐉", "🐬"]

In this example, we create an empty array. The next line extends its size to n+1 and adds 🐬 as the last value.

Thanks to the console.dir() in the third line you can see that there are some undefined values in this array. As I said in my brief introduction to JavaScript arrays, when you're extending the length of an array, JavaScript creates new elements with undefined values to meet the new size.

This method also works on existing arrays:

const array = ["🐅", "🐬"];
array[4] = "🐄";
console.dir(array); // Output: ["🐅", "🐬", undefined, undefined, "🐄"]

How to concat/merge arrays?

One of the possibilities is to use concat():

const array1 = ["🐒", "🐬", "🐅"];
const array2 = ["🐓", "🐉"];
const result = array1.concat(array2);
console.dir(result); // Output: ["🐒", "🐬", "🐅", "🐓", "🐉"]

It merges two or more arrays and returns the new array. Here's an example on three arrays:

const array1 = ["🐒", "🐬", "🐅"];
const array2 = ["🐓", "🐉"];
const array3 = ["🐎", "🐄"];
const result  = array1.concat(array2, array3);
console.dir(result); // Output: ["🐒", "🐬", "🐅", "🐓", "🐉", "🐎", "🐄"]

But what if I want to merge one array INTO another array without the need to assign a third variable? ES2015 introduced a so-called destructuring assignment which in combination with push() can do it!

const array1 = ["🐒", "🐬", "🐅"];
const array2 = ["🐓", "🐉"];
array1.push(...array2);
console.dir(array1); // Output: ["🐒", "🐬", "🐅", "🐓", "🐉"]

Ta dam! Now we have all of the elements of the second array in our first array.

Using destructuring we can achieve a similar behavior to concat(). We just need to destruct the merged arrays into another array.

const array1 = ["🐒", "🐬", "🐅"];
const array2 = ["🐓", "🐉"];
const array3 = ["🐎", "🐄"];
const result = [...array1, ...array2, ...array3];
console.dir(result);

Removing elements from the array

How to remove the last element from the array?

It's as simple as calling the pop() function on the array.

const array = ["🐅", "🐬", "🐄"];
array.pop();
console.dir(array); // Output: ["🐅", "🐬"]

pop() has also a useful property because it returns the removed element!

const array = ["🐅", "🐬", "🐄"];
const lastElement = array.pop();
console.dir(lastElement); // Output: "🐄"

How to remove the first element from the array?

Here in handy comes shift(). Similar to pop() it also returns the element being removed.

const array = ["🐅", "🐬", "🐄"];
const firstElement = array.shift();
console.dir(firstElement); // Output: "🐅"
console.dir(array); // Output: ["🐬", "🐄"]

How to remove elements from the array on a specific index?

To remove a specific element we can use the delete operator.

const array = ["🐅", "🐬", "🐄"];
delete array[1];
console.dir(array); // Output: ["🐅", undefined, "🐄"]

It removes the element completely - the array now does not have an element with index 1. The interesting part of this is the fact, that we are still left with an array with a length of 3. If you want to leave the element and don't want it to have value just set it to undefined. Example:

const array = ["🐅", "🐬", "🐄"];
delete array[1];
console.dir(array.length); // Output: 3
console.dir(1 in array); // Output: false
console.dir(array); // Output: ["🐅", undefined, "🐄"]

array[1] = '🐬';
array[1] = undefined;
console.dir(array.length); // Output: 3
console.dir(1 in array); // Output: true
console.dir(array); // Output: ["🐅", undefined, "🐄"]

But what when we want to remove the element AND shorten the array? For this case, we can use splice().

const array = ["🐅", "🐬", "🐄"];
array.splice(1, 1);
console.dir(array); // Output: ["🐅", "🐄"]

The first argument of splice() is the startIndex, it sets the place where we want to start "cutting" our array. The second argument determines the length of the "cut". In 0ut case we only want to delete "🐬" so we just start "cutting" on index 1 and we want to remove just one element. Here is another example of removing more elements.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
array.splice(2, 3);
console.dir(array); // Output: ["🐅", "🐬", "🐉"]

Now our "cut" has started on "🐄" and we wanted to remove three elements starting from that place.

With splice, we can also fill the gap of the removed elements by passing more arguments.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
array.splice(2, 2, "🐖", "🦙");
console.dir(array); // Output: ["🐅", "🐬", "🐖", "🦙", "🐓", "🐉"]

or using destructuring, we can fill the gap with another array.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const fillArray = ["🐖", "🦙"];
array.splice(2, 2, ...fillArray);
console.dir(array); // Output: ["🐅", "🐬", "🐖", "🦙", "🐓", "🐉"]

Now let's compare all three methods and see the results!

const array = ["🐅", "🐬", "🐄"];
delete array[1];
console.dir(array.length); // Output: 3
console.dir(1 in array); // Output: false
console.dir(array); // Output: ["🐅", undefined, "🐄"]

array[1] = "🐬";
array[1] = undefined;
console.dir(array.length); // Output: 3
console.dir(1 in array); // Output: true
console.dir(array); // Output: ["🐅", undefined, "🐄"]

array[1] = "🐬";
array.splice(1,1);
console.dir(array.length); // Output: 2
console.dir(1 in array); // Output: true
console.dir(array); // Output: ["🐅", "🐄"]

Reassuming:

delete removes the element but does not affect the array's size.
setting an element to undefined does not remove it completely nor affects the array's size.
splice() removes the element and affects the array's size.

Creating a string from an array - joining all elements into one string

Sometimes we need to create one string from all of the elements of the array, we can do it by using join().

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const result = array.join();
console.dir(result); // Output: "🐅,🐬,🐄,🐒,🐓,🐉"

We can also specify the separator by passing it as the first argument.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const result = array.join(' | ');
console.dir(result); // Output: "🐅 | 🐬 | 🐄 | 🐒 | 🐓 | 🐉"

Creating an array from a string - splitting strings

We can achieve this by calling split() on our string. I know that split() is not a part of the Array prototype, but I thought that I should mention it when I'm talking about its counterpart - join().

const string = "🐅,🐬,🐄,🐒,🐓,🐉";
const result = string.split();
console.dir(result); // Output: ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"]

The default separator for split() is "," but we can change it to whatever we want.

const string = "🐅|🐬|🐄|🐒|🐓|🐉";
const result = string.split("|");
console.dir(result); // Output: ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"]

How to reverse an array?

JavaScript also has a method for this - and (how surprising...) it's named... reverse().

const array = ["🐅", "🐬", "🐄"];
const result = array.reverse();
console.dir(result); // Output: ["🐄", "🐬", "🐅"]

But there is one problem with this method. It's mutating our original array. Well, it is only a problem if you want to preserve the original array.

const array = ["🐅", "🐬", "🐄"];
const result = array.reverse();
console.dir(result); // Output: ["🐄", "🐬", "🐅"]
console.dir(array); // Output: ["🐄", "🐬", "🐅"]

What can we do to solve this issue? Well... just call concat() or slice() without any arguments.

const array = ["🐅", "🐬", "🐄"];
const result = array.concat().reverse();
console.dir(result); // Output: ["🐄", "🐬", "🐅"]
console.dir(array); // Output: ["🐅", "🐬", "🐄"]

NOTE. This works because concat() and slice() are returning a copy of the array - not a reference. By using reverse() after them we're only altering the copy.

Or (a cleaner solution) using our best friend, the hero we all needed but didn't deserve him, destructuring assignment.

const array = ["🐅", "🐬", "🐄"];
const result = [...array].reverse();
console.dir(result); // Output: ["🐄", "🐬", "🐅"]
console.dir(array); // Output: ["🐅", "🐬", "🐄"]

NOTE. Here we are just destructuring our array into another array, which is going to be reversed. So it's basically also calling reverse() on a copy.

We can also implement our own reverse function (this is only for absolute geeks).

Just kidding, we're not going to reinvent the wheel. I mean, you can, but... I'm too busy and we have to cover some more methods. However, these guys have time to do this, and you can check their thread for some funky solutions.

How to add new elements to the beginning of an array?

If JavaScript methods were people, push() and shift() would be a couple with a kid named unshift(). unshift() like push() will add new elements to the array but at the beginning.

const array = ["🐅", "🐬", "🐄"];
array.unshift("🐉", "🐓");
console.dir(array); // Output: ["🐉", "🐓", "🐅", "🐬", "🐄"]

And like push() it also accepts more than one element.

const array1 = ["🐅", "🐬", "🐄"];
const array2 = ["🐎", "🐄"];
array1.unshift(...array1);
console.dir(array1); // Output: ["🐉", "🐓", "🐅", "🐬", "🐄"]

Also, we can use destructuring to merge an array to the beginning of another.

Also similarly to push(), unshift() returns the new length of the array.

const array = ["🐒", "🐬", "🐅"];
console.dir(array.unshift("🐓")); // Output: 4
console.dir(array); // Output: ["🐓", "🐒", "🐬", "🐅"]

How to sort an array in JavaScript?

Sorting in JS is achieved with the sort() method. It utilizes an in-place algorithm so it doesn't copy the array, it alters the original.

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
array.sort();
console.dir(array); // Output: ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"]

If we want to keep the original we can do the same trick that we have done with reverse().

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const result = array.slice().sort();
console.dir(array); // Output: ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"]
console.dir(result); // Output: ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"]

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
const result = [...array].sort();
console.dir(array); // Output: ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"]
console.dir(result); // Output: ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"]

NOTE. Emojis are just unicode characters and every emoji has it's unique code. For example 🐄 is U+1F404 and 🐉 is U+1F409. The algorithm is going to sort by this codes.

By default, this method sorts the elements using an ascending order - from lower to higher. If we want to sort in descending order we can write our own compare function (more on that in a moment) or just reverse() the sorted array (as it's more performant).

const array = ["🐅", "🐬", "🐄", "🐒", "🐓", "🐉"];
array.sort().reverse();
console.dir(array); // Output: ["🐬", "🐓", "🐒", "🐉", "🐅", "🐄"]

The default behavior of the sort() method causes also a very interesting problem, let's try to sort an array consisting of only numbers.

const array = [3, 45, 12, 1, 78, 369];
array.sort();
console.dir(array); // Output: [1, 12, 3, 369, 45, 78]

It provides us with one conclusion.

This is because by default sort is converting the elements to strings and comparing them in UTF-16. So when comparing words like "water" and "fire", "fire" comes first but when converting numbers to strings like 100 and 5 we end up with "100" coming before "5". To solve this we need to provide our own compare function as the first argument.

const array = [3, 45, 12, 1, 78, 369];
array.sort((first, second) => first - second);
console.dir(array); // Output: [1, 3, 12, 45, 78, 369]

Ah, much better.

NOTE. We use first - second rather than first > second because it's more performant.

The problem with sorting number arrays is not our only concern. If you're French, Polish, German, Czech, Spanish or a citizen of another country whose native language has some letters with diacritics and you want to compare some local strings... well your life is not easy then. Here's hows sort() is working with accent letters.

const array = ["turkuć podjadek", "konik polny", "komar", "mucha", "ćma"];
array.sort();
console.dir(array); // Output: ["komar", "konik polny", "mucha", "turkuć podjadek", "ćma"]

This example is using some Polish insect names. The words with an accent are just put at the end. For example "ćma" should be first but it's last. To fix this we need to provide our own compare function again.

const array = ["turkuć podjadek", "konik polny", "komar", "mucha", "ćma"];
array.sort((first, second) => first.localeCompare(second));
console.dir(array); // Output: ["ćma", "komar", "konik polny", "mucha", "turkuć podjadek"]

Now it's working. localeCompare() checks if the reference string comes after or before the string given.

How to get first/last/any n elements from an array?

slice() is the solution you're looking for. It accepts two arguments, the start index and the end index, both are optional, but when we provide neither of them - nothing happens. Here are some useful snippets.

Get the first 3 elements of an array

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(0, 3);
console.dir(result); // Output: ["🐄", "🐅", "🐉"]

Get the last element of an array

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(-1);
console.dir(result); // Output: ["🐬"]

Get the second half of an array

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(array.length / 2);
console.dir(result); // Output: ["🐒", "🐓", "🐬"]

Get the first half of an array

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(0, array.length / 2);
console.dir(result); // Output: ["🐄", "🐅", "🐉"]

Get elements after the fourth element

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(4);
console.dir(result); // Output: ["🐓", "🐬"]

Get a slice of the array

const array = ["🐄", "🐅", "🐉", "🐒", "🐓", "🐬"];
const result = array.slice(2, 4);
console.dir(result); // Output: ["🐉", "🐒"]

As you can see, slice() can do many things.

How to flatten arrays?

Flattening means reducing the dimensions of an array. For example, if we got a two-dimensional array we can reduce it to only one dimension using flat().

const array = [["🐓", "🐄"], ["🐅", "🐒"]];
const result = array.flat();
console.dir(result); // Output: ["🐓", "🐄", "🐅", "🐒"]

Flattening doesn't affect the original array. It's copying its values.

By default flat() is going to flatten only one dimension. If you need to flatten a three (or more) dimensional array to just one dimension you have to provide the depth argument.

const array = [["🐓", "🐄"], ["🐅", ["🐒", "🐒"]]];
const result = array.flat(2);
console.dir(result); // Output: ["🐓", "🐄", "🐅", "🐒", "🐒"]

How to copy elements within an array?

Sometimes you want to copy an element from one position to another. For this, you can use copyWithin(). Like slice() this method has many possible use cases.

Copy first two elements to the last two elements

const array = ["🐉", "🐒", "🐓", "🐬", "🐄", "🐅"];
array.copyWithin(-2);
console.dir(array); // Output: ["🐉", "🐒", "🐓", "🐬", "🐉", "🐒"]

Replacing one value with another

const array = ["🐉", "🐒", "🐓", "🐬", "🐄", "🐅"];
array.copyWithin(2, 0, 1);
console.dir(array); // Output: ["🐉", "🐒", "🐉", "🐬", "🐄", "🐅"]

Here we replaced the 🐓 on index 2, with the piece that goes from index 0 to index 1, which is the 🐉. By changing the second argument to 2 we would also affect the 🐬, basically inserting the 🐉 and 🐒 on the positions where 🐓 and 🐬 were.

const array = ["🐉", "🐒", "🐓", "🐬", "🐄", "🐅"];
array.copyWithin(2, 0, 2);
console.dir(array); // Output: ["🐉", "🐒", "🐉", "🐒", "🐄", "🐅"]

For now - that's all. We've discussed all methods from the Array prototype that are used to alter arrays. This article series is going to be divided into 3 parts, the next part will deal with array iterators and looping through them, and the third would be about searching elements in arrays. If you appreciate my work consider visiting my blog and signing to my newsletter (I don't spam, you will be noticed only about my newest content :D).