Javascript Polyfills

Have you ever wondered how everything in JS is an object!!

In JS we can point out that every method, function, array, variable… all of it is an object, you can get to know it by yourself too..

Just open console in any browser and see the methods of an Array (for example) you will see that there is an prototype method attached.

Why do we have a prototype for it??

We need that so that we can assing all the well known methods such as filter, reduce, map to a particular datatype that we want to create of.

You can create a custom method that you want to have for an Array, String whatever it is, you can have it for yourself.

What we do is we insert a prototype for a particular datatype we will go with array where we will give it an prototype and then the cusotm method name which will use “=” to assign a copy of the method for us.

Enough talking lets code.

1) Reversing the array

if (!Array.prototype.myReverse) {
  Array.prototype.myReverse = function () {
    if (this.length === 0) {
      return [];
    }
    let start = 0;
    let end = this.length - 1;
    while (start < end) {
      [this[start], this[end]] = [this[end], this[start]];
      start++;
      end--;
    }
    return this;
  };
}

const arr = [1, 2, 3, 4, 5];

console.log(arr.myReverse2());

In this way of approaching to reverse the array we have saved memory by modifying the existing array, but there is also another approach where we create a different array, which is useful when we don’t want to modify existing array.

Array.prototype.myReverse2 = function () {
  const newArray = [];
  for (let i = this.length - 1; i >= 0; i--) {
    newArray.push(this[i]);
  }
  return newArray;
};

const arr = [1, 2, 3, 4, 5];

console.log(arr.myReverse2());

2) Accumulator

const arr = [1, 2, 3, 4, 5];

Array.prototype.myReduce = function (userFn, initialValue) {
  const myArr = this; // arr
  console.log(myArr, "for your satisfaction");

  let accumulator = initialValue ? initialValue : this[0];
  let currentValue = initialValue !== undefined ? 0 : 1;

  for (let i = currentValue; i < this.length; i++) {
    // because we are going to iterate over the arary
    accumulator = userFn(accumulator, this[i]);
  }
  return accumulator;
};

const val = arr.myReduce((acc, currval) => acc + currval, 0);
console.log(val) // outputs 16

3) Concat

if (!Array.prototype.myConcat) {
  Array.prototype.myConcat = function (arr) {
    return [...this, ...arr];
  };
}

const numsArr = [1, 2, 3, 4, 5];

console.log(numsArr.myConcat([6, 7, 8, 9]));

4) For Each

const arr = [1, 2, 3, 4, 5];

Array.prototype.myMap = function (callback) {
  const newArray = [];
  for (let i = 0; i < this.length; i++) {
    newArray.push(callback(this[i], i, this));
  }

  return newArray;
};

const doubledArr = arr.map((x) => x * 2);
console.log(doubledArr); // Output: [2, 4, 6, 8, 10]

Remember, the arguments ‘i’, ‘this’ are not required for simple multiplications or basic operation but we give them in order to something complex when we are performing something which required the index of the array or a particular value for those cases we gave it, but for basie doubleArray function it is not required

Map

if (!Array.prototype.myMap) {
  Array.prototype.myMap = function (userFn) {
    let result = [];
    for (let i = 0; i < this.length; i++) {
      let val = userFn(this[i], i);
      result.push(val);
    }
    return result;
  };
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const doubleArr = arr.myMap((item) => item * 2);

console.log(doubleArr);

Filter

if (!Array.prototype.myFilter) {
  Array.prototype.myFilter = function (userFn) {
    let result = [];
    for (let i = 0; i < this.length; i++) {
      if (userFn(this[i], i)) {
        result.push(this[i]);
      }
    }
    return result;
  };
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenArr = arr.myFilter((item) => item % 2 === 0);

console.log(evenArr);