Interview JS Part 5 - Map, Reduce, Filter

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.

dubesar