What is Prototype ?

Let's take a closer look at an interesting observation. When we create an array in JavaScript and then type a dot (.) after the array variable, we see various methods like length, sort, and more. But where do these methods come from?

These methods are inherited from the array's prototype.

In JavaScript, the prototype is a built-in mechanism that allows objects to inherit properties and methods from other objects. The browser defines these prototypes, providing built-in functionality to different types of objects. In JavaScript, everything is an object—because they are defined in object prototype.

For example, array methods are defined on Array.prototype, which means all array instances automatically inherit these methods:

let arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // true

how to create our own prototype methods ? (Run this in your Console)

Array.prototype.aryan = function(){
console.log("This is Hacked by Aryan")
}

arr.aryan // this is how we can define our own method in browser
ƒ (){console.log("This is Hacked by Aryan")}

Polyfills in JavaScript

A polyfill is a JavaScript code snippet that provides modern functionality in older browsers that do not support it natively.

Steps Before Writing a Polyfill

Before implementing a polyfill, consider these three key aspects:

Return Type – What should the function return? (e.g., a number, string, boolean, or object)
Input – What arguments does it take? (e.g., numbers, arrays, objects, etc.)
What It Does – The expected behavior of the function (i.e., how it should work).

Polyfills OF FOREACH

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

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

arr.myForeach(function(value,index){
console.log(value + index);
});

Polyfills OF MAP

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


const arr = [1,2,3,4,5];
const arr2 = arr.mymap((e) => e*3);
console.log(arr2);

Polyfills OF filter

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


const arr = [1,2,3,4,5];
const arr2 = arr.myfilter((e) => e % 2 == 0);
console.log(arr2);

polifills of reduce

if(!Array.prototype.myreduce){
Array.prototype.myreduce = function(userFn,initialvalue = undefined){
    let acc = initialvalue || this[0];
    const start = initialvalue ? 0 :1;
for(let i = start ; i < this.length ; i++){
acc = userFn(acc,this[i]);
}
    return acc;
};
}

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

let a = arr.myreduce(function(value,index){
return value + index;
});

console.log(a);

To copy blueprint of object we use class

A constructor function is used to create objects.

It defines properties and methods for the created objects.

There are two types:
1. Default constructor (if no constructor is defined, JavaScript provides a default one).
2. Parameterized constructor (where you define your own constructor with parameters).

class Person {
  constructor(fname, lname) {
    this.fname = fname;
    this.lname = lname;
  }

  getFullname() {
    return `${this.fname} ${this.lname}`; // Corrected with backticks
  }
}

const p1 = new Person('Aryan', 'Kumar');

console.log(p1.getFullname()); // Output: Aryan Kumar

In above example due to new keyword p1 prototype = Person.prototype

p1__proto__ = Person.prototype

const p1 = new Person('Aryan', 'Kumar');

// In above example due to new keyword p1 prototype = Person.prototype
//p1__proto__ = Person.prototype

Inheritance

In JavaScript, every object has an internal link (__proto__) to another object, known as its prototype. This forms a prototype chain, allowing objects to inherit properties and methods from their parent objects.

class A{
    functionA(){}
}

class B extends A{
    functionb(){}
}

B.prototype // it has A prototype inside 
// this is how inheretance works

Do inheritance without using extends keywords

class A {
 functionA() {} 
}

 class B { 
functionB() {}
 }

B.prototype.__proto__ = A.prototype

Conclusion :

JavaScript's prototype system enables object inheritance, allowing efficient code reuse and memory management. Built-in objects inherit methods from their respective prototypes, and custom methods can be added to prototypes for extended functionality. Polyfills provide modern features in older browsers by manually implementing missing methods. Constructor functions and classes serve as blueprints for object creation, with the new keyword linking instances to their prototype. Prototype-based inheritance forms a chain where objects inherit properties and methods, making JavaScript a powerful, flexible, and efficient language for object-oriented programming.

Prototype and Polyfills