Understanding Array Methods: filter(), map(), forEach()

#javascript #beginners #webdev #tutorial

Arrays are one of the most popular data types used in javascript as they have variety of methods that makes it easy to use.

In this article, I will be talking about three popular array methods; the filter() method, the map() method and the forEach() method,and I will be showing how they are used.

filter()

The filter() method is mostly used for returning a subset of an array that meets a certain condition.

How its used

array.filter((currentValue, index, arr) => {
    // condition
})

The filter() method accepts a callback function.
The callback takes in three positional arguments.
- The first is the currentValue: which specifies the current element in the array being looped over. The currentvalue argument is required, i.e the value must be passed into the callback function.
- The second is the index: which specifies the index of the current element in the array, this is an optional argument.
- The third is the present array which the filter() method is applied on, this is an optional argument.
The callback takes in a condition to test all the elements in the array and return values based on the condition.

Example

Return even numbers from an array of numbers

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.filter(item=> item % 2 == 0)
// result => [2, 4, 6, 8, 10]

How it works

The filter() method loops over every element in the array.
It checks if the element pass the set condition; if it has a remainder after dividing two in this case.
It passes it to a new array.
When it has checked all the elements, it returns a new array that contains elements that pass the set condition.

Note:

The filter() method does not mutate the array.
The method returns a new array with all the elements that passed the condition set.

map()

The map() method enables us to loop over every element of an array and perform various operations on them.
It returns a new array with the new values of the elements after the operations have been carried out on them.

How its used

array.map((currentValue, index, arr) => {
    // operation
})

The map() method accepts a callback function.
The callback takes in three positional arguments.
- The first is the currentValue: which specifies the current element in the array being looped over. The currentvalue argument is required, i.e the value must be passed into the callback function.
- The second is the index: which specifies the index of the current element in the array, this is an optional argument.
- The third is the present array which the map() method is applied on, this is an optional argument.
The callback function allow us to perform various operations on the elements in the array.

Example

Return all texts in an array in uppercase

let arr = ['Dog', 'Cat', 'HORSE', 'elEPHANT']
arr.map(item=> item.toUpperCase())
// result => ['DOG', 'CAT', 'HORSE', 'ELEPHANT']

How it works

The map() method loops over every element in the array.
It picks each element and performs the stated operation on it; in this case it converts each element to uppercase.
It passes it to a new array.
When it has worked on all elements, it returns a new array that contains all elements in uppercase.

Note:

The map() method does not mutate the array.
The method returns a new array with the results of the operation in the callback function.

forEach()

The forEach() method is mostly used to loop over each of the items in an array. It executes a provided function once for each array element. The forEach() does not have a return value, it returns undefined.

How its used

array.forEach((currentValue, index, arr) => {
    console.log(currentValue)
})

The forEach() method accepts a callback function.
The callback takes in three positional arguments.
- The first is the currentValue: which specifies the current element in the array being looped over. The currentvalue argument is required, i.e the value must be passed into the callback function.
- The second is the index: which specifies the index of the current element in the array, this is an optional argument.
- The third is the present array which the forEach() method is applied on, this is an optional argument.
The callback function allow us to perform various operations on the elements in the array.

Example

As an alternative to the for of loop

let animals = ['Dog', 'Cat', 'HORSE', 'elEPHANT']

// for of
for(let animal of animals){
    console.log(animal)
}

// forEach
animals.forEach((animal)=>{
    console.log(animal)
})