Polyfills for .forEach(), .map() and .filter() methods of javascript

Polyfills for .forEach(), .map() and .filter() methods of javascript

In simple word, A polyfill is a piece of javascript code which provide native support to the older browsers who does not have the support of modern functionalities of javascript. In ECMAScript 2015, there are many new Array methods has been added...

In simple word, A polyfill is a piece of javascript code which provide native support to the older browsers who does not have the support of modern functionalities of javascript.

In ECMAScript 2015, there are many new Array methods has been added to manipulate an arrays in a simple and easy way. Here we are trying to create polyfills for .forEach(), .map() and .filter() methods.

Lets take an example to understand the difference between the array methods and polyfill code:

.forEach() .forEach() function is required when you want to iterate an elements of an array instead of using for loop for same output.

The .forEach() syntax in ECMAScript 2015 Array.forEach(callback [, contextObject]); Let's create a common fruits array for all methods:

let fruits = ['Mango', 'Apple', 'Banana', 'Grapes']

Using ES6 .forEach() here

fruits.forEach(function (element) {
  console.log(element);
});
**Output:**
Mango
Apple
Banana
Grapes

Polyfills for .forEach()

Array.prototype.customForEach = function(callback){
      for(i=0; i<this.length; i++){
          callback(this[i])
      }
  }
fruits.customForEach(function(element){
    console.log(element)
  })
**Output:** 
Mango
Apple
Banana
Grapes

.map() .map() is also used to iterate elements of an array like .forEach() method, the difference is that instead of returning items out of the array, it return the array itself.

The .map() syntax in ECMAScript 2015 arrayObject.map(callback[,contextObject]);

const fruitsOutput = fruits.map(function(element) {
  return element
})
console.log(fruitsOutput)
**Output:** ["Mango", "Apple", "Banana", "Grapes"]

Polyfill for .map()

Array.prototype.customMap = function(callback){
    let arr = [];
    for(i=0; i< this.length; i++){
        arr.push(callback(this[i]))
    }
    return arr;
}
let fruitsOutput = fruits.customMap(function(element){
    return element
})
console.log(fruitsOutput)
**Output:** ["Mango", "Apple", "Banana", "Grapes"]

.filter() JavaScript Array provides the filter() method that allows us to create a new array that contains a subset of elements of the original array.

lets create an array object of fruits with two properties names and price and then filter fruits by its price:

let fruits = [
  { name: 'Mango', price: 200},
  { name: 'Apple', price: 300},
  { name: 'Banana', price: 100},
  { name: 'Grapes', price: 150}
]

The .filter() syntax in ECMAScript 2015 arrayObject.filter(callback, contextObject);

let fruitsFilter = fruits.filter(function (element) {
  return element.price > 100;
});
console.log(fruitsFilter);
**Output:**
{name: "Mango", price: 200}
{name: "Apple", price: 300}
{name: "Grapes", price: 150}

Polyfills for .filter()

Array.prototype.customFilter = function(callback, context){
    var arr = [];
    for(i=0; i< this.length; i++){
        if(callback.call(context, this[i], i, this)){
            arr.push(this[i])
        }
    }
    return arr
}

fruits.customFilter(function(element){
    if(element.price > 100){
        console.log(element)
    }
})

**Output:**
{name: "Mango", price: 200}
{name: "Apple", price: 300}
{name: "Grapes", price: 150}

javascript methods arrays function callbacks

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Intro to Callback in JavaScript

Foundation of callback function and use cases in JavaScript. In JavaScript, functions are objects, which means, like any other objects it can be assigned to a variable and passed as an argument to another function. In a nutshell, a callback function is _a function_ that is provided as a _parameter_ for other methods such as forEach method or addEventListener method and gets invoked at a certain point in time.

Learn Arrays And Array Methods in JavaScript

In JavaScript, an array is a data structure that contains list of elements which store multiple values in a single variable. The strength of JavaScript arrays lies in the array methods. Array methods are functions built-in to JavaScript that we can apply to our arrays — Each method has a unique function that performs a change or calculation to our array and saves us from writing common functions from scratch. In this video we are going to learn arrays and array methods like sort(), reverse(), join(), split(), pop(), push(), shift(), unshift(), toString(), delete array, etc.......

What is Callback-Function in JavaScript? How it is Replaced By Promises?

Let us understand term Callback by an real-world example: Suppose, you are calling to your Girlfriend (If you have) and she is busy in another call then she send message to you : “I am busy right now, Call back you later.!!”. After completing her work, she calls you back and this is what call back in JavaScript as well. In this post, we'll discuss What is Callback-Function in JavaScript? How it is Replaced By Promises?

9 Must Know JavaScript Array Methods

Arrays are one of the most common things that you're going to use as a programmer. So, I'm going to explain nine JavaScript array methods that are going to make your life so much easier and more enjoyable. Simplify your code by understanding when to use different array methods in JavaScript. In this post, you'll see 9 Must Know JavaScript Array Methods

Convert String To Array Using Javascript Split Method

In this tutorial, you’ll be going to learn how to convert string to array using javascript split method. The easiest approach to use javascript built-in method String.split(). JavaScript split string method return array of a substring after splitting a string based on the separator you provide. The separator might be a string, special character or […]