It's Luis' blog

How-To's For Pretty Much ANYTHING You Wanna Do To An Array in JavaScript

March 03, 2020

We all manipulate arrays, all the time. They’re like a small database in your code, and you can do anything you want with it. It’s very easy to forget or not to know how to perform a particular operation. In those cases, we typically google how to do it.

So based on my experience, I thought why not compiling a list of things you usually want do to to an array?

Adding items

Adding a value at the end of the array

To add a value at the end of the array, we use the push method.

const animals = ["cat", "dog", "snake"];
animals.push("fly");
console.log(animals); // (4) ["cat", "dog", "snake", "fly"]

This method mutates the original array, so you DON’T have to reassign (const variable = variable.push("something")).

Adding a value at the start of the array

To add a value at the start of the array, we use the unshift method. This sounds similar to the shift method, but that one removes the first element.

const animals = ["cat", "dog", "snake"];
animals.unshift("fly");
console.log(animals); // (4) ["fly", "cat", "dog", "snake"]

Adding a value at the nth position of the array

To add a value at the end position of the array, we use the splice method.

const animals = ["cat", "dog", "snake"];
animals.splice(1, 0, "fly"); // 1 is the index, 0 is how much to delete and "fly" is how much to insert.
console.log(animals); // (4) ["cat", "fly", "dog", "snake"]

splice can be confusing as it can add, replace and delete items. It depends on the order of the arguments. You will see more examples of splice in this list.

Concatenating / Merging arrays

We use the method concat to concatenate arrays.

const animals = ["cat", "dog", "snake"];
const moreAnimals = ["fly"];
const allAnimals = animals.concat(moreAnimals);

console.log(allAnimals); // (4) ["cat", "dog", "snake", "fly"]

This method DOES NOT mutate the array, so you have to create a new variable. This won’t work:

const animals = ["cat", "dog", "snake"];
const moreAnimals = ["fly"];
animals.concat(moreAnimals); 

console.log(animals); // // ["cat", "dog", "snake"];

You can also concatenate multiple arrays by passing more arguments:

const animals = ["cat", "dog", "snake"];
const moreAnimals = ["fly"];
const evenMoreAnimals = ["donkey"];

const allAnimals = animals.concat(moreAnimals, evenMoreAnimals);
console.log(allAnimals); // (4) ["cat", "dog", "snake", "fly", "donkey"]

Removing items

Removing the first item

We use the unshift method to remove the first item:

const liquids = ["soda", "water", "apple juice"];
liquids.unshift();

console.log(liquids); // ["water", "apple juice"];

This function will mutate the array. So your original variable will change!

As the name suggest, this is the opposite of shift, which we saw above.

Removing the last item

We use the method pop to remove the last item:

const liquids = ["soda", "water", "apple juice"];
liquids.pop();

console.log(liquids); // ["soda", "water"];

This function MUTATES the array. Be careful!

Removing the nth item

We use the splice function to remove an item at a particular position. Let’s try to remove the water again:

const liquids = ["soda", "water", "apple juice"];
const index = 1; // the position of the water in the array
liquids.splice(index, 1); // the 1 means how many items to delete after this index

console.log(liquids); // ["soda", "apple juice"]

splice will also mutate the original array.

Removing under condition

The function filter can be used to remove under a certain condition. It uses a callback, which has to return true or false for every item to either keep it or filter it out.

This function will also create a copy of the array:

const liquids = ["soda", "water", "apple juice"];
const withoutWater = liquids.filter(liquid => liquid !== "water");

console.log(withoutWater); // ["soda", "apple juice"]

Removing duplicates

For a flat array of numbers / strings you can just create a new set and convert back to an array:

  const numbers = [1, 1, 2, 3, 4, 5];
  const unique = [...new Set(numbers)];

  console.log(unique); // [1, 2, 3, 4, 5]

Updating items

Updating the nth item

To update the index at the index n:

const liquids = ["soda", "water", "apple juice"];
const index = 0;
liquids[index] = "wine";

console.log(liquids); // ["wine", "water", "apple juice"];

Updating all items

To update all items we use the map method, which returns the updated item:

const liquids = ["soda", "water", "apple juice"];
const allWine = liquids.map(liquid => "wine");

console.log(allWine);

Retrieving items

Finding an item

We use indexOf the index in a flat list of strings or numbers:

const liquids = ["soda", "water", "apple juice"];
const index = liquids.indexOf("soda");

console.log(index); // 0

In a more complex array, we use findIndex:

const people = [
  { id: 1, name: "Kate" },
  { id: 2, name: "John" },
  { id: 3, name: "Alex" },
];

const katesIndex = people.findIndex(person => person.name === "Kate");
const kate = people[katesIndex];

console.log(katesIndex, kate); // 0 { id: 1, name: "Kate" }

To find the actual object only, without the index, we use find: 

const people = [
  { id: 1, name: "Kate" },
  { id: 2, name: "John" },
  { id: 3, name: "Alex" },
];

const kate = people.find(person => person.name === "Kate");

console.log(kate); // { id: 1, name: "Kate" }

Checks

A particular item exists

We use includes to determine if an item exists. This is similar to indexOf, but it will give us a boolean instead of the index.

const students = ["Kate", "John", "Alex"];
const isAlexHere = students.includes("Alex");

console.log(isAlexHere); // true

Pro-Tip: You can also use this to reduce conditions like this:

  const userInput = "Alex"; // let's pretend
  if (userInput === "Alex" || userInput === "John") {
    console.log('it is alex or john');
  }

… to this:

  const userInput = "Alex"; // let's pretend
  if (["Alex", "John"].includes(userInput)) {
    console.log('it is alex or john');
  }

… especially when there are more people to check.

All items pass a condition

We use every to determine if all items pass a condition. It receives a callback, which will take every item and you have to return true or false based on the condition.

const people = [
  { id: 1, name: "Kate", age: 23 },
  { id: 2, name: "John", age: 25 },
  { id: 3, name: "Alex", age: 27 },
];

const isEveryoneAbove20 = people.every(person => person.age > 20);

console.log(isEveryoneAbove20); // true

Some items pass a condition

We use some to determine if at least 1 item passes a condition. It receives a callback, which will take every item and you have to return true or false based on the condition.

const people = [
  { id: 1, name: "Kate", age: 23 },
  { id: 2, name: "John", age: 25 },
  { id: 3, name: "Alex", age: 27 },
];

const isSomeoneAtLeast30 = people.some(person => person.age > 30);

console.log(isSomeoneAtLeast30); // false

Misc

Reverse

We use reverse to revert the order of an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 9];
numbers.reverse();

console.log(numbers); // [9, 7, 6, 5, 4, 3, 2, 1]

Sorting an array of numbers

We use the sort method to sort things. In a list of numbers, no arguments are required.

  const numbers = [3, 4, 7, 1, 2, 9, 5, 6];
  numbers.sort(); // [1, 2, 3, 4, 5, 6, 7, 9];

If you need to sort descending, you can just reverse the array:

  const numbers = [3, 4, 7, 1, 2, 9, 5, 6];
  numbers.sort();
  numbers.reverse(); // [9, 7, 6, 5, 4, 3, 2, 1]

Sorting an array of strings

To sort an array of people, we use sort with a callback function to compare two items.

My personal favorite is to use localeCompare.

  const names = ["Luis", "Peter", "Miguel", "Jaime"];
  names.sort((a, b) => a.localeCompare(b));

  console.log(names); // ["Jaime", "Luis", "Miguel", "Peter"]

Sorting numbers in an array of objects

We will again use sort but substract the numbers within our callback function:

  const people = [
    { name: "John", age: 20 },
    { name: "Luis", age: 15 },
    { name: "Kate", age: 30 },
    { name: "Johanna", age: 26 },
    { name: "Alex", age: 27 },
  ];

  people.sort((a, b) => a.age - b.age);
  /*
    0: {name: "Luis", age: 15}
    1: {name: "John", age: 20}
    2: {name: "Johanna", age: 26}
    3: {name: "Alex", age: 27}
    4: {name: "Kate", age: 30}
  */

Sorting an array of strings

To sort an array of strings, we go back to localeCompare, but for each item pair in our callback function:

  const people = [
    { name: "John", age: 20 },
    { name: "Luis", age: 15 },
    { name: "Kate", age: 30 },
    { name: "Johanna", age: 26 },
    { name: "Alex", age: 27 },
  ];

  people.sort((a, b) => a.name.localeCompare(b.name));
  /*
    0: {name: "Alex", age: 27}
    1: {name: "Johanna", age: 26}
    2: {name: "John", age: 20}
    3: {name: "Kate", age: 30}
    4: {name: "Luis", age: 15}
  */

Creating a copy

You can copy an array using the slice method:

  const people = [
    { name: "John", age: 20 },
    { name: "Luis", age: 15 },
    { name: "Kate", age: 30 },
    { name: "Johanna", age: 26 },
    { name: "Alex", age: 27 },
  ];

  const peopleCopy = people.slice();

… or the spread operator:

  const people = [
    { name: "John", age: 20 },
    { name: "Luis", age: 15 },
    { name: "Kate", age: 30 },
    { name: "Johanna", age: 26 },
    { name: "Alex", age: 27 },
  ];

  const peopleCopy = [...people];

Copying is going to be important if you want to perform operations that will mutate the array:

  const originalPeople = [
    { name: "Luis", age: 21 },
    { name: "Vicky", age: 20 },
  ];

  const people = [...originalPeople];
  people.push({ name: "Luz", age: 35 });

  console.log(originalPeople, people);

  /**
    0: {name: "Luis", age: 21}
    1: {name: "Vicky", age: 20}
  **/

  /**
    0: {name: "Luis", age: 21}
    1: {name: "Vicky", age: 20}
    2: {name: "Luz", age: 35}
  **/

Accumulating values

We use reduce to loop an array while keeping track of a particular value. It accepts a callback with two arguments: An accumulator, and the current value:

The accumulator will be the value we carry on throughout the process. The current value is the present item beeing looped. The return value is going to be the new accumulator value.

For instance, if you want to sum all the numbers of an array: 

  const numbers = [1, 2, 3, 4, 5];
  const sum = numbers.reduce((total, current) => total + current);

  console.log(sum); // 15

This is how the average of a list is usually calculated:

  const numbers = [2, 3, 2, 3, 2];
  const sum = numbers.reduce((total, current) => total + current);
  const average = sum / numbers.length;

  console.log(average); // 2.4

Looping

Regular loops can be done with forEach:

  const couple = [
    { name: "Luis", age: 21 },
    { name: "Vicky", age: 20 },
  ];
  

  couple.forEach((person, index) => {
    console.log(person, index);
  });

  /**
    {name: "Luis", age: 21} 0
    {name: "Vicky", age: 20} 1
  **/

Hope that was helpful!