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.

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)