7 JavaScript array methods you need to master in 2022

JavaScript provides many different ways to work with arrays. Introduce you to 7 basic and commonly used data methods to improve your JS development skills in minutes.

1. Array.map()

When you use the map() method on an array, it will create a new array over the original array.

The map() method accepts a parameter, which is a function. This function can loop or traverse each element in the array, or modify each element in the array, and then combine to return a new array.

The .map() method comes in handy when you want to modify or update an element of an array and store it as a new array.

Suppose we have an array containing car brands:

const cars = ["Porsche", "Audi", "BMW", "Volkswagen"];

Of course we think all cars are cool and we wanted to add some words to express that. We can use the .map() method:

const coolCars = cars.map((car) => `${car} is a pretty cool car brand!`);

// result:
[
  "Porsche is a pretty cool car brand!",
  "Audi is a pretty cool car brand!",
  "BMW is a pretty cool car brand!",
  "Volkswagen is a pretty cool car brand!",
];

Here, the map() method is used to create a new modified array

Great! That map() method creates a new array and adds the text to each element.

Sometimes the array contains objects (object), what should we do?

Let's look at the following example, adding a price attribute to this car and turning it into an object:

const carsWithPrice = [
  { brand: "Porsche", price: 100000 },
  { brand: "Audi", price: 80000 },
];

const carsWithPriceAndTax = cars.map((carObject) => {
  return {
    // Return the original car object
    ...carObject,
    // but also add a new value containing the price with tax
    priceWithTax: carObject.price * 1.2,
  };
});

// result:
[
  { brand: "Porsche", price: 100000, priceWithTax: 120000 },
  { brand: "Audi", price: 80000, priceWithTax: 96000 },
];

Use the map() method to create a new array containing tax-inclusive prices

In conclusion, the map() method is a very common method for creating a new array, modifying its contents and leaving the original array unchanged.

When to use Array.map()?

When you want to modify the contents of an existing array and store the result as a new array.

2. Array.filter()

You can almost guess what this method is.

The .filter() method allows you to get elements in an array based on certain criteria.

Just like the map() method, it will return a new array leaving the original unchanged.

For example, using the car example, we can filter the array based on the price of the car being above a certain value.

Here we have all the cars available:

const cars = [
  { brand: "Porsche", price: 100000 },
  { brand: "Audi", price: 80000 },
  { brand: "Toyota", price: 30000 },
];

Now, let's say all cars worth 40,000 or more are expensive.

We can use filter() method for all "cheap" and "expensive" cars.

const expensiveCars = cars.filter((car) => car.price >= 40000);
const cheapCars = cars.filter((car) => car.price < 40000);

// result - expensive car
[
  { brand: "Porsche", price: 100000 },
  { brand: "Audi", price: 80000 },
];

// result - cheap car
[{ brand: "Toyota", price: 30000 }];

Use filter method to filter "cheap", "expensive" cars from an array

Checks each element of the array to see if it meets the criteria, and if it passes the test it will be returned in a new array.

When to use Array.filter()?

When you want to remove elements from an array that do not meet a certain condition/condition.

3. Array.reduce()

Now this might be a little hard to understand.

In short, call the .reduce() method on an array, and it will loop through each element in the array by executing a function or method, returning a value at the end.

That reduce() method takes a callback function as its first parameter and an optional initial value as its second parameter. If no initial value is provided, the first value of the array is used. This callback function will provide accumulator and currentValue parameters for performing the reduce calculation.

I know this might be a little complicated, but that's okay.

Here is a simple example to demonstrate the reduce() method:

Suppose we want to get the total value of all numbers in an array.

const numbers = [13, 65, 29, 81, 47];

Then, we can add all these values together using the reduce() method.

const total = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);

// result - total:
235;

Add all values of an array using the reduce method

Another way to use the reduce() function is to flatten the array, there are already many ways to do this, this is one of them.

const flattened = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduce((accumulator, currentValue) => accumulator.concat(currentValue), [])[
  // Result - Flattened:
  (0, 1, 2, 3, 4, 5)
];

Flatten an array using the reduce method

When to use Array.reduce()?

When you want to convert an array to a single value by manipulating the values of the array.

Tags: Front-end Javascript

Posted by tbone05420 on Wed, 09 Nov 2022 18:22:33 +1030

Programs Wiki