It is always good to learn, how things work under the hood It will make you comfortable with the things you already know and you will feel more confident and superior because many people don't know about what is happening under the hood.

I am starting with a series of polyfills, we will create as many polyfills as possible. Today we will learn about the polyfill of the array push method

What is polyfill?

A polyfill is a line of code that is written to mimic the implementation of the already existing feature of the browser, for the browser that doesn't support that feature.

Why do I have to learn about polyfill?

It will cover a lot of in-depth knowledge of javascript features such as prototype, context(this), functions and many more.

The behavior of the already existing method

Let us first see how the push method works in javascript

It is used to add one or more elements at the end of the array and returns the new length of the array.

CASE 1: let array = [1,2,3,4];
console.log(array.push(5)); //single element
//RESULT
5

CASE 2: let array = [1,2,3,4];
console.log(array.push(5,6)); //it can have multiple elements

//RESULT
6

CASE 3: let array = []; //array can be empty
console.log(array.push(5,6)); 

//RESULT
2

CASE 4: let array = ""; //value other that array
console.log(array.push(5,6)); 

//RESULT
TypeError: array.push is not a function

CASE 5: let object = {
  length: 3,
  random: "boo",
  2: 5,
}; //using object
console.log(Array.prototype.push.call(object ,1 ,2)); 
console.log(object)
//RESULT
5
{
    2 : 5, //already existing key
    3 : 1, //key value increases to store the value that is passed
    4 : 2, //key value increases to store the value that is passed
    length : 5, //total length
    random : "boo" //already existing key 
}

Let's create our custom push method now

//Whenever we will call [].customPush(1)
//this -> []
function customPushMethod()
{
  //First we will check the type of this
  if(this === null || this === undefined)
  {
    throw new TypeError('.push is not a function')
  }

}

Array.prototype.customPush = customPushMethod;

function customPushMethod()
{
  //First we will check the type of this
  if(this === null || this === undefined)
  {
    throw new TypeError('.push is not a function')
  }

  //Now if we know this is a type of 
  // object or array, we will find the length 
  let length = this.length || 0;
  let argsLength = arguments.length; // we have a special keyword in                     functions i.e arguments which returns array of arguments passed in the function
}

function customPushMethod()
{
  //First we will check the type of this
  if(this === null || this === undefined)
  {
    throw new TypeError('.push is not a function')
  }

  //Now if we know this is a type of 
  // object or array, we will find the length 
  let length = this.length || 0;
  let argsLength = arguments.length; // we have a special keyword in                     functions i.e arguments which returns array of arguments passed in the function

//Now if we don't have any arguments to push 
//we have to change nothing, just we have to return the length
 if(!argsLength)
  {
    return length;
  }
}

function customPushMethod()
{
  //First we will check the type of this
  if(this === null || this === undefined)
  {
    throw new TypeError('.push is not a function')
  }

  //Now if we know this is a type of 
  // object or array, we will find the length 
  let length = this.length || 0;
  let argsLength = arguments.length; // we have a special keyword in                     functions i.e arguments which returns array of arguments passed in the function

//Now if we don't have any arguments to push 
//we have to change nothing, just we have to return the length
 if(!argsLength)
  {
    return length;
  }

   //looping till arguments array length is not finished
  for(let i = 0 ; i < argsLength.length ; i++)
  {
    this[i + length] = arguments[i]; //this -> array or object // i + length because we are pushing item in array 
//So if we have [1,2,3] then we have to start with index 3
  }
}

function customPushMethod()
{
  //First we will check the type of this
  if(this === null || this === undefined)
  {
    throw new TypeError('.push is not a function')
  }

  //Now if we know this is a type of 
  // object or array, we will find the length 
  let length = this.length || 0;
  let argsLength = arguments.length; // we have a special keyword in                     functions i.e arguments which returns array of arguments passed in the function

//Now if we don't have any arguments to push 
//we have to change nothing, just we have to return the length
 if(!argsLength)
  {
    return length;
  }

   //looping till arguments array length is not finished
  for(let i = 0 ; i < argsLength ; i++)
  {
    this[length + i] = arguments[i]; //this -> array or object // i + length because we are pushing item in array 
//So if we have [1,2,3] then we have to start with index 3
  }

  this.length = length + argsLength; //adding the length to the arguments length
  return this.length;
}

Hope you enjoyed reading, learning and implementing array push polyfill.

If you enjoyed then support by liking and commenting your views.

We will meet with another polyfill, till then Goodbye :-)