Introduction
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.
.Everything is changing rapidly in the world of web development, and the feature which was prevalent a week ago may become obsolete. Not every web user is tech-nerd, they might be using outdated legacy Internet Explorer which some modern features may not support which may cause hindrance in the usability of the feature. So, to make the modern feature compatible with the old and non-compatible browsers we can create a polyfill of that feature.
For example, the old browsers support ES5 syntax, and if want to make that browser support ES6 syntax we have to create a fallback polyfill for those features. Array methods like map, forEach, and filter are introduced in ES6 but if we ship our site with those ES6 syntaxes then the site will not work properly and will throw errors.
So, to make those ES6 syntaxes work in old/non-compatible browsers we can create a fallback polyfill in ES5 syntax which will be compatible.
Fallback polyfill for some ES6 array methods like map, forEach and filter
Polyfill for forEach
if (!Array.prototype['forEach']) {
Array.prototype.forEach = function(callback) {
if ( ! ((typeof callback === 'Function' || typeof callback === 'function') && this) ) {
throw new TypeError('Array.prototype.forEach called on null or undefined');
}
for (let index = 0; index < this.length; index++) {
if (this.indexOf(this[index]) > -1) {
callback(this[index], index, this)
}
}
};
}
forEach is an inbuilt array method that helps to iterate through the array elements. It takes callback functions with three arguments which are the current element, the index of the current element, and the complete array.
Polyfill for map
if (!Array.prototype['map']) {
Array.prototype.map = function(callback) {
if ( ! ((typeof callback === 'Function' || typeof callback === 'function') && this) ) {
throw new TypeError('Array.prototype.map called on null or undefined');
}
const output = []
for (let index = 0; index < this.length; index++) {
if (this.indexOf(this[index]) > -1) {
output.push(callback(this[index], index, this))
}
}
return output;
};
}
map is an inbuilt array method that helps to iterate through the array elements and return a new array. We can modify each or some element of the array based on some specific condition and then we can return the modified array and it will not modify the original array. It takes callback functions with three arguments which are the current element, the index of the current element, and the complete array.
Polyfill for filter
if (!Array.prototype['filter']) {
Array.prototype.filter = function(callback) {
if ( ! ((typeof callback === 'Function' || typeof callback === 'function') && this) ) {
throw new TypeError('Array.prototype.filter called on null or undefined');
}
const output = []
for (let index = 0; index < this.length; index++) {
if (this.indexOf(this[index]) > -1) {
callback(this[index], index, this) && output.push(callback(this[index], index, this))
}
}
return output;
};
}
filter is an inbuilt array method that helps to filter the elements of the array based on some specific condition and then we can return the modified array and it will not modify the original array. It takes callback functions with three arguments which are the current element, the index of the current element, and the complete array.
Polyfill for reduce
if (!Array.prototype['reduce']) {
Array.prototype.filter = function(,initialValue) {
if ( ! ((typeof callback === 'Function' || typeof callback === 'function') && this) ) {
throw new TypeError('Array.prototype.reduce called on null or undefined');
}
for (let i = 0; i < this.length; i++) {
initialValue = initialValue !== undefined ? callback(initialValue, this[i]) : this[i];
}
return initial; };
};
}
reduce is an inbuilt array method that helps to function is used to reduce the array to a single value and it will return a single value of instead of returning a new array. It takes callback functions with three arguments which are the current element, the index of the current element, and the complete array and other optional argument as initialValue.
Conclusion
In this article we learnt about the basics of pollyfill and it's implementation on some popular array methods like forEach, map, filter and reduce.
Most of web-app we build using modern ES6 syntax and jsx for react-app gets converted into ES5 syntax with the help of babel which then uses polyfill for converting modern ES6 syntax to ES5 syntax. Most of the time we don't have to polyfill by ourself it is done by babel.
Thank you for Reading...