The Revenge Story of Internet Explorer
From all the hatred from everyone, Internet Explorer finally got fed up and thought of acquire the whole internet . Internet explorer snapped and turned every browser to ashes , and every browser turned to Internet Explorer .
None of the websites were working . The whole World was in chaos . Finally Hitesh and Piyush Sir came to the rescue . They told that Internet explorer was a old browser so most of the modern syntax and function won't be available in Internet explorer. So, they decided to write Polyfills for all those function. Let Us Help Hitesh and Piyush Sir to solve this global problem .
Backstory of Internet Explorer ( Metamorphically)
As JavaScript got evolved , a lots of new functions got introduced , but Internet explorer didn't supports them , None of the Programmers were writing those functions work ( polyfills ) . JavaScript got evolved and none of them looked back to internet explorer . most of the modern websites were not working in Internet Explorer as it was old . Sometimes internet explorer got functions like map, filter . he didn't have them and couldn't run it as it was not found in the directory .
What is Polyfills ?
A polyfill is a piece of code (usually JavaScript) that provides modern functionality in older browsers that do not support it natively.
Why Are Polyfills Needed?
New JavaScript (ECMAScript) features are introduced regularly, but older browsers (like Internet Explorer) do not always support them. Polyfills act as a workaround by implementing missing features using older JavaScript syntax.
Victory Through Creation: Defeating the Conqueror by Building His Vision ( Building Polyfills)
Now Let us help Hitesh and Piyush Sir in building polyfills so that we can defeat Internet Explorer by creating his vision .
Pollyfill for Array.prototype.map()
if(!Array.prototype.map){
Array.prototype.map = function (callback){
let newArr = []
if(this == null) return "error"
if(typeof callback !== "function") return "error"
for(let i =0;i<this.length;i++){
newArr[i] = callback(this[i],i)
//we can also use
//newArr.push(callback(this[i],i))
}
return newArr
}
}
let arr = [1,2,3]
console.log(arr.map((e)=> e*2))
Pollyfill for Array.prototype.filter()
if (!Array.prototype.filer) {
Array.prototype.filter = function (callback) {
let arr = [];
if (this == null || this == []) return "can't process null or empty array";
if (typeof callback !== "function") return "callback must be function";
for (let i = 0; i < this.length; i++) {
let truth = callback(this[i], i);
if (truth === true) {
arr.push(this[i]);
}
}
return arr;
};
}
const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((e) => e !== 4);
console.log(newArr);
Polyfill of Array.prototype.find()
if (!Array.prototype.find) {
Array.prototype.find = function (callback) {
if (this == null || this == [])
return "can't process a empty or null array";
if (typeof callback) return "callback must be a function";
for (let i = 0; i < this.length; i++) {
let value = callback(this[i]);
if (value == true) return true;
}
return undefined;
};
}
let arr = [1, 2, 3, 4, 5];
console.log(arr.find((e) => e > 4));
Polyfill of Array.prototype.includes()
if (!Array.prototype.includes) {
if (!Array.prototype.includes) {
Array.prototype.includes = function (searchElement, index) {
if (this == null || this == undefined) return "can not find in null array";
let startIndex = Number(index) || 0;
for (let i = startIndex; i < this.length; i++) {
if (this[i] === searchElement) {
return true;
}
}
return false;
};
}
let arr = ["q", "c", "b"];
console.log(arr.includes("a"));
Common Polyfills every developer should know
Array.prototype.includes()Object.assign()
Promise
String.prototype.includes()
Array.prototype.find()
Array.prototype.forEach()
Object.values()andObject.keys()Array.prototype.flat()
SetandMapArray.prototype.fill()
String.prototype.trim()
A flowchart explaining feature detection and fallback mechanism in polyfill
First the browser will look for the code that is written
if he doesn't find it there then it will be searched in the Array.prototype file
if it is not there then it will search for a polyfill,
when the browser finds a polyfill it will execute it according to the function.
Conclusion:
For modern JavaScript development, using polyfills is crucial to support older browsers or environments. You can either manually add polyfills for features like Promise, fetch, or Array.prototype.includes, or you can rely on tools like Babel or core-js to handle this for you automatically in a bundled, minified form.