What is a polyfill?
Polyfill is a piece of code, that developer expects from a browser to provide natively. If it's not available in the browser, you being a developer, use your logics and implement the solution.
I'll be using Logic's albums as examples throughout my entire post just to show extra love for Hip Hop Music and easiness.
.forEach()
.forEach() function comes quite handy when we just need to iterate an array.
This function is quite useful because we don't need to implement for loop from scratch, hence saving our time and a lot of crap on the developer screen.
But what if we wanna implement our own polyfill for .forEach()?
We have an array of Logic's albums and want to iterate through this array and print out the album one by one.
var logicAlbums = [
'Bobby Tarantino',
'The Incredible True Story',
'Supermarket',
'Under Pressure',
]
First, let's just check how it works natively as provided by JavaScript.
logicAlbums.forEach(function(word) {
console.log(word)
})
Since it's an array, it makes sense to add a prototype to Array.
Array.prototype.eachAlbum = function(callback) {
for (var i = 0; i < this.length; i++) {
callback(this[i], i, this)
}
}
Let's try to use our own polyfill
logicAlbums.eachAlbum(function(word) {
console.log(word)
})
.map()
.map() is very much similar to .forEach() method, except for the fact, that instead of returning items out of the array, it returns the array itself.
But what sense does it make if it returns the array itself?
.map() is used to iterate over the array, and do some manipulation in it with the items and then after doing that so, returns the manipulated array.
In Action
Let's use the collection of Logic's Albums again
var logicAlbums = [
'Bobby Tarantino',
'The Incredible True Story',
'Supermarket',
'Under Pressure',
]
Mapping these albums now using .map()
const mapThoseAlbums = logicAlbums.map(function(album) {
return album
})
console.log(mapThoseAlbums)
As we can see that, mapThoseAlbums returns an array.
So we are clear that we have to return an array in our own polyfill function. So let's create it then.
Array.prototype.ourMap = function(callback) {
var arr = []
for (var i = 0; i < this.length; i++) {
arr.push(callback(this[i], i, this))
}
return arr
}
In Action
const mapThoseAlbums = logicAlbums.ourMap(function(album) {
return album
})
console.log(mapThoseAlbums)
.filter()
.filter() is very much similar to the map() function except for the fact, it is used based on the context, where we decide what kind of items do we want in the resulting array.
Let's filter out Logic's greatest albums according to ratings
var logicAlbums = [
{
name: 'Bobby Tarantino',
rating: 5,
},
{ name: 'The Incredible True Story', rating: 4.5 },
{
name: 'Supermarket',
rating: 4.9,
},
{ name: 'Under Pressure', rating: 5 },
]
logicAlbums.filter(album => {
return album.rating > 4.9
})
console.log(logicAlbums)
Now let's create our own polyfill for filter.
Array.prototype.filterAlbums = function(callback, context) {
arr = []
for (var i = 0; i < this.length; i++) {
if (callback.call(context, this[i], i, this)) {
arr.push(this[i])
}
}
return arr
}
logicAlbums.filterAlbums(function(album) {
return album.rating > 4.9
})
console.log(logicAlbums)
Over here, only albums with a rating more than 4.9 will be returned which are Bobby Tarantino and Under Pressure>) (By the way, these are my favorites, that's why I rated them 5).
Under Pressure (2014)
Bobby Tarantino (2016)
.reduce()
reduce() function is used to reduce the array to a single value. We'll again take the example of Logic's best work yet and combine all of them in a single line using .reduce() function.
.reduce() accepts a callback function (accumulator, currentValue, index and array) and initial value
var logicAlbums = [
'Bobby Tarantino',
'The Incredible True Story',
'Supermarket',
'Under Pressure',
]
var withReduce = logicAlbums.reduce(function(a, b) {
return a + ' , ' + b
}, 'Young Sinatra')
console.log(withReduce)
Let's create our own polyfill which is very easy.
Array.prototype.reduceAlbums = function(callback, initialValue) {
var accumulator = initialValue === undefined ? undefined : initialValue
for (var i = 0; i < this.length; i++) {
if (accumulator !== undefined) {
accumulator = callback.call(undefined, accumulator, this[i], i, this)
} else {
accumulator = this[i]
}
}
return accumulator
}
var logicAlbums = [
'Bobby Tarantino',
'The Incredible True Story',
'Supermarket',
'Under Pressure',
]
var combineAlbums = logicAlbums.reduceAlbums(function(a, b) {
return a + ' , ' + b
}, 'Young Sinatra')
console.log(combineAlbums)
This article is really special for me since I am a huge fan of Logic. I tried to portray the whole post with Logic's best work yet just to give a personal touch. If you are a Hip Hop head like me, don't forget to check his work on the Internet.
Here's a tribute to his turning point of life that is, his album Young Sinatra.
