Interview JS Part 5 - Map, Reduce, Filter

Subscribe to my newsletter and never miss my upcoming articles

Sorry, this article came to the blog a lot later than expected. We shall cover a small topic in this part regarding most use functions or let's most used and useful thing while writing JS and particularly React.

What is a Map?

Map according to the definition should be mapping some value to something. Similarly here too we have a function mapping to each individual element in the array. Map in JavaScript binds to each value and the value can be considered as the returned value of that function and thus the Map returns the array of function bind values.

If the above seems something not very obvious to you let's go through an example:-

array.map(function(elem, index, array) {
      ...
}, thisArg);

Let's do it by halving each element of the array in JavaScript

const numbers = [4, 8, 12, 14];
const halves = numbers.map(x => x / 2);
// halves = [2, 4, 6, 7]

What is Filter?

Filter in real life means to remove something that does not follow a particular function. Similarly, in JS we have a filter that is used to remove the none required elements in the array.

Filter returns an array of filtered elements according to the given callback function. Similar to Map it's basically putting each element on test for a condition.

array.filter(function(elem, index, array) {
      ...
}, thisArg);

Let's write a code that removes the element below 5:-

const num= [1, 2, 5, 10, 15];

const nums= num.filter(newNum => newNum > 5);
// nums is [10,15]

What is Reduce?

This is something special! Generally, people use it to just find the sum of the array but this provides much more than this.

By meaning, Reduce is used to reduce something to something else. The most famous example is obvious to find the sum of the array.

array.reduce(function(prevVal, elem, index, array) {
      ...
}, initialValue);
const tot = [1, 2, 3, 4].reduce((sum, value) => sum + value, 1);
// 10

So now what else can be done apart from this, apart from multiplying too!!

We have something called compose which uses reduce:-

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const add = n => n + x;
const mult = n => n * y;
const addThenmult = compose(
  mult,
  add
);
addThenmult(2); // 6
// ((2 + x = z) * y)

Chaining Promises ( Got to know from Source)

let itemIDs = [1, 2, 3, 4, 5]; 
itemIDs.reduce((promise, itemID) => {
  return promise.then(_ => api.deleteItem(itemID));
}, Promise.resolve());

The above code resolves to:-

Promise.resolve()
.then(_ => api.deleteItem(1))
.then(_ => api.deleteItem(2))
.then(_ => api.deleteItem(3))
.then(_ => api.deleteItem(4))
.then(_ => api.deleteItem(5));

Making promises in a chain is really a unique way to use reduce.

Stay Tuned for other articles on InterviewJS.

Comments (1)

Roland Peelen's photo

That last example is pretty bad imo. Depending on what you want to achieve. If it needs to be sequential, fair enough. At the same time, error handling / retries are a massive pain. Better would be something like this:

let itemIDs = [1, 2, 3, 4, 5]; 
const deletions = itemIDs.map(api.deleteItem);
Promise.allSetteled(deletions)
.then() //<-- Do stuff with result, getting an array of 'fulfilled' or 'rejected'

Then you don't have the dependency on the finish of the last promise (possibly parallelizable) and you will have full control over the results, redoing if wanted