Inheritance: Unlocking Code Reusability in JavaScript | CodeSignal Learn

Inheritance: Unlocking Code Reusability in JavaScript | CodeSignal Learn

Introduction to Inheritance

Greetings, coder! Our voyage into Object-Oriented Programming (OOP) continues. Today, we will cover Inheritance, which can make our code more efficient and tidy.

Inheritance: First Example

Just as children inherit traits from their parents, child classes in programming inherit behaviors and properties from parent classes. Below is a practical example displaying a child class inheriting from a parent class: JavaScript // Parent class class Parent {constructor(name) {this.name = name; // name property} greet() {console.log(`Hello, my name is ${this.name}`); // greet method}} // 'Child' class extending 'Parent' class Child extends Parent {constructor(name, age) {super(name); // call to parent constructor of `Parent` this.age = age; // age property} info() {console.log(`I am ${this.age} years old.`); // info method}} const child = new Child('Alice', 10); child.greet(); // prints: Hello, my name is Alice child.info(); // prints: I am 10 years old. In this example, Child inherits from Parent, so it shares the greet() method, making our code smarter!

Understanding the 'extends' Keyword

To implement inheritance, we introduce a keyword: 'extends'. This powerful keyword allows a new class to inherit properties and methods from an existing class. Let's say, a 'child' class 'extends' from the 'parent' class. Let's see how a car can extend a vehicle . Both are entities with the potential for motion, but a car offers additional specific features — such as wheels. JavaScript // Vehicle class class Vehicle {constructor(name, speed) {this.name = name; // name property this.speed = speed; // speed property} move() {console.log(`${this.name} moves at ${this.speed} mph.`); // move method}} // 'Car' class extending 'Vehicle' class Car extends Vehicle {constructor(name, speed, wheels) {super(name, speed); // call to parent constructor this.wheels = wheels; // new wheels property} specs() {console.log(`I am a ${this.name} and I have ${this.wheels} wheels.`); // specs method}} const myCar = new Car('Toyota', 120, 4); myCar.move(); // prints: Toyota moves at 120 mph myCar.specs(); // prints: I am a Toyota and I have 4 wheels. In this code, the Car class extends from the Vehicle class, sharing the move() method.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Learning about the 'super' Keyword

The super keyword calls the parent class's constructor and provides access to its properties and methods. Let's consider a real-life instance of an apple inheriting from a fruit. JavaScript class Fruit {constructor(name) {this.name = name; // name property console.log(`Calling Fruit constructor with name=${name}`);} printName() {console.log(`Fruit name: ${this.name}`);}} class Apple extends Fruit {constructor(name, color) {super(name); // call to parent class constructor this.color = color; // color property console.log(`Calling Apple constructor with name=${name}, color=${color}`);} printColor() {console.log(`Color of ${this.name} is ${this.color}`);}} let apple = new Apple('Apple', 'Red'); // Prints: // Calling Fruit constructor with name=Apple // Calling Apple constructor name=Apple, color=Red apple.printName(); // Prints: Fruit name: Apple apple.printColor(); // Prints: Color of Apple is Red Here, in the Apple class, super calls the constructor of the Fruit class to inherit the name property. If the child's Apple class does not have any constructor, JavaScript will automatically call the parent's constructor when creating an instance of the Apple class.

Redefinition and Override of Methods in Inheritance

During inheritance, there may be instances where a child class needs a different behavior for a method than what the parent class provides. That's where method redefinition, also known as method overriding, comes into play. Method overriding allows a child class to provide a different implementation of a method that is already defined by its parent class. By using the same method name, with the same parameters in the child class, the parent class's method will be overridden. Here's a practical example: JavaScript class Parent {greet() {console.log('Hello from Parent');}} class Child extends Parent {// Method override greet() {console.log('Hello from Child');}} const child = new Child(); child.greet(); // prints: Hello from Child In the code above, the Child class overrides the greet() method of Parent . When we call the greet() method on an instance of Child, the message from the Child class is printed, not from the Parent class. It's a Flexibility feature of OOP that allows us to make our classes more specific and fitting for their intended use. Always handle with care — respect the intended use of inherited methods and make sure your updated method suits your class's needs!