Legendary methods of Array in JavaScript | Part 1 : forEach, find, filter and map
Tags: javascript, react, webdev, beginners
Published: 2023-02-14 09:12:36

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.