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.

Practice

1.

What does the extends keyword do in JavaScript classes?

easy

A. It makes one class inherit properties and methods from another class.

B. It creates a new instance of a class.

C. It defines a private method inside a class.

D. It deletes a class from memory.

Solution

1. Step 1: Understand the role of extends

   The extends keyword is used to create a child class that inherits from a parent class.

2. Step 2: Identify inheritance behavior

   This means the child class gets all properties and methods of the parent class automatically.

3. Final Answer:

   It makes one class inherit properties and methods from another class. -> Option A

4. Quick Check:

   extends means inheritance [OK]

Hint: Remember: extends means 'inherits from' [OK]

Common Mistakes:

• Confusing extends with creating instances
• Thinking extends deletes classes
• Mixing extends with private methods

2.

Which of the following is the correct syntax to create a child class Dog that inherits from a parent class Animal?

?

easy

A. class Dog extends Animal {}

B. class Dog inherits Animal {}

C. class Dog : Animal {}

D. class Dog Animal extends {}

Solution

1. Step 1: Recall JavaScript inheritance syntax

   JavaScript uses class Child extends Parent {} to inherit.

2. Step 2: Match syntax to options

   Only class Dog extends Animal {} matches the correct syntax: class Dog extends Animal {}.

3. Final Answer:

   class Dog extends Animal {} -> Option A

4. Quick Check:

   Correct syntax uses extends [OK]

Hint: Use 'extends' keyword to inherit classes [OK]

Common Mistakes:

• Using 'inherits' instead of 'extends'
• Using ':' like other languages
• Wrong order of keywords

3.

What will be the output of this code?

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

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

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

medium

A. undefined

B. "Animal sound"

C. "Bark"

D. Error: speak is not a function

Solution

1. Step 1: Understand method overriding in child class

   The Dog class overrides the speak method from Animal to return "Bark".

2. Step 2: Check which method is called

   When pet.speak() is called, it uses the Dog version, so it returns "Bark".

3. Final Answer:

   "Bark" -> Option C

4. Quick Check:

   Child method overrides parent method [OK]

Hint: Child method replaces parent method if same name [OK]

Common Mistakes:

• Expecting parent method output
• Thinking both methods run
• Confusing method names

4.

Find the error in this code and choose the fix:

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

class Dog extends Animal {
  constructor(name) {
    this.name = name;
  }
}

medium

A. Add extends Animal to Dog class.

B. Add super(name); as the first line in Dog's constructor.

C. Change this.name to super.name in Dog's constructor.

D. Add super(name); as the last line in Dog's constructor.

Solution

1. Step 1: Identify constructor error in child class

   In JavaScript, a child class constructor must call super() before using this.

2. Step 2: Fix by calling super(name);

   Adding super(name); as the first line in Dog's constructor calls the parent constructor properly.

3. Final Answer:

   Add super(name); as the first line in Dog's constructor. -> Option B

4. Quick Check:

   Call super() before this in child constructor [OK]

Hint: Always call super() first in child constructor [OK]

Common Mistakes:

• Using this before super()
• Forgetting to call super()
• Trying to access super.name directly

5.

Given these classes, what will console.log(cat.describe()); print?

class Animal {
  constructor(name) {
    this.name = name;
  }
  describe() {
    return `This is an animal named ${this.name}`;
  }
}

class Cat extends Animal {
  constructor(name, color) {
    super(name);
    this.color = color;
  }
  describe() {
    return `${super.describe()} and its color is ${this.color}`;
  }
}

const cat = new Cat("Whiskers", "black");
console.log(cat.describe());

hard

A. "This is an animal named Whiskers"

B. Error: super.describe is not a function

C. "This is a black animal named Whiskers"

D. "This is an animal named Whiskers and its color is black"

Solution

1. Step 1: Understand super method call in child

   The Cat class calls super.describe() to get the parent description.

2. Step 2: Combine parent and child descriptions

   The child adds its color info, so the full string is "This is an animal named Whiskers and its color is black".

3. Final Answer:

   "This is an animal named Whiskers and its color is black" -> Option D

4. Quick Check:

   super.method() adds parent info in child method [OK]

Hint: Use super.method() to extend parent method output [OK]

Common Mistakes:

• Ignoring super.describe() call
• Expecting only child or parent text
• Thinking super.describe is undefined