JS Polyfills

Polyfill is basically used to provide more functionality to the older browsers like IE. Say there are some functions like map which are available in all modern browsers but not available in IE. For example, we have a code that uses a map, filter, find, reduce, etc but now if we try to run the code in IE it will not work. In this case, we can not change the original application code so to support this case we can write polyfills.
Let’s write polyfills for some ES6 functions.

Map

• It is used to iterate on every element on the array and execute the callback function.
• It always returns the response in an array
• Syntax — array.map(function(value, index, array))
• Example —

let arr = [1,2,3,4,5]
let s = 0
let sum = arr.map((item, index, arr )=> {
s += item
}
console.log(sum) -> [15]

Polyfill

let arr = [1,2,3,4,5]
//Creating the polyfill
Array.prototype.myMap = function(callback){
let returnValue = [] // Since map is higher order function and always returns the array
for(let i=0; i< this.length; i++){
returnValue.push(callback(this[i],i, this)
}
return returnValue
}
// Consuming the polyfill
let s = 0
let sum = arr.myMap((item, index, arr )=> {
s += item
}
console.log(sum) -> [15]

• Here we can not use the arrow function in creating the polyfill because we do not have this context in the arrow function. We should use anonymous functions.

Filter

• It is a higher-order function
• It is used to filter out the data based on a certain condition and returns an array.
• Syntax — array.filter(callback(value, index, array))
• Example —

let arr = [1,2,3,4,5]
let gt = arr.filter((item, index, arr )=> {
return item > 2
}
console.log(gt) -> [3,4,5]

Polyfill

let arr = [1,2,3,4,5]
//Creating the polyfill
Array.prototype.myFilter = function(callback){
let returnValue = [] 
for(let i=0; i< this.length; i++){
if(callback(this[i],i,this){
returnValue.push(this[i])
}
}
return returnValue
}
// Consuming the polyfill
let arr = [1,2,3,4,5]
let gt = arr.myFilter((item, index, arr )=> {
return item > 2
}
console.log(gt) -> [3,4,5]

Find

• It is used to find a certain value in the array.
• It does not return an array. It returns the first occurrence of the element. For example, we have an array as [1,2,4,3] and now we use find to filter values greater than 2 and we use this method it will return only 4, not 3. As told above it return only the first occurrence. Whereas the filter methods would return the array as [4,3]. This is the main difference between the filter and find.
• Syntax — array.find(callback(value, index, array))
• Example —

let arr = [1,2,3,4,5]
let gt = arr.find((item, index, arr )=> {
return item > 2
}
console.log(gt) -> 3

Polyfill

let arr = [1,2,3,4,5]
//Creating the polyfill
Array.prototype.myFind = function(callback){

for(let i=0; i< this.length; i++){
if(callback(this[i],i,this){
return this[i]
}
}
}
// Consuming the polyfill
let arr = [1,2,3,4,5]
let gt = arr.myFind((item, index, arr )=> {
return item > 2
}
console.log(gt) -> 3

Reduce

• It is used when we want an accumulated result of an array.
• This function is different from the above discussed as it returns as a single accumulated value of the array.
• Syntax — array.reduce(callback(accumulatedValue, currentvalue, index, array), initalValue)
• Example —

let arr = [1,2,3,4,5]
let gt = arr.reduce((accItem, currentitem, index, arr )=> {
return accItem+currentitem
}
console.log(gt) -> 15

Polyfill

let arr = [1,2,3,4,5]
//Creating the polyfill
Array.prototype.myReduce = function(callback, initialValue){
let acc = initialValue ?? 0
for(let i=0; i< this.length; i++){
acc = callback(acc, this[i], i, this)
}
return acc
}
// Consuming the polyfill
let gt = arr.myReduce((accItem, currentitem, index, arr )=> {
return accItem+currentitem
}
console.log(gt) -> 15

These are some of the basic polyfills created and explained, Hope you got the basic idea of what is a polyfill and why we need it.