DEV Community

loading...
Cover image for Interview JS Part 5 - Map, Reduce, Filter

Interview JS Part 5 - Map, Reduce, Filter

dubesar profile image Sarvesh Dubey ・2 min read

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);
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode
const tot = [1, 2, 3, 4].reduce((sum, value) => sum + value, 1);
// 10
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode
const add = n => n + x;
const mult = n => n * y;
const addThenmult = compose(
  mult,
  add
);
addThenmult(2); // 6
// ((2 + x = z) * y)
Enter fullscreen mode Exit fullscreen mode

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());
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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

Stay Tuned for other articles on InterviewJS.

Discussion (0)

pic
Editor guide