What is prototype?

Prototypes are the mechanism that we can simply compare this with superpower of an Object. Which can get superpower of inherit something from other. In this article, we explain what a prototype is, and how could use it with simple example. We will not cover this in detail.

Visualisation of prototype

Prerequisites: You have to know function, array, object

Example with array problem solving

Suppose we have an array arr. And we trying to add new element at the end of the array. We don't use build in method arr.push() for now or we can imagine that there no method exist like arr.push(). How can we solve this problem ?

Yes, we will find the length of the array and set the element to the end of that array. Let's see with the example below:

let arr = ["Apple", "Ball", "Cat"];
// Set or include element with straight index number
arr[3] = "Dog";
// Set element on dynamic way
arr[arr.length] = "Egg";
console.log(arr);

As we said this before that we don't have the option to use arr.push() method. So, now we have a chellange to make our own push function to do this. Let's make it out.

let arr = ["Apple", "Ball", "Cat"];

function pushItemAtEnd(array, item) {
  // Now set element at the end of the array using length
  array[array.length] = item;
}

pushItemAtEnd(arr, "Dog");

console.log(arr);

Now see the above example. We made a function which can add element at the end of an array. But what if we have to add tow or multiple element. You got it. We have another problem. Let's solve the problem and make the function more powerful.

let arr = ["Apple", "Ball", "Cat"];

function pushItemAtEnd(array, ...item) {
  // At first, take all argumnets using rest operator and later pack this element into an array using spread operator
  let items = item;

  for (let i = 0; i < items.length; i++) {
    array[array.length] = items[i];
  }
}

pushItemAtEnd(
  arr,
  "Dog",
  "Egg",
  "Fish",
  "Gold",
  { myName: "Torjuman Rimon" },
  [1, 2, 3, 4, 5, 6, 7]
);

console.log(arr);

Congratulation ! You and I made function which can solve a huge problem. But there is another chellange. We are willing to share this function to useable for other programmer and make thier life easier.

At this point, we need a super power who can make this function available for all. Here comes the use of 'Prototype'. Basicaly prototype can inject this function to 'Object'. And we already know 'Array' is also an 'Object'. Let's make a powerful system.

Array.prototype.pushItemAtEnd = function pushItemAtEnd(...item) {
  // This time we don't need to pass array because we will get the array using array object
  let items = item;

  for (let i = 0; i < items.length; i++) {
    // Here 'this' will refer to array which we about to pass
    this[this.length] = items[i];
  }
};

let arr = ["Apple", "Ball", "Cat"];

arr.pushItemAtEnd(
  "Dog",
  "Egg",
  "Fish",
  "Gold",
  { myName: "Torjuman Rimon" },
  [1, 2, 3, 4, 5, 6, 7],
  true,
  false
);

console.log(arr);

Now you can imagine what prototype can do and how it could be done. Actually programmer rarely use this prototype. We need prototype when we are going to build library or framework. We have to cover one more topic which is 'Overridde'.

Overridde

Yes, we can overridde properties or methods which already are in object or 'Object'. Even we can overridde build-in methods or properties. Let's see an example.

Array.prototype.forEach = function forEach() {
  console.log("I am from prototype forEach and overridden");
};

let arr = ["Apple", "Ball", "Cat"];

arr.forEach((item) => {
  console.log(item);
});

Output: I am from prototype forEach and overridden

Yes, we can destroy the build-in system or make a brillent system for all. Now you can imagine how powerful prototype is. And last but not least which 'Uncle Ban' said -

"Great Power comes with great responsibilites."