Polyfills in JS - Interview Questions

Here are five important polyfills in javascript. I will be covering forEach, map, filter, reduce, flat in the easiest way possible.

NOTE : Knowledge of the This keyword is crucial.

Let's get started!

• forEach

The code below is a simple example of forEach.

const numbers = [1, 2, 3, 4, 5]
const ans = numbers.forEach((n) => console.log(n))

polyfill of forEach

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

Array.prototype.myForEach = function (callbackfn) {
    for (let index = 0; index < this.length; index++) {
        callbackfn(this[index], index, this)
    }
}

numbers.myForEach((n) => console.log(n))

• map

Simple example of in-built mapfunction

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.map((n) => n * 2));

Here is polyfill of map

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

Array.prototype.myMap = function myMap(cb) {
    const output = []
    for (let i = 0; i < this.length; i++) {
        let a = cb(this[i])
        output.push(a)
    }
    return output
}

console.log(numbers.myMap((n) => n * 2));

• filter

Here is filterexample

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.filter((n) => n > 3));

Polyfill of filter

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

Array.prototype.myFilter = function (cb) {
    const output = []
    for (let i = 0; i < this.length; i++) {
        if (cb(this[i])) {
            output.push(this[i])
        }
    }
    return output
}

console.log(numbers.myFilter((n) => n > 4));

• reduce

example of reducemethod

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.reduce((acc, curr) => {
    return acc + curr
}, 0)
);

polyfill of reduce

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

Array.prototype.myReduce = function (cb, initialValue) {
    let acc = initialValue;
    for (let i = 0; i < this.length; i++) {
        acc = acc ? cb(acc, this[i]) : this[i]
    }
    return acc
}

console.log(numbers.myReduce((acc, curr) => {
    return acc + curr
}, 1));

• flat

Example of flatmethod, it takes depth as an argument. Depth refers to how deeply nested arrays within the original array should be flattened.

const numbers = [1, [2, [3, 4]]]
console.log(numbers.flat(2));

polyfill of flat

const numbers = [1, [2, [3, 4]]]

Array.prototype.myflat = function (depth) {
    const output = []
    if (!Array.isArray(this)) {
        throw new Error(`${this}.flat is not a function`);
    }

    this.forEach((n) => {
        if (Array.isArray(n) && depth > 0) {
            output.push(...n.myflat(depth - 1))
        } else {
            output.push(n)
        }
    });
    return output
}

console.log(numbers.myflat(2));