Understanding the difference between interfaces, classes, and objects in JavaScript

Introduction

I came across the following statements while studying from the MDN web docs:

• "The URLSearchParams interface defines utility methods to work with the query string of a URL."

• "The URLSearchParams() constructor creates a new URLSearchParams object."

And I thought to myself:

• What is URLSearchParams?

• What is URLSearchParams()?

• And what is a URLSearchParams object?

The concepts were overlapping in my head, and I needed to clearly distinguish them. So as I studied more, I took some notes, rephrased some definitions, came up with an example, and finally decided to publish my notes as an article.

Come on, and let's make some incredible findings.

So what do these mean?

• The URLSearchParams interface defines utility methods to work with the query string of a URL.

• The URLSearchParams() constructor creates a new URLSearchParams object.

Take a few seconds and ponder the highlighted words.

💭

💭

💭

There are three concepts I see in these statements:

1. The URLSearchParams - which is the interface

2. The URLSearchParams() - which is a constructor from a class

3. The URLSearchParams object - which is simply the object created by the class' constructor

So the three concepts for discussion are interface, class, and object.

Interface

An interface is a specification, a guide, or a blueprint that defines how an object should operate or what an object should have. It lets us know the set of methods and properties that an object or a class should implement. It is not necessarily an object; it is not a concrete entity but just a guide that defines an object.

Class

A class is also somewhat of a blueprint for creating objects, but it isn't just a set of declarations like the interface. A class contains the actual, or real-life, implementation of the methods and the properties that the interface wants the object to have. This class (through its constructor) is responsible for passing those implementations down to the objects that will be created.

Object

An object is an instance of a class that is created based on the specifications of the interface. An object is a concrete entity that has the actual methods and properties defined by the interface. Simply put, all objects are conceived by interfaces and brought to reality by a class' constructor. Objects can be manipulated, modified, and interacted with. They are real and not just abstract, like the interface.

Hold on if you don't yet understand. Let's use a relatable example.

The Blueprint (Interface) 🗺️

You have a large blueprint containing sketches of the next fastest car, the board also contains well-written documentation of all the parts of the car and all of its functionalities. This blueprint is the interface. It is not yet a concrete car but it just defines and declares everything about the car, showing the colour of the car, the size of the engine, and the components that'll make up the car, etc.

The Assembly Plant (Constructor) 🏭

There is no way a car can just jump out of the board without something actually creating it. We need something to translate your ideas into reality. This is where an assembly plant comes in, something has to be responsible for bringing the car to reality; from blueprint to life, so you can sell it to your customers. The assembly plant (class) understands the blueprint well, it is capable of creating every part of the car specified by the blueprint and has the machine (constructor) necessary to bring the car (object) to life.

The Car (Object) 🏎️

Finally, you need something that people want to purchase and possess. The car would inherit everything you planned for it to have from the assembly plant, which consists of the machines for making the doors, the engine, and the circuits. The car cannot just jump out of the board, remember. So the result of the assembly plant gives birth to the real car. Now you can sell to your customers! 😉

In summary, an interface in JavaScript tells you the makeup and capabilities of an object. A class has the actual implementations specified by this interface and can create an object via its constructor. An object is the final product created by the class' constructor.

Examples of interfaces in JavaScript

Source: MDN

• The URLSearchParams interface, which defines utility methods to work with the query string of a URL. The URLSearchParams() constructor creates and returns a new URLSearchParams object.

• The URL interface is used to parse, construct, normalize, and encode URLs. The URL() constructor returns a newly created URL object representing the URL defined by the parameters.

• The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values.

• The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

• The AbortSignal interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort it if required via an AbortController object.

An extra note...

There are two ways to create objects in JavaScript. By using the literal notation or by using a constructor (as we learned in this article). Since objects created using a constructor have an interface, they are usually called by their interface names. This can assist you in naming the variables that will store the objects.

Take a look:

// To create an URLSearchParams object
let searchParams = new URLSearchParams();

// To create an URL object
let url = new URL();

// To create an AbortController object
let abortController = new AbortController();

// To create an object literal
let car = {
    name: "Camree",
    color: "Purple",
    seats: 2,
    isElectric: true,
}

On the other hand, naming a variable that will store an object literal may not be as easy since you are just creating it out of thin air and not from an interface like in the above examples.

Conclusion

Voila! You have come to the end of this article, congratulations. As a JavaScript developer, working with objects is something that'll be a part of you throughout your journey. Hence, it is highly important to understand how they work and their association with other concepts in JavaScript, as we have learned in this article.

Before you go, kindly let me know what you think about this article in the comment section below. I appreciate your feedback much more than you think. Thank you! 😉