DEV Community

Cover image for Inheritance in JavaScript
Manikandan K
Manikandan K

Posted on

Inheritance in JavaScript

Introduction:

Properties and methods from the base class or parent class can be passed into the derived or child class.

  • Inheritance is a powerful concept in object-oriented programming that allows classes to inherit properties and methods from other classes.
  • In JavaScript, class inheritance can be achieved using the extends keyword, which establishes a parent-child relationship between classes. Let's dive into a practical example to understand how class inheritance works in JavaScript.

Parent Class: Person

class Person {
    constructor(_name, _age) {
        this.name = _name;
        this.age = _age;
    }
}
Enter fullscreen mode Exit fullscreen mode

The Person class represents a basic entity with properties for name and age.

Derived Class: Teacher

class Teacher extends Person {
    constructor(_name, _age, _subject) {
        super(_name, _age);
        this.subject = _subject;
    }
}
Enter fullscreen mode Exit fullscreen mode

The Teacher class extends the Person class, inheriting its properties. It adds an additional property for the subject taught by the teacher.

Derived Class: Student

class Student extends Person {
    constructor(_name, _age, _class) {
        super(_name, _age);
        this.class = _class;
    }
}
Enter fullscreen mode Exit fullscreen mode

The Student class also extends the Person class and includes an extra property to represent the student's class.

Creating Instances

const person1 = new Person('Manikandan', 25);
const teacher1 = new Teacher('Aravind', 22, 'DSA');
const student1 = new Student('Nithish', 24, 'SSLC');
Enter fullscreen mode Exit fullscreen mode

We create instances of the Person, Teacher, and Student classes, passing appropriate arguments to their constructors.

Output

console.log(person1);  // Person { name: 'Manikandan', age: 25 }
console.log(teacher1); // Teacher { name: 'Aravind', age: 22, subject: 'DSA' }
console.log(student1); // Student { name: 'Nithish', age: 24, class: 'SSLC' }
Enter fullscreen mode Exit fullscreen mode

The output demonstrates that each object correctly inherits properties from its parent class while also containing its specific properties.

Conclusion:

  • Class inheritance in JavaScript provides a clean and structured way to establish relationships between classes, promoting code reuse and organization.
  • By leveraging inheritance, developers can create more modular and maintainable codebases. In this example, we've seen how classes can be extended to model relationships such as teachers and students inheriting properties from a common parent class.
  • Understanding and utilizing class inheritance is key to building robust and scalable JavaScript applications.

By mastering class inheritance, developers can unlock the full potential of object-oriented programming in JavaScript, enabling them to build complex and sophisticated applications with ease.

Top comments (0)