Method overriding in Javascript - Mini Project: Build & Apply

Method overriding

📖 Scenario: Imagine you have a basic Vehicle class that can describe a vehicle's sound. You want to create a more specific Car class that changes the sound to something unique for cars.

🎯 Goal: You will create a Vehicle class with a makeSound method. Then, you will create a Car class that overrides the makeSound method to show a different sound. Finally, you will print the sounds from both classes.

📋 What You'll Learn

Create a class called Vehicle with a method makeSound that returns the string 'Generic vehicle sound'.

Create a class called Car that extends Vehicle.

Override the makeSound method in Car to return the string 'Vroom!'.

Create instances of both Vehicle and Car.

Print the result of calling makeSound on both instances.

💡 Why This Matters

🌍 Real World

Method overriding is used when you want a child class to change or extend the behavior of a parent class. For example, different types of vehicles make different sounds, so overriding lets each type show its own sound.

💼 Career

Understanding method overriding is important for writing clean, reusable code in object-oriented programming. It is a common skill needed in software development jobs involving JavaScript or other object-oriented languages.

1

Create the Vehicle class

Create a class called Vehicle with a method makeSound that returns the string 'Generic vehicle sound'.

Javascript

// Your code here

Hint

Use class Vehicle {} and inside it define makeSound() that returns the string.

2

Create the Car class that extends Vehicle

Create a class called Car that extends Vehicle.

Javascript

class Vehicle {
    makeSound() {
        return 'Generic vehicle sound';
    }
}

// Your code here

Hint

Use class Car extends Vehicle {} to create the subclass.

3

Override the makeSound method in Car

Inside the Car class, override the makeSound method to return the string 'Vroom!'.

Javascript

class Vehicle {
    makeSound() {
        return 'Generic vehicle sound';
    }
}

class Car extends Vehicle {
    // Your code here
}

Hint

Define makeSound() inside Car that returns 'Vroom!'.

4

Create instances and print sounds

Create an instance called vehicle of the Vehicle class and an instance called car of the Car class. Then, print the result of calling makeSound() on both vehicle and car.

Javascript

class Vehicle {
    makeSound() {
        return 'Generic vehicle sound';
    }
}

class Car extends Vehicle {
    makeSound() {
        return 'Vroom!';
    }
}

// Your code here

Hint

Create instances with new Vehicle() and new Car(). Use console.log() to print the sounds.

Practice

1. What does method overriding allow a child class to do in JavaScript?

easy

A. Replace a method from the parent class with a new version

B. Create a new method with a different name

C. Delete a method from the parent class

D. Call a method without defining it

Solution

1. Step 1: Recall method overriding concept

   Method overriding means a child class uses the same method name as the parent to change its behavior.

2. Step 2: Identify what overriding does

   It replaces the parent's method with a new version in the child class.

3. Final Answer:

   Replace a method from the parent class with a new version -> Option A

4. Quick Check:

   Method overriding = Replace parent method [OK]

Hint: Same method name in child replaces parent method [OK]

Common Mistakes:

• Thinking overriding creates a new method with a different name
• Believing overriding deletes parent methods
• Confusing overriding with method calling

2. Which of the following is the correct syntax to override a method greet() in a child class Dog that extends Animal?

easy

A. class Dog extends Animal { greet = () => { console.log('Woof!'); } }

B. class Dog extends Animal { function greet() { console.log('Woof!'); } }

C. class Dog extends Animal { greet() { console.log('Woof!'); } }

D. class Dog extends Animal { var greet() { console.log('Woof!'); } }

Solution

1. Step 1: Check method syntax in class

   In JavaScript classes, methods are defined without keywords like function or var inside the class body.

2. Step 2: Identify correct method override syntax

   class Dog extends Animal { greet() { console.log('Woof!'); } } correctly defines greet() as a method inside the class body.

3. Final Answer:

   class Dog extends Animal { greet() { console.log('Woof!'); } } -> Option C

4. Quick Check:

   Method override syntax = methodName() { } [OK]

Hint: Use methodName() { } inside class to override [OK]

Common Mistakes:

• Using function keyword inside class method
• Using var or let to define methods inside class
• Using arrow functions incorrectly for overriding

3. What will be the output of the following code?

class Animal {
  speak() { return 'Animal sound'; }
}
class Cat extends Animal {
  speak() { return 'Meow'; }
}
const pet = new Cat();
console.log(pet.speak());

medium

A. 'Meow'

B. Error: speak is not a function

C. undefined

D. 'Animal sound'

Solution

1. Step 1: Identify method overriding in Cat class

   The speak() method in Cat replaces the one in Animal.

2. Step 2: Check which method is called on pet

   Since pet is an instance of Cat, Cat's speak() runs, returning 'Meow'.

3. Final Answer:

   'Meow' -> Option A

4. Quick Check:

   Child method runs = 'Meow' [OK]

Hint: Child class method overrides parent method output [OK]

Common Mistakes:

• Expecting parent method output instead of child
• Confusing instance type with method called
• Assuming undefined or error due to override

4. Find the error in this code that tries to override the run() method:

class Vehicle {
  run() {
    console.log('Vehicle running');
  }
}
class Car extends Vehicle {
  run = () => {
    console.log('Car running fast');
  }
}

medium

A. run method should be static to override

B. Arrow function syntax is invalid for method overriding in class

C. Missing super.run() call inside overridden method

D. No error, code works fine

Solution

1. Step 1: Check method definition style in class

   Class methods should be defined using method syntax, not arrow functions assigned to properties.

2. Step 2: Identify why arrow function causes error

   Using run = () => {} creates a class field, not a proper method, so it does not override the parent method correctly.

3. Final Answer:

   Arrow function syntax is invalid for method overriding in class -> Option B

4. Quick Check:

   Override needs method syntax, not arrow function [OK]

Hint: Override with method(), not arrow function [OK]

Common Mistakes:

• Using arrow functions inside class for overriding
• Forgetting method syntax rules
• Thinking super call is mandatory for override

5. You have a parent class Shape with a method area() that returns 0. You want to create a child class Rectangle that overrides area() to return width x height. Which code correctly implements this?

hard

A. class Rectangle extends Shape {
constructor(w, h) {
super();
this.w = w;
this.h = h;
}
area = () => this.w * this.h;
}

B. class Rectangle extends Shape {
constructor(w, h) {
this.w = w;
this.h = h;
}
area() {
return w * h;
}
}

C. class Rectangle extends Shape {
area(w, h) {
return w * h;
}
}

D. class Rectangle extends Shape {
constructor(w, h) {
super();
this.w = w;
this.h = h;
}
area() {
return this.w * this.h;
}
}

Solution

1. Step 1: Check constructor and property setup

   class Rectangle extends Shape { constructor(w, h) { super(); this.w = w; this.h = h; } area() { return this.w * this.h; } } correctly calls super() and assigns width and height to this.

2. Step 2: Verify method overriding and usage of properties

   The area() method uses this.w and this.h to calculate area, correctly overriding the parent method.

3. Final Answer:

   class Rectangle extends Shape { constructor(w, h) { super(); this.w = w; this.h = h; } area() { return this.w * this.h; } } -> Option D

4. Quick Check:

   Override with constructor + this properties + method [OK]

Hint: Use constructor with super() and this.prop for override [OK]

Common Mistakes:

• Forgetting to call super() in constructor
• Using parameters inside area() instead of properties
• Defining area as arrow function (less common but works differently)