Method overriding in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is method overriding in JavaScript?

Method overriding is when a child class provides its own version of a method that already exists in its parent class. The child method replaces the parent method when called on the child object.

beginner

How do you override a method in a JavaScript class?

You create a method in the child class with the same name as the method in the parent class. When you call this method on the child object, the child's version runs instead of the parent's.

beginner

What happens if you call a method on a child object that is overridden?

The child class's method runs, not the parent class's method. This lets the child customize or change behavior inherited from the parent.

intermediate

Can you still call the parent class's method from the overridden method in the child class?

Yes, by using the super keyword. For example, inside the child method you can call super.methodName() to run the parent method.

beginner

Why is method overriding useful in programming?

It allows child classes to change or extend the behavior of parent classes without changing the parent code. This helps reuse code and customize behavior easily.

What keyword is used in JavaScript to call a parent class's method from an overridden method?

A this

B parent

C super

D base

The super keyword is used to access methods from the parent class inside the child class.

If a child class overrides a method, which method runs when called on a child object?

A Child class method

B Parent class method

C Both methods run

D Error occurs

The child class method overrides the parent method and runs instead.

What is the main purpose of method overriding?

A To hide parent class methods

B To change or extend behavior inherited from the parent

C To create new methods unrelated to the parent

D To reuse parent class methods without changes

Method overriding lets child classes change or extend the behavior inherited from the parent class.

Which of the following is true about method overriding in JavaScript classes?

A Child class methods must have different names than parent methods

B Parent methods always run before child methods

C Overriding is not possible in JavaScript

D Child class methods replace parent methods with the same name

Child class methods with the same name replace parent methods when called on child objects.

How do you define a method in a child class that overrides a parent method?

A Use the same method name in the child class

B Use a different method name in the child class

C Use the override keyword before the method

D Use the extends keyword inside the method

Overriding happens by defining a method with the same name in the child class.

Explain method overriding in JavaScript and how it helps customize behavior in child classes.

Think about how child classes can change what parent classes do.

Describe how to call a parent class's method from an overridden method in a child class.

Remember the special keyword for accessing parent methods.

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)