# Polyfills in Javascript

> In this article, we explore how JavaScript's built-in methods work and learn how to create custom methods to extend their functionality. We introduce the concept of polyfills, enabling modern functionalities on older browsers. The article provides step-by-step examples to build custom implementations of popular array methods: customMap, myFilter, customForEach, mySlice, and customShift, revealing the inner workings of these methods and demonstrating how to replicate their behavior in JavaScript.

### ✨🚀 **Ever Wondered How JavaScript's Built-in Methods Work?** 🤔💡

Well, I got you! 🔥 Let's dive deep into the magic behind these methods and even **build our own custom JavaScript methods** from scratch! 🛠️💻

## What is Polyfill?

A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it.

Now we will se some examples of how we can build our own custom methods.

### 1) Example 1: CustomMap()

```javascript
const arr = [2,3,4,5,6]

if(!Array.prototype.customMap){
    Array.prototype.customMap = function(userFnc){
           const res = [];
           for(let i = 0; i< this.length; i++){
                res.push(userFnc(this[i]))
         }  
        return res;
    }
}

const newArr = arr.customMap((el) => el * 3);
console.log(newArr);

//Output:-  [6, 9, 12, 15, 18]
```

Here we built our own customMap method in which we returned a new array wit each element multiplied by 3.

### 2) Example 2: myFilter()

```javascript
if(!Array.prototype.myFilter){
  Array.prototype.myFilter = function(userFnc){
    const res = [];
    for(let i = 0; i<this.length; i++){
      if(userFnc(this[i])){
        res.push(this[i])
      }
    }
    return res;
  }
}

const arr = [2,3,4,5,6]
const newArr = arr.myFilter((el) => el % 2 === 0)
console.log(newArr);

//Output :- [2,4,6]
```

### 3) Example 3: customForEach()

```javascript
if(!Array.prototype.customForEach){
  Array.prototype.customForEach = function(fnc){
    for(let i = 0; i< this.length; i++){
      fnc(this[i], i, this);
    }
  }
}

const arr = ["mango", "apple","banana", "grapes","orange"]
arr.customForEach((el) => console.log(el))

//Output:- ["mango", "apple","banana", "grapes","orange"]
```

### 4) Example 4: customSlice()

```javascript
if (!Array.prototype.mySlice) {
  Array.prototype.mySlice = function (strtIndx = 0, endIndx = this.length) {
    let result = [];

    // Handle negative start index
    if (strtIndx < 0) {
      strtIndx = Math.max(this.length + strtIndx, 0);
    }

    // Handle negative end index
    if (endIndx < 0) {
      endIndx = this.length + endIndx;
    }

    // Keep endIndx within array length
    endIndx = Math.min(endIndx, this.length);

    // Extract elements
    for (let i = strtIndx; i < endIndx; i++) {
      result.push(this[i]);
    }

    return result;
  };
}


let students = ["Ali", "Riya", "John", "Sara", "Aman"];
console.log(students.mySlice(-3, students.length)); // ["John", "Sara", "Aman"]
console.log(students.mySlice(1, 4)); // ["Riya", "John", "Sara"]
console.log(students.mySlice(-2)); // ["Sara", "Aman"]
console.log(students.mySlice()); // ["Ali", "Riya", "John", "Sara", "Aman"]
```

### 5) Example 5: customShift()

```javascript
if(!Array.prototype.customShift){
  Array.prototype.customShift = function(){
    if(this.length == 0) return undefined;
    let firstElement = this[0];
    for(let i = 0; i< this.length; i++){
      this[i] = this[i+1];
    }
    this.length = this.length-1;
    return firstElement;
  }
}


const arr = ["batman", "spiderman", "superman", "ironman", "winter soldier"];
arr.customShift()
console.log(arr);

//Output:- ["spiderman", "superman", "ironman", "winter soldier"]
```

### **🚀 Wrapping It Up: Unlocking JavaScript's Hidden Powers! 🔥**

By now, you’ve not only **uncovered** how JavaScript’s built-in methods work but also **mastered** the art of building your own! 🛠️💡 From `customMap()` to `customShift()`, you now have the power to **replicate and extend** JavaScript’s core functionalities like a pro. 💻✨