Prototypal Inheritance in JS 🤔🤔 what's that ?

Inheritance in General

Before jumping into prototypal inheritance, let's talk about inheritance in general. Inheritance refers to the ability of an object (child) to inherit properties and methods from another object (parent). This is a fundamental concept in object-oriented programming (OOP).

Analogy: A classic example of inheritance is a child inheriting traits from its parents.

JavaScript and Inheritance:

While many OOP languages use classes for inheritance, JavaScript takes a different approach: prototypal inheritance.

Prototypal Inheritance

In JavaScript, instead of relying on classes, inheritance is achieved through prototypes. A prototype is a special object that serves as a template for creating new objects. It defines the properties and methods that will be inherited by these new objects.

Let's understand this with some code:

// Define an Employee prototype (the master chef) using a constructor function
function Employee(empId, name, department) {
  this.empId = empId;
  this.name = name;
  this.department = department;
}

// Add a greet method to the prototype (a signature recipe)
Employee.prototype.greet = function() {
  console.log(`Hello, ${this.name} Welcome to xyz`);
};

// Create new Employee objects (the apprentices) using the Employee constructor
const emp1 = new Employee(30, "Alice", "QA");
const emp2 = new Employee(25, "Bob", "IT");

emp1.greet(); // Output: "Hello, Alice Welcome to xyz"
emp2.greet(); // Output: "Hello, Bob Welcome to xyz"

Fun Fact: The class syntax we use in JavaScript is actually syntactic sugar over a more fundamental concept – prototypes. Under the hood, classes create constructor functions and prototypes.

Everything in JavaScript is Connected!

Here's a mind-blowing secret: almost everything in JavaScript is connected to a prototype! You can verify this in your console:

let a = 10;
console.log(a.__proto__); // This will show you a whole object – that's the prototype!

The Power of Prototypal Inheritance

One of the benefits of prototypal inheritance is its flexibility. Unlike class-based inheritance, you can modify prototypes even after objects have been created. This allows you to add new methods or properties to existing objects dynamically.

Example: Adding a Custom Method to the Array Prototype

Array.prototype.myReduce = function() {
  // Implement your custom reduce functionality here
};

Note: While prototypal inheritance offers flexibility, it can sometimes lead to less structured code compared to traditional class-based inheritance. However, with a good understanding of prototypes and the prototype chain, you can become a master of object-oriented programming in JavaScript!

In the next article, we'll explore how to implement your own reduce method using prototypal inheritance, Until then, happy coding!

I hope this helps! 😁😁