isotropic-2022
Share
Blog
Search
Menu

How to get the Class Name of an Object in JavaScript

By Greg Murray
|
Last updated on April 21st, 2022
|

While JavaScript is not strictly typed like languages such as C# or Java, it does still have class support. Originally, working with classes was mostly done through “constructor” functions and methods added to the prototype of that function which allowed you to use a JavaScript class similar to how you would in object-oriented programming languages. With ES6, you are now able to define classes in a more familiar syntax even though the underlying structure still functions as it did before.

The more you use classes, the more likely you will need to access meta data about a given class. So, how do you get a class’s name in JavaScript?

  • If you need the class name of an object, use yourObject.constructor.name
  • If you just need the name of a class in a static context, use Class.name

What’s the difference? Here is an example:

class Blog { review() { console.log("This blog is great!"); } } const myBlog = new Blog(); console.log(myBlog.constructor.name); // 'Blog' console.log(myBlog.name); // undefined console.log(Blog.name); // 'Blog' console.log(Blog.constructor.name); // undefined

As you can see above, both solutions are similar but there is an important distinction. The name property is undefined once the class is instantiated so you will need to use Blog.constructor.name if you are trying to get the class name of an object. If you only want a string representation of a class’s name, and you have the class, just use Blog.name. Something important to keep in mind is that if you decide to add a static name property or get method to your class, you will effectively replace the original name of that class:

class Person { static name = "Human"; } const person = new Person(); console.log(person.constructor.name); // 'Human' console.log(Person.name); // 'Human' class Vehicle { static get name() { return "Automobile"; } } const vehicle = new Vehicle(); console.log(vehicle.constructor.name); // 'Automobile' console.log(Vehicle.name); // 'Automobile'

Other than that, the process of getting a class’s name in JavaScript is pretty simple despite not being completely straightforward. Enjoy!

The Isotropic Codex is a collection of code snippets and education for WordPress, web and WooCommerce developers.
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Article By
Greg Murray
Contributors/Editors
notloggedin
I’m a passionate and driven web developer with an eye for design and appreciation for the human aspect of technology. I am experienced with building websites for small to medium businesses or large web applications for big businesses. Websites can be custom made using cutting edge technology and responsive design or created using the website builder of your choice.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram