Legendary methods of Array in JavaScript | Part 1 : forEach, find, filter and map

ForEach, Filter, Find, Map, Reduce, Some and Every are all JavaScript array methods that are used to manipulate arrays and perform various operations on them. In this blog, we will take a look at what each of these methods does, how they can be used and why they are useful for web developers.

In this blog I will discuss forEach, find, filter and map.

.forEach 🔁

The forEach method allows you to iterate over an array and perform a specific operation on each element in the array. It is similar to the for loop, but it is more concise and easier to use.

Here’s the syntax for using the forEach method:

array.forEach(function(currentValue, index, arr) {
  // Your code here
});

The forEach method takes a callback function as its argument. This callback function will be called once for each element in the array. The callback function takes three arguments:

• currentValue: the current element being processed in the array
• index: the index of the current element
• arr: the array that forEach was called upon

Here’s an example of using the forEach method to log the name of each product in the products array:

let products = [
  { name: '🍎', inStock: true },
  { name: '🍌', inStock: false },
  { name: '🥕', inStock: true },
  { name: '🍩', inStock: true },
  { name: '🍆', inStock: false }
];

products.forEach(function(product) {
  console.log(product.name);
});

/*
🍎
🍌
🥕
🍩
🍆
*/

In this example, the forEach method is used to iterate over the products array. For each product in the array, the callback function logs the name of the product.

.find 🔎

The find method is used to find the first element in an array that satisfies a given condition. It takes a callback function as an argument and returns the first element that passes the condition specified in the callback function.

For example, if you have a 🧑🏻‍💼 list of customers and you want to find the first customer who spent more than $100, you can use the find method.

let customers = [
  { name: 'John Doe', orderAmount: 50 },
  { name: 'Jane Doe', orderAmount: 75 },
  { name: 'Jim Smith', orderAmount: 120 },
  { name: 'Jill Smith', orderAmount: 95 },
  { name: 'Jack Johnson', orderAmount: 75 }
];

let highOrderCustomer = customers.find(customer => customer.orderAmount > 100);
console.log(highOrderCustomer);

/*
{ name: 'Jim Smith', orderAmount: 120 }
*/

.filter 🔍

The filter method is used to create a new array from an existing array, but with only elements that pass a certain test. This test is defined in a callback function that you provide as an argument.

Let’s say you have a list of 🎥 movies and you want to create a new list that only includes movies that are rated G. You can use the filter method to achieve this:

let movies = [
  { title: '🐭 The Lion King', rating: 'G' },
  { title: '🦖 Jurassic Park', rating: 'PG-13' },
  { title: '🚀 Space Jam', rating: 'PG' },
  { title: '🏰 Beauty and the Beast', rating: 'G' },
  { title: '🦸‍♂️ Shazam!', rating: 'PG-13' }
];

let kidsMovies = movies.filter(movie => movie.rating === 'G');
console.log(kidsMovies);

/*
[
  { title: '🐭 The Lion King', rating: 'G' },
  { title: '🏰 Beauty and the Beast', rating: 'G' }
]
*/

In this example, the filter method iterates through the movies array and checks each movie's rating. If a movie is rated G, it gets included in the kidsMovies array.

.map 🔄

The map method is used to create a new array from an existing array, by transforming each element in the original array into a new value. The transformation is defined in a callback function that you provide as an argument.

Example 1: if you have a list of 🔢 numbers and you want to create a new list that contains the square of each number, you can use the map method.

let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(number => number * number);
console.log(squares);

/*
[1, 4, 9, 16, 25]
*/

Example 2: let’s say you have a list of 🍎 apples and you want to create a new list that shows the weight of each apple in grams. You can use the map method to achieve this:

let apples = [
  { type: 'Granny Smith', weight: 150 },
  { type: 'Red Delicious', weight: 120 },
  { type: 'Golden Delicious', weight: 130 },
  { type: 'Fuji', weight: 140 },
  { type: 'Gala', weight: 110 }
];

let appleWeights = apples.map(apple => apple.weight + 'g');
console.log(appleWeights);

/*
[ '150g', '120g', '130g', '140g', '110g' ]
*/

In this example, the map method iterates through the apples array and transforms each apple's weight into a string with the units g. The result is a new array called appleWeights that contains the weights of each apple in grams.