DEV Community

I'm Luis! \^-^/
I'm Luis! \^-^/

Posted on

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

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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" }
Enter fullscreen mode Exit fullscreen mode

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" }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
  }
Enter fullscreen mode Exit fullscreen mode

... to this:

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

... 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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}
  */
Enter fullscreen mode Exit fullscreen mode

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}
  */
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

... 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];
Enter fullscreen mode Exit fullscreen mode

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}
  **/

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
  **/

Enter fullscreen mode Exit fullscreen mode

Hope that was helpful! If I missed something, please put it in the comments. :)

Top comments (2)

Collapse
 
richlira profile image
Rich Lira • Edited

In the section 'Removing items' you wrote 'We use the unshift method to remove the first item:' but it's the 'shift' method that removes the first item of the array.

Good article, gracias por escribirlo
Saludos!

Collapse
 
ifone456 profile image
Gerzon Z.

Hi Luis! ^-/ nice article