JS Array methods:
.map(), .reduce(), .filter()

I got this point when I feel very confused and stuck against javascript algorithms. Sometimes I know what to do, but completely don't know HOW TO DO IT. Do you feel similar? It's time to deeply repeat javascript methods! There are some of most crucial and challenging ones:

.map()

.map() method iterates over an array and calling a function on every element of the array. It creates a new array from the return of the passed function. You can use it instead of .forEach method.

example 1

We have an array containing some objects - each one represents a person. We need to draw out only the age of our people.

example 2

Now we want to convert all names from our array to upper case:

syntax

array.map(function (currentValue, index, arr) {
// return a selected element
}
, thisValue )

bold - required element
normal - optional element

Description of elements:

array - a name of the original array that is iterated over

currentValue - required value of a current element

index - index of current element being iterated

arr - an array object on which the method was called

thisValue - an optional context of callback function

.reduce()

.reduce() method is a way to find a single value or object from an array. It runs a function through every element of an array and passes the result of the function from one array's element to another. The result of the function being passed among the elements is called the accumulator. In other words, .reduce() method reduces our array to one desired value.

example 1

We have the same array containing objects. We need to pick the oldest person in the array:

example 2

Now we want to calculate a sum of age of all users:

syntax

array.reduce(callback(accumulator, currentValue, index, arr]){
// return an element of new array
}
, initialValue);

bold - required element
normal - optional element

Description of elements:

array - a name of the original array that is iterated over

accumulator - a value passed from the previous run of the function

currentValue - a value of a currently running element

index - index of current element being iterated

arr - an array object on which the method was called

initialValue - a value for the first run of callback function

.filter()

.filter() method filters a selected array and returns a new, filtered array. The method is passed with a function that tests the selected array and returns values that passed the test provided within the function.

example 1

We have an array containing some objects - each one represents a person. We need to filter all adult people:

example 2

Now we want to filter all underage users:

syntax

array.filter(function(element, index, arr){
// return an element of new array
}
, thisValue);

bold - required element
normal - optional element

Description of elements:

array - a name of the original array that is iterated over

element - an element to run a function

index - index of current element being iterated

arr - an array object on which the method was called

thisValue - an optional context of callback function