Method overriding in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to override the greet method in the child class.

Javascript

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

class Child extends Parent {
  greet() {
    return [1];
  }
}

const c = new Child();
console.log(c.greet());

Drag options to blanks, or click blank then click option'

A"Hello from Parent"

Bsuper.greet()

Cgreet()

D"Hello from Child"

Attempts:

3 left

💡 Hint

Common Mistakes

Using super.greet() instead of a new string.

Returning the parent's greeting string.

Calling greet() inside itself causing recursion.

The Child class overrides the greet method by returning a new string "Hello from Child".

2fill in blank

medium

Complete the code to call the parent class method inside the overridden method.

Javascript

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

class Dog extends Animal {
  sound() {
    return [1] + " and Bark";
  }
}

const d = new Dog();
console.log(d.sound());

Drag options to blanks, or click blank then click option'

Asound()

Bthis.sound()

Csuper.sound()

D"Some sound"

Attempts:

3 left

💡 Hint

Common Mistakes

Using this.sound() causes infinite recursion.

Calling sound() without context causes error.

Using a string literal instead of calling parent method.

Using super.sound() calls the parent class method inside the overridden method.

3fill in blank

hard

Fix the error in the overridden method to correctly call the parent method.

Javascript

class Vehicle {
  move() {
    return "Moving";
  }
}

class Car extends Vehicle {
  move() {
    return [1] + " fast";
  }
}

const car = new Car();
console.log(car.move());

Drag options to blanks, or click blank then click option'

Asuper.move()

BVehicle.move()

Cthis.move()

Dmove()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling Vehicle.move() directly causes error.

Using this.move() causes infinite recursion.

Calling move() without context causes error.

super.move() correctly calls the parent class method inside the overridden method.

4fill in blank

hard

Fill in the blank to override the method and call the parent method inside it.

Javascript

class Person {
  introduce() {
    return "I am a person";
  }
}

class Student extends Person {
  introduce() {
    return [1] + ", and I am a student";
  }
}

const s = new Student();
console.log(s.introduce());

Drag options to blanks, or click blank then click option'

Asuper.introduce()

B"I am a student"

Cthis.introduce()

DPerson.introduce()

Attempts:

3 left

💡 Hint

Common Mistakes

Using this.introduce() causes recursion.

Calling Person.introduce() directly causes error.

Not calling the parent method at all.

super.introduce() calls the parent method, and the string "I am a student" is added to override the message.

5fill in blank

hard

Fill in the blanks to override a method, call the parent method, and add extra behavior.

Javascript

class Printer {
  print() {
    return "Printing document";
  }
}

class ColorPrinter extends Printer {
  print() {
    const base = [1];
    const extra = [2];
    return base + extra;
  }
}

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

Drag options to blanks, or click blank then click option'

Asuper.print()

B" in color"

C"Printing document"

Dthis.print()

Attempts:

3 left

💡 Hint

Common Mistakes

Using this.print() causes infinite recursion.

Using a string literal instead of calling super.print().

Not adding extra behavior to the parent's output.

super.print() calls the parent method, the extra string " in color" is added, and the base string is the parent's print output.