Difference Between Function Overloading and Function Overriding in JavaScript

Function overloading and function overriding are two important concepts in object-oriented programming (OOP). Function overloading allows the creation of multiple functions with the same name but different parameters. Function overriding allows the subclass or child class to provide the specific implementation of the method that is already defined in its superclass or parent class.

These are the following topics that we are going to discuss:

What is Function Overloading?

Function overloading is the ability to create multiple functions with the same name but different parameters. However, JavaScript does not natively support function overloading as seen in languages like C++ or Java. Instead, we can achieve a similar effect using the workarounds such as the checking the number and types of the arguments within the single function definition.

Example: In the below example, the display function behave differently based on type of its argument.

function display(value) {
    if (typeof value === 'number') {
        console.log("Number: " + value);
    } else if (typeof value === 'string') {
        console.log("String: " + value);
    }
}
display(32);
display("Hello"); 

Number: 32
String: Hello

What is Function Overriding?

The Function overriding occurs when a subclass or child class provides the specific implementation for the method that is already defined in its superclass or parent class. This allows a subclass to the tailor the method to its own needs. Function overriding in JavaScript allows a subclass or child class to provide a specific implementation of a method that is already defined in its superclass or parent class. This enables the child class to show the behavior of the inherited method that can be manipulated by the child class itself.

Example: The Child class overrides the display method of the Parent class. When the display method is called on the instance of Child and overridden method in the Child class is executed.

class Parent {
    display() {
        console.log("Display method from Parent class");
    }
}
class Child extends Parent {
    display() {
        console.log("Display method from Child class");
    }
}
let obj = new Child();
obj.display();

Display method from Child class

Difference Between Function Overloading and Function Overriding in JavaScript

S

subramanyasmgm

Follow

Improve

Article Tags :

• Difference Between
• JavaScript
• Web Technologies