How to Get the Class Name of an Object in JavaScript

Sahil Bhosale Feb 02, 2024
How to Get the Class Name of an Object in JavaScript

A constructor is automatically created inside the class in object-oriented programming whenever we define a class. It will be present inside the class, but it will not be visible. It only gets created when a programmer doesn’t define it explicitly. This constructor is called a default constructor.

We are interested in understanding constructors because the constructors have the same name as the class name. So, it’s easy for us to get the class name of an object in JavaScript using its constructor name.

It doesn’t matter whether the constructor is a default constructor or you create it (the programmer); the constructor’s name will always be the same as its class name.

Get the Class Name of an Object Using the constructor Function in JavaScript

To create an object of a class, we first have to call its constructor. After calling the constructor, we store its reference inside a variable so that later we can do whatever we want with that object. Let’s understand this with an example.

Here, we have an empty class called Person. We create an object of this class using the new keyword and call its default constructor Person(). Then we store it inside a variable called obj.

Now that we have created an object of a Person class, let’s get the object’s class name with the help of its constructor.

To get the name of a constructor, we can use a built-in function present inside JavaScript called constructor. It will return a function. To get the specific class name, we have to use the name property of the constructor function.

This is shown in the below code snippet.

class Person {}

var obj = new Person();
console.log(obj.constructor.name);

Output:

Person

You can also create a function inside a class that will return the above constructor function. And after creating an object of this class, you can call this function any number of times and get the class name of that object.

This is shown in the below code snippet.

class Person {
  getClassName() {
    return this.constructor.name;
  }
}

Here, we have to use a this keyword that will reference the current object on which the getClassName() method is being called and return its class name.

The only concern with this is that the constructor’s name will change after minification if you’re minifying the JavaScript. And if you called the getClassName function, it will return some other class name that will be present after minification and not Person.

Also, the name property is not supported below IE9. It is not a big concern as most users use modern browsers like Chrome and Firefox.

Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

Related Article - JavaScript Object