Inheritance using classes in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of method overriding in class inheritance

What is the output of the following JavaScript code?

Javascript

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

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

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

A undefined

B TypeError

C "Bark"

D "Animal sound"

💡 Hint

Look at which class's speak method is called by the Dog instance.

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

❓ Predict Output

intermediate

Output of super keyword in subclass method

What will this code print to the console?

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 "Vehicle started and car is ready"

B "Vehicle started"

C "Car started and car is ready"

D ReferenceError

💡 Hint

super calls the method from the parent class.

The Car's start method calls super.start(), which returns "Vehicle started", then adds " and car is ready".

🔧 Debug

advanced

Identify the error in subclass constructor

What error will this code produce when run?

Javascript

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Employee extends Person {
  constructor(name, id) {
    this.id = id;
    super(name);
  }
}

const emp = new Employee("Alice", 123);
console.log(emp.name, emp.id);

A TypeError: Cannot read property 'name' of undefined

B ReferenceError: Must call super constructor before accessing 'this' in derived class

C undefined 123

D Alice 123

💡 Hint

In subclass constructors, super() must be called before using 'this'.

JavaScript requires calling super() before accessing 'this' in subclass constructors. Here, 'this.id = id;' is before super(), causing ReferenceError.

❓ Predict Output

advanced

Output of static method inheritance

What will be printed by this code?

Javascript

class Parent {
  static greet() {
    return "Hello from Parent";
  }
}

class Child extends Parent {}

console.log(Child.greet());

A undefined

B "Hello from Child"

C TypeError: Child.greet is not a function

D "Hello from Parent"

💡 Hint

Static methods are inherited by subclasses.

Static methods belong to the class itself and are inherited by subclasses unless overridden.

🧠 Conceptual

expert

Understanding prototype chain in class inheritance

Given the following code, what is the value of Object.getPrototypeOf(dog) === Dog.prototype and Object.getPrototypeOf(Dog.prototype) === Animal.prototype?

Javascript

class Animal {}
class Dog extends Animal {}
const dog = new Dog();

A true and true

B false and true

C true and false

D false and false

💡 Hint

Remember how JavaScript sets prototypes for instances and classes.

dog's prototype is Dog.prototype, so Object.getPrototypeOf(dog) === Dog.prototype is true. Dog.prototype's prototype is Animal.prototype, so Object.getPrototypeOf(Dog.prototype) === Animal.prototype is true.