How to write your own polyfills in JavaScript#2

Hey, in today’s article we’re going to talk about forEach, map, reduce, filter!

forEach

According to the docs:

the forEach method executes a provided function once for each array element.

for more information see the docs:

Array.prototype.forEach() - JavaScript | MDN

It iterates over each element of an array.

Sounds familiar, isn’t it?

Of course! That’s what a for loop does!

const array = [1, 2, 3, 4];
for(let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Under the hood, I believe, the forEach does something similar to the example above.

Remember that forEach accepts a callback function that is invoked with every element of a provided array?

Look at the for loop again, how do you think what can we do to invok a callback function and pass it every element of the array?

If you said, wrap it in a function, you’re right!

Let’s dive into the code:

// we moved array out of the forEach function
// now we pass it as an argument
const array = [1, 2, 3, 4];
function forEach(array, callback) {
   for(let i = 0; i < array.length; i++) {
       callback(array[i], i, array);
   }
}
forEach(array, console.log);
// output
// 1
// 2
// 3
// 4

Wow, now our code looks a lot more flexible! We can pass it whatever callback functions we like, and it’ll work!

map

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

for more information see the docs:

Array.prototype.map() - JavaScript | MDN

Sounds almost the same as forEach, isn’t?

Again, you’re right! Let’s take a look at the implementation!

function map(array, callback) {
        
     // step #1. Define a new empty array
     let newArray = [];
     // step #2. Iterate over 'array' and push return value
     // of 'callback' to 'newArray'
     for(let i = 0; i < array.length; i++) {
         newArray.push(callback(array[i], i, array));
     }
     // step #3. Return the 'newArray'
     return newArray;
}
const array = [1, 2, 3, 4];
// es6
console.log(map(array, el => el * 2));
// es5
console.log(map(array, function(el) {
     return el * 2
}));
// Output:
// 2
// 4
// 6
// 8

See? It looks very similar to forEach, the difference is just we create a new empty array and pass it return values of the ‘callback’ function. That’s it!

reduce

Perhaps the easiest-to-understand case for reduce() is to return the sum of all the elements in an array.

for more information see the docs:

Array.prototype.reduce() - JavaScript | MDN

Oh boy, that’s a tricky one!

To understand reduce, we’ll take an array and sum all it’s elements.

// how would you sum all the elements?
// probably iterate over the array and add every value to a store
// like this:
// store = 1
// store = 1 + 2 = 3
// store = 3 + 3 = 6
// store = 6 + 4 = 10
// store = 10
// we did it!
const array = [1, 2, 3, 4];

function reduce(array, callback, initialValue) {
    // step #1. Create our 'store'
    let store = initialValue || 0;
    // step #2. Iterate over 'array' and save return value
    // of 'callback' to 'store'
    for(let i = 0; i < array.length; i++) {
        store = callback(store, array[i]);
    }
    
    // step #3. Return the 'store'
    return store;
}
// es6
// 'prev' means previous element of the array
// 'next' means next element of the array
console.log(reduce(array, (prev, next) => prev + next, 0));
// Output:
// 10

We did it! We found the sum of the array!

I hope it’s now clearer to you how reduce works under the hood.

filter

The filter() method 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 function.

for more information see the docs:

Array.prototype.filter() - JavaScript | MDN

Last but not least, filter!

It works like map, but instead of modified copy of an array it filters out all elements that don’t match the condition.

Let’s dive into code!

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

function filter(array, callback) {
    // step #1. same as in map
    let newArray = [];

    // step #2. same as in map
    for(let i = 0; i < array.length; i++) {
        // difference between map and filter
        // before pushing to 'newArray' we make sure
        // that 'callback' returned 'true'
        if(callback(array[i], i, array)) {
            newArray.push(array[i]);
        }
    }
    
    // step #2. same as in map
    return newArray;
}
// es6
console.log(filter(array, el => el > 2));

// Output:
// [3, 4]

That’s it for today! These methods are very similar and very useful!

I hope you understand them better now! If there’s something you want to tell me, hit me up at the comments section below!

See ya!