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.