Array Methods Simplified

We all know that arrays are technically objects when it comes to JavaScript, and, like an object, an array too has methods in its protoype (proto to be precise). ForEach, Map, Filter and Reduce are one of the most useful methods out there, making our code a lot clearer and easier to write.

Array.prototype.forEach()

Let’s take an example to understand forEach() better.

var array = [1, 2, 5, 6, 7];

array.forEach(function cb(currentValue, index, array) {
  console.log(currentValue);
});

Output: 1 2 5 6 7

In simple words, what forEach() is doing, it sits on top of the array, throws each element of the array one by one to the callback function, and our function cb performs the required action i.e., logging the current value. You could also say that forEach converts the data (of an array ofc) into a stream of data, further giving it to the callback function.

A callback function is a function that is passed as an argument to another function, to be “called -back” at a later time. It executes on each element of the array. A callback generally takes:

currentValue

It is the current element of the array being processed at the time. For example, in our array, 1 is the currentValue in the first iteration, 2 in the second iteration and so on.

It is important to note that forEach() doesn’t return anything, meaning it returns undefined. Also, it runs the whole length of the array, unlike a for-loop.

index

It is the index of the current element being processed in the array. In our example, value of index for the first element is 0 (because 1 is at index 0).

array

The same array, forEach() was called upon i.e., [1, 2, 5, 6, 7].

Array.prototype.map()

If you need a new array having same size as that of the original array, map() would be your best choice.

var array = [1, 2, 5, 6, 7];

array.map(function cb(currentValue, index, array) {
  return currentValue * 2;
}

Output: [4, 8, 12, 14, 20]

Here, coming to our previously used analogy, map() is sending a stream of data to cb and it’s multiplying the currentValue by 2, finally returning a new array.

So, map() returns a new array of the same size. Cool!

Array.prototype.filter()

Imagine, if you wanted to select some fruits (say apples) from a huge basket of fruits mixed up together, what would you do ? Pick up a smaller new basket, grab the apples and put them inside it. That’s how we filter items, right ?

var array = [1, 2, 5, 6, 7];

array.filter(function cb(currentValue, index, array) {
  return currentValue % 2 === 0;
});

Output: [2, 6]

Here, as you would’ve comprehended, filter() is filtering out even items from the given array and storing the items inside a new array. This is how it works!

So, our filter() methods operates on an array and returns a new array of same size or less.

Array.prototype.reduce()

Now, here comes the “seems to be tricky ” kind of an array method, but I would rather call it an useful and most powerful among all the methods discussed here. You’ll find out why :)

So, here’s the thing about reduce(), it takes an array as an input, returns a single output value; it could be anything, from an integer to an object, array or something else. Besides, the callback function is taking four arguments now, the newer one is the accumulator.

Accumulator is nothing but a temp variable that accumulates or stores the callback’s return values. Doesn’t make sense right ? Don’t worry, it will.

If no initialValue is provided to the accumulator:

accumulator = first value in the array
currentValue = second value in the array

If initialValue is provided to the accumulator:

accumulator = initialValue
currentValue = first value in the array

It is important to note here that index starts from 0 if an initalValue is provided. Otherwise, index starts from 1.

Consider this example:

var array = [1, 2, 5, 6, 7];

array.reduce(function cb(accumulator, currentValue, index, array) {
  accumulator = accumulator + currentValue;
  return accumulator;

});
Output: 21

This table might help you understand better.