Method overriding in Javascript - Step-by-Step Execution

Concept Flow - Method overriding

Define Parent Class with method

↓

Define Child Class overriding method

↓

Create Child instance

↓

Call method on Child instance

↓

Child's method runs, not Parent's

↓

Output result

Method overriding happens when a child class provides its own version of a method already defined in its parent class. When called on the child, the child's method runs.

Execution Sample

Javascript

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

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

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

This code shows a Dog class overriding the speak method of its parent Animal class. Calling speak on Dog runs Dog's version.

Execution Table

Step	Action	Evaluation	Result
1	Define class Animal with speak method	(new Animal()).speak()	Returns 'Animal speaks'
2	Define class Dog extending Animal, override speak	(new Dog()).speak()	Returns 'Dog barks'
3	Create instance pet of Dog	pet = new Dog()	pet is Dog instance
4	Call pet.speak()	pet.speak()	Runs Dog.speak(), returns 'Dog barks'
5	Output result	console.log output	'Dog barks' printed

💡 Execution stops after printing overridden method output from Dog instance

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
pet	undefined	Dog instance created	Dog instance	Dog instance

Key Moments - 2 Insights

Why does pet.speak() run Dog's method, not Animal's?

Because Dog overrides speak(), so calling speak() on a Dog instance uses Dog's version (see execution_table step 4).

What if Dog did not override speak()?

Then pet.speak() would run Animal's speak() method, since Dog inherits it (not shown in table but implied).

Visual Quiz - 3 Questions

Look at the execution table, what does pet.speak() return at step 4?

A "Animal speaks"

B "Dog barks"

C "pet speaks"

D "undefined"

💡 Hint

Check execution_table row with Step 4, Result column

At which step is the Dog instance created?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table row describing instance creation

If Dog did not override speak(), what would pet.speak() return?

A "Animal speaks"

B "Dog barks"

C "undefined"

D Error

💡 Hint

Recall inheritance behavior explained in key_moments and implied in execution_table

Concept Snapshot

Method overriding lets a child class replace a parent's method.
Syntax: child class defines method with same name.
Calling method on child instance runs child's version.
If no override, parent's method runs.
Used to customize behavior in subclasses.

Full Transcript

Method overriding in JavaScript means a child class provides its own version of a method already defined in its parent class. In the example, Animal has a speak method returning 'Animal speaks'. Dog extends Animal and overrides speak to return 'Dog barks'. When we create a Dog instance pet and call pet.speak(), the Dog's speak method runs, printing 'Dog barks'. This shows how overriding changes behavior for child instances. If Dog did not override speak, pet.speak() would run Animal's method instead. This is useful to customize or extend behavior in subclasses while keeping the same method name.

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)