Difference between Composition and Inheritance in JavaScript

JavascriptFront End TechnologyProgramming ScriptsWeb Development

In JavaScript, there are two main ways to reuse code - composition and inheritance. Both have their pros and cons, and it's important to understand the difference between them before choosing which one to use in your own code.

Composition in JavaScript

With composition, you create a new object that contains the functionality you want, and then you assign that object to a variable. For example, let's say you have a function that calculates the area of a rectangle. You can use composition to create a new object that contains that function, and then you can use that object to calculate the area of any rectangle you want −

<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <script> var rect = { width: 10, height: 20, calcArea: function() { return this.width * this.height; } }; var area = rect.calcArea(); document.getElementById("result").innerHTML = area </script> </body> </html>

As you can see, composition is a great way to reuse code if you only need to use that code in one place.

Inheritance in JavaScript

With inheritance, you create a new object that inherits the functionality of an existing object. For example, let's say you have a function that calculates the area of a rectangle. You can use inheritance to create a new object that inherits that function, and then you can use that object to calculate the area of any rectangle you want −

<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <script> var Rectangle = function(width, height) { this.width = width; this.height = height; }; Rectangle.prototype.calcArea = function() { return this.width * this.height; }; var rect = new Rectangle(10, 20); var area = rect.calcArea(); document.getElementById("result").innerHTML = area </script> </body> </html>

As you can see, inheritance is a great way to reuse code if you need to use that code in multiple places.

Difference between Composition and Inheritance in JavaScript

The following table highlights the major differences between Composition and Inheritance in JavaScript −

Basis of comparison Composition Inheritance

Definition

With composition, you create a new object that contains the functionality you want, and then you assign that object to a variable.

With inheritance, you create a new object that inherits the functionality of an existing object.




When to use?

Composition is typically used for one-off objects that don't need to be reused. For example, if you have a website with a contact form, you might create a contact form object with all the necessary functions, and then you would use that object to create the contact form on the page. Once the form is submitted, you would then discard the object.

Inheritance is typically used for objects that need to be reused multiple times. For example, if you have a website with a contact form, you might create a contact form object with all the necessary functions, and then you would use that object to create the contact form on the page. Once the form is submitted, you would then save the object in a database so that you can reuse it later.




Disadvantages

One disadvantage of composition is that it can be more difficult to debug because you have to trace the code through multiple objects.

Another disadvantage of composition is that it can be more difficult to add new functionality. For example, if you want to add a new function to the contact form object, you would have to create a new object and then assign the new object to the variable.

One disadvantage of inheritance is that it can be more difficult to understand because the code can get spread out across multiple objects.

Another disadvantage of inheritance is that it can be more difficult to change the behavior of existing code. For example, if you want to change the way the contact form object calculates the area, you would have to change the code in the object that inherits the contact form object.

Conclusion

Composition and inheritance are both great ways to reuse code in JavaScript. Composition is typically used for one-off objects, while inheritance is typically used for objects that need to be reused multiple times.

raja
Updated on 10-Oct-2022 11:49:39

Advertisements