Introduction to Inheritance In JavaScript

Today, we’re diving into Inheritance in JavaScript, but with a twist — we’ll focus entirely on using classes. No confusion, no distractions, just the magic of inheritance made simple! Ready? Let’s begin! 🚀

What is Inheritance in JavaScript? 🧩

Inheritance is when a class (child) takes on the properties and methods of another class (parent). Think of it like this:

• A parent shares traits like eye color or skills with their child.
• Similarly, in JavaScript, a parent class can share its properties and methods with a child class.

It’s all about reusing code instead of rewriting it. Why do the same work twice when you can inherit it? 😉

Why Use Classes for Inheritance?

Classes make inheritance in JavaScript:

• Clean: The syntax is easier to understand.
• Efficient: You can define shared behaviors once in the parent and reuse them across multiple child classes.
• Organized: It helps you manage code in a structured way, especially in large projects.

How Does Class-Based Inheritance Work?

To understand class inheritance, let’s break it into three simple steps:

1. Create a Parent Class: This class contains the shared properties and methods.
2. Extend the Parent Class: Use the extends keyword to create a child class that inherits from the parent.
3. Customize the Child Class: Add or override properties and methods to suit the child’s needs.

Example: Parent and Child Classes

// Parent class
class Animal {
    constructor(name) {
        this.name = name;
    }

    eat() {
        console.log(`${this.name} is eating.`);
    }
}

// Child class
class Dog extends Animal {
    bark() {
        console.log(`${this.name} is barking.`);
    }
}

// Create objects
const animal = new Animal("Generic Animal");
animal.eat(); // Output: Generic Animal is eating.

const dog = new Dog("Buddy");
dog.eat(); // Output: Buddy is eating. (inherited from Animal)
dog.bark(); // Output: Buddy is barking.

Explanation:
Animal is the parent class with a property name and a method eat.
Dog extends Animal, meaning it inherits the eat method.
Dog adds its own method, bark, making it unique.

Using the constructor and super:

// Parent class
class Animal {
    constructor(name) {
        this.name = name;
    }

    eat() {
        console.log(`${this.name} is eating.`);
    }
}

// Child class
class Cat extends Animal {
    constructor(name, color) {
        super(name); // Calls the parent class's constructor
        this.color = color; // Adds a new property
    }

    purr() {
        console.log(`${this.name}, the ${this.color} cat, is purring.`);
    }
}

// Create an object
const kitty = new Cat("Whiskers", "black");
kitty.eat(); // Output: Whiskers is eating.
kitty.purr(); // Output: Whiskers, the black cat, is purring.

Explanation:
The super(name) in Cat calls the constructor of the parent Animal to initialize name.
The child class Cat adds its own property, color, and method, purr.

Method Overriding

// Parent class
class Animal {
    constructor(name) {
        this.name = name;
    }

    sound() {
        console.log(`${this.name} makes a sound.`);
    }
}

// Child class
class Dog extends Animal {
    sound() {
        console.log(`${this.name} barks.`);
    }
}

// Create objects
const genericAnimal = new Animal("Generic Animal");
genericAnimal.sound(); // Output: Generic Animal makes a sound.

const dog = new Dog("Buddy");
dog.sound(); // Output: Buddy barks.

Explanation:
The sound method in Animal provides a general behavior.
The Dog class overrides it with a more specific behavior (barks).

Real-Life Example: Shopping System 🛒

// Parent class
class Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }

    display() {
        console.log(`${this.name} costs $${this.price}.`);
    }
}

// Child class
class Book extends Product {
    constructor(name, price, author) {
        super(name, price); // Call the parent class's constructor
        this.author = author; // Add a new property
    }

    display() {
        super.display(); // Call the parent method
        console.log(`Written by ${this.author}.`);
    }
}

// Create objects
const product = new Product("Laptop", 1200);
product.display(); // Output: Laptop costs $1200.

const book = new Book("JavaScript Basics", 25, "John Doe");
book.display();
// Output:
// JavaScript Basics costs $25.
// Written by John Doe.

Key Concepts to Remember 🧠

• extends: Used to inherit from a parent class.
• constructor: Initializes properties when an object is created.
• super: Calls the parent class’s constructor or methods.
• Method Overriding: Allows child classes to provide specific behavior.

Why Use Inheritance?

• Code Reusability: Write once, use multiple times.
• Better Organization: Divide responsibilities among classes.
• Flexibility: Override methods for specific behavior.

A Quick Motivational Thought 💭

“Good code is not written; it’s refined.” Keep practicing, and soon, you’ll master how to organize your code using inheritance like a pro. Just like building a solid foundation for a house, inheritance makes your code sturdy and future-proof! 💪

What’s Next?

In the next lesson, we’ll explore Polymorphism, a superpower of inheritance that allows you to use the same method in different ways. It’s going to be fun and enlightening, so stay tuned! 🌟

Keep coding, stay curious, and never stop learning. See you in the next class! 😊