Let’s understand map, filter and reduce by writing polyfills for them.

#javascript #webdev #programming #beginners

Intro

In this blog we will understand how map , filter and reduce work by writing polyfils for them.

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

map

The map() method creates and returns a new array populated with the results of calling a provided function on every element in the calling array.

Parameters

Return Value

const array = [1, 2, 3, 4];

// pass a function to map
const mapResult = array.map(x => x * 2);

console.log(mapResult);
// output: Array [2, 4, 6, 8]

Let’s understand this by writing a polyfill for map.

Array.prototype.myMap = function (callbackFunction) {
        let newArray = []

        for ( let i = 0; i < this.length; i++ ) {

                newArray.push(callbackFunction(this[i], i, this))

        } 
    return newArray
}

filter

The filter()method creates a new array filled with elements that pass a the callback provided. It creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided callback function.

Parameters

Return Value

const array = [1, 2, 3, 4];

// pass a function to filter
const filterResult = array.map(x => x > 2);

console.log(filterResult);
// output: Array [1,2]

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Let’s understand this by writing a polyfill for filter

Array.prototype.myFilter = function (callbackFunction) {
        let newArray = []

        for ( let i = 0; i < this.length; i++ ) {

              if(callbackFunction(this[i], i, this)) {
                        newArray.push(this[i])
                }

        } 

   return newArray
}

reduce

The reduce() method executes a "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

Lets understand this by adding a array of numbers

const array = [1, 2, 3, 4];

const initialValue = 0;

const reducer = (previousValue, currentValue) => previousValue + currentValue

// 0 + 1 + 2 + 3 + 4
const sum = array.reduce(reducer,initialValue);

console.log(sum);
// expected output: 10

Parameters

Return Value

Let’s understand this by writing a polyfill for reduce

Array.prototype.myReduce = function (reducerCallback, initialValue) {
        let accumulator = initialValue 

        for ( let i = 0; i < this.length; i++ ) {

              accumulator = accumulator ? reducerCallback(accumulator, this[i], i, this) : this[0]

        } 

   return accumulator
}

map vs forEach

Both map and forEach are methods that let us loop through an array and execute a callback function.

The main difference between map and forEach is that map returns an array but forEach does not.

const array = [1,2,3,4,5]

const mapResult = array.map(x => x + 1)

const forEachResult = array.forEach(x => x + 1)

console.log(mapResult) // [2,3,4,5,6]

console.log(forEachResult) // undefined

The forEach callback function still runs but it just does not return anything, it returns undefined.

conclusion

The map() method creates and returns a new array populated with the results of calling a provided function on every element in the calling array.
The filter()method creates a new array filled with elements that pass a the callback provided. It creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided callback function.
The reduce() method executes a "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
Both map and forEach are methods that let us loop through an array and execute a callback function. The main difference between map and forEach is that map returns an array but forEach does not.