Method overriding in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of overridden method in subclass

What is the output of the following JavaScript code?

Javascript

class Animal {
  speak() {
    return "Animal speaks";
  }
}

class Dog extends Animal {
  speak() {
    return "Dog barks";
  }
}

const pet = new Dog();
console.log(pet.speak());

A "Dog barks"

B undefined

C "Animal speaks"

D TypeError

💡 Hint

Remember that the subclass method overrides the parent class method.

The Dog class overrides the speak() method of Animal. So calling speak() on a Dog instance returns "Dog barks".

❓ Predict Output

intermediate

Calling super method in overridden method

What will this code output when run?

Javascript

class Vehicle {
  start() {
    return "Vehicle started";
  }
}

class Car extends Vehicle {
  start() {
    return super.start() + " and Car is ready";
  }
}

const myCar = new Car();
console.log(myCar.start());

A ReferenceError

B "Car is ready"

C "Vehicle started and Car is ready"

D "Vehicle started"

💡 Hint

Look at how super.start() is used inside the overridden method.

The Car class calls the parent Vehicle's start() method using super.start(), then adds its own message.

❓ Predict Output

advanced

Overriding method with different parameters

What is the output of this code snippet?

Javascript

class Printer {
  print(message) {
    return `Printing: ${message}`;
  }
}

class ColorPrinter extends Printer {
  print(message, color) {
    return `Printing: ${message} in ${color}`;
  }
}

const cp = new ColorPrinter();
console.log(cp.print("Hello"));

A "Printing: Hello in undefined"

B TypeError

C "Printing: Hello"

D SyntaxError

💡 Hint

Check how JavaScript handles missing arguments in overridden methods.

The ColorPrinter's print method expects two parameters but only one is passed, so color is undefined.

❓ Predict Output

advanced

Overriding method and using polymorphism

What will be the output of this code?

Javascript

class Shape {
  area() {
    return 0;
  }
}

class Square extends Shape {
  constructor(side) {
    super();
    this.side = side;
  }
  area() {
    return this.side * this.side;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }
  area() {
    return Math.PI * this.radius * this.radius;
  }
}

const shapes = [new Square(3), new Circle(2)];
const areas = shapes.map(shape => shape.area());
console.log(areas);

A TypeError

B [0, 0]

C [NaN, NaN]

D [9, 12.566370614359172]

💡 Hint

Each subclass overrides area() to calculate its own area.

Square's area is 3*3=9, Circle's area is π*2*2 ≈ 12.566. The map collects these values.

❓ Predict Output

expert

Overriding method with dynamic dispatch and prototype chain

What is the output of this code?

Javascript

function Person() {}
Person.prototype.greet = function() {
  return "Hello from Person";
};

function Employee() {}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.greet = function() {
  return "Hello from Employee";
};

const emp = new Employee();
console.log(emp.greet());
console.log(Object.getPrototypeOf(emp) === Employee.prototype);
console.log(Object.getPrototypeOf(Object.getPrototypeOf(emp)) === Person.prototype);

A

"Hello from Person"
true
false

B

"Hello from Employee"
true
true

C

"Hello from Employee"
false
true

D TypeError

💡 Hint

Check the prototype chain and which greet method is called.

emp.greet() calls Employee's greet because it overrides Person's. The prototype chain is set correctly.

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)