JavaScript is constantly evolving with new features and methods to make our code more efficient and easier to write. However, older browsers (such as Internet Explorer) don’t always support the latest features. Polyfills are small pieces of code that help fill in those gaps by adding functionality to browsers that don’t support them.
In this blog, we’ll walk through how to create simple polyfills for several array methods like length, forEach, map, filter, push, pop, shift, unshift, includes, indexOf, and reverse. These polyfills will allow us to use modern array methods in older browsers.
What is a Polyfill?
A polyfill is a code implementation that mimics a feature which is missing in certain browsers. It's usually a way to add support for features in browsers that don’t natively support them. For example, Array.prototype.includes() was introduced in modern JavaScript, but older browsers don’t have it. A polyfill can add that method to older browsers so they behave like newer ones.
Let’s now create a simple polyfill for several array methods.
1. Polyfill for Array.prototype.mylength()
We’ll start by writing our own version of the length property using a custom method called mylength(). The native length property is already supported in all browsers, but we’ll implement it in a simple way so you can see how polyfills work.
Array.prototype.mylength = function() {
let i = 0;
while (this[i] !== undefined) {
i++;
}
return i;
};
// Example usage:
let numbers = [1, 2, 3, 4];
console.log(numbers.mylength()); // 4
Here, mylength() loops through the array, counting elements until it encounters an undefined value (which marks the end of the array). The result is the length of the array.
2. Polyfill for Array.prototype.forEach()
The forEach() method calls a provided function once for each array element.
javascriptCopy// Polyfill for Array.prototype.forEach
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback) {
for (let i = 0; i < this.mylength(); i++) {
callback(this[i], i, this);
}
};
}
// Example usage:
let numbers = [1, 2, 3, 4];
numbers.forEach(function(value, index) {
console.log(value, index); // 1 0, 2 1, 3 2, 4 3
});
3. Polyfill for Array.prototype.map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
if (!Array.prototype.map) {
Array.prototype.map = function(callback) {
let newArray = [];
for (let i = 0; i < this.mylength(); i++) {
newArray.push(callback(this[i], i, this));
}
return newArray;
};
}
// Example usage:
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(value) {
return value * 2;
});
console.log(doubled); // [2, 4, 6, 8]
4. Polyfill for Array.prototype.filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
if (!Array.prototype.filter) {
Array.prototype.filter = function(callback) {
let newArray = [];
for (let i = 0; i < this.mylength(); i++) {
if (callback(this[i], i, this)) {
newArray.push(this[i]);
}
}
return newArray;
};
}
// Example usage:
let numbers = [1, 2, 3, 4];
let filtered = numbers.filter(function(value) {
return value > 2;
});
console.log(filtered); // [3, 4]
5. Polyfill for Array.prototype.push()
The push() method adds new items to the end of an array and returns the new length of the array.
if (!Array.prototype.push) {
Array.prototype.push = function() {
for (let i = 0; i < arguments.length; i++) {
this[this.mylength()] = arguments[i];
}
return this.mylength();
};
}
// Example usage:
let numbers = [1, 2];
numbers.push(3, 4);
console.log(numbers); // [1, 2, 3, 4]
6. Polyfill for Array.prototype.pop()
The pop() method removes the last element from an array and returns that element.
if (!Array.prototype.pop) {
Array.prototype.mypop = function(){
if (this.length === 0) {
return undefined;
}
let i = 0;
while (this[i] !== undefined) {
i++;
}
const poppedValue = this[i - 1];
this.length = i - 1;
return poppedValue;
}
}
// Example usage:
let numbers = [1, 2, 3, 4];
let last = numbers.pop();
console.log(last); // 4
console.log(numbers); // [1, 2, 3]
7. Polyfill for Array.prototype.myshift()
The shift() method removes the first element from an array and returns that element.
if (!Array.prototype.myshift) {
Array.prototype.myshift = function(){
let ans = this[0];
for(let i = 0;i<this.length-1;i++){
this[i]=this[i+1];
}
this.length = this.length-1;
return ans;
}
}
// Example usage:
let numbers = [1, 2, 3, 4];
let first = numbers.shift();
console.log(first); // 1
console.log(numbers); // [2, 3, 4]
8. Polyfill for Array.prototype.unshift()
The unshift() method adds one or more elements to the beginning of an array.
if (!Array.prototype.unshift) {
Array.prototype.unshift = function() {
let args = Array.prototype.slice.call(arguments);
for (let i = this.mylength() - 1; i >= 0; i--) {
this[i + args.mylength()] = this[i];
}
for (let i = 0; i < args.mylength(); i++) {
this[i] = args[i];
}
return this.mylength();
};
}
// Example usage:
let numbers = [3, 4];
numbers.unshift(1, 2);
console.log(numbers); // [1, 2, 3, 4]
9. Polyfill for Array.prototype.includes()
The includes() method checks if an array contains a certain element.
if (!Array.prototype.includes) {
Array.prototype.includes = function(element) {
for (let i = 0; i < this.mylength(); i++) {
if (this[i] === element) return true;
}
return false;
};
}
// Example usage:
let numbers = [1, 2, 3, 4];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(5)); // false
10. Polyfill for Array.prototype.indexOf()
The indexOf() method returns the first index at which a given element can be found.
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(element) {
for (let i = 0; i < this.mylength(); i++) {
if (this[i] === element) return i;
}
return -1;
};
}
// Example usage:
let numbers = [1, 2, 3, 4];
console.log(numbers.indexOf(3)); // 2
console.log(numbers.indexOf(5)); // -1
11. Polyfill for Array.prototype.reverse()
The reverse() method reverses the order of the elements in an array.
if (!Array.prototype.reverse) {
Array.prototype.reverse = function() {
let start = 0;
let end = this.mylength() - 1;
while (start < end) {
let temp = this[start];
this[start] = this[end];
this[end] = temp;
start++;
end--;
}
return this;
};
}
// Example usage:
let numbers = [1, 2, 3, 4];
numbers.reverse();
console.log(numbers); // [4, 3, 2, 1]
Conclusion
Polyfills are a powerful tool to ensure that modern JavaScript features work across all browsers, especially older ones. By writing simple polyfills for commonly used array methods like forEach(), map(), and push(), we can provide compatibility for legacy browsers while still using the latest JavaScript syntax and methods.
With the polyfills provided above, you can confidently use modern array methods in your projects, knowing that they will work in older environments as well. Happy coding!