Javascript getting class name

How to get the Class Name of an Object in JavaScript

The constructor method in JavaScript is a special method of a class for creating and initializing an object instance of that class. The constructor will have the same name as the class name so we can use this to get the Class Name of an object in Javascript using the constructor name.

How to get the Class Name of an Object in JavaScript?

Before we start exploring the answer to this question, let’s familiarize ourselves with some basic concepts.

Class: They are templates/prototypes for creating objects.

Object: It is an entity that has a particular state and behaviour

Constructor: It is a member function of the class. Invoked during the creation of an object using the new keyword. The purpose of a constructor is to initialize a new object and set values for any existing object properties.

Now that basics are clear let us take a look at different solutions available to find the Class Name of an Object in JavaScript with examples.

Solution 1: Get Class Name of an Object Using the constructor Function

While creating an object of the class, the corresponding constructor is called either explicitly or implicitly. If no constructor is defined, the system invokes the default constructor. This object created can be used to return the class name by calling the name property of the constructor function.

*Fact Check: constructor is a function whereas name is a property

[objectName].constructor.name 

Let’s understand this with an example.

class Language <> const l1 = new Language(); console.log(l1.constructor.name);

In the above code snippet, we are creating an empty class named “ Language “. The second line shows constructor invocation for object creation and storing the reference in variable l1 . We can create the object of Language class by using the new keyword and call its default constructor Language() .

Now that we have the object, let’s get the object’s class name. For this, we can use the “ obj. constructor ” function as explained above. It returns a reference to the constructor from which the object got created. It does not refer to the name of the class directly.

To get the specific class name of the object, we have to use the “ name ” property of the constructor function.

Solution 2: Get Class Name of an Object Using Function inside the class

Another way of retrieving the class name of an object can be by creating a function inside the class that will return the object name. We need to use this keyword that will reference to the current object and of which getClassName() method is being called and then it returns it’s class name.

Let’s understand this with an example.

class Language < getClassName() < return this.constructor.name; >> const l1 = new Language (); const objClassName = l1.getClassName(); console.log(objClassName);

In the above example, we are retrieving the object class name through custom functions rather than using the constructors directly.The function “ getClassName() “, as shown in the above example, also uses the Javascript built-in constructor function. Here we use . this keyword so that it returns the current object name in scope.

Firstly, we start by creating and referencing the object of the class Language . Using the reference object, we invoke the method getClassName() .

*Fact check: The approach works for objects created without a constructor function. They have a constructor property that points to the main Object constructor for the specific type.

Let’s have a look at the code below.

console.log([].constructor.name); // Output: Array 

Conclusion

We can get the Class Name of an Object in JavaScript by creating an instance of a class and using constructor method’s name property and another approach is by creating our own function and using this.constructor.name inside it.

Both the above-mentioned solutions deliver the same output. The difference lies in the problem statement that we are addressing. We can opt for the first solution when referring to the direct class-object type relationship. The second solution is suitable for referring to class names through a custom function.

Источник

Element: className property

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

Value

A string variable representing the class or space-separated classes of the current element.

Examples

const el = document.getElementById("item"); el.className = el.className === "active" ? "inactive" : "active"; 

Notes

The name className is used for this property instead of class because of conflicts with the «class» keyword in many languages which are used to manipulate the DOM.

className can also be an instance of SVGAnimatedString if the element is an SVGElement . It is better to get/set the className of an element using Element.getAttribute and Element.setAttribute if you are dealing with SVG elements. However, take into account that Element.getAttribute returns null instead of «» if the element has an empty class attribute.

.setAttribute("class", elm.getAttribute("class")); 

Note: The class is an HTML Attribute, while the className is a DOM Property.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to Get Class Name in JavaScript

JavaScript supports classes that encapsulate methods to manipulate data. Therefore, it is important to get/access the class name in a programming task. Getting the name of the class is possible through a name property of constructor. Moreover, the isPrototypeof() method and instanceof operators are employed to get the class name in JavaScript. These methods are useful for debugging messages.

In this guide, you will learn how to get the class name in JavaScript. The content of this blog is as follows:

Method 1: Get the Class Name Using Name Property

The name property integrates with the object constructor that returns the class name. Therefore, a method is adapted with the name property for getting the class name in JavaScript. It is useful in complex programming tasks to repeatedly utilize the name of a class. The code explains the working of the name property to get the class name:

console.log ( «An example to get the class name» ) ;
class Teacher { }
let obj = new Teacher ( ) ;
console.log ( Teacher.name ) ;
console.log ( obj.constructor.name ) ;

• • First, a class called “Teacher” is created through an empty body.
  • After that, the “obj.constructor” is employed to get the class name with the “name” property in JavaScript.
  • The console.log()method displays the class name by accessing the constructor function.

  

  

  It is observed that the “name” property is utilized to access the class name “Teacher”.

  Method 2: Get the Class Name Using isPrototypeOf() Method

  The isPrototypeOf() method finds out if the existence of an object is a part of another object’s prototype chain. It takes input and returns a Boolean output (true or false) based on the user input. The following example is provided here to get the class name with the isPrototypeOf() method.

  console.log ( «An example to get the class name» ) ;
  class Animal { }
  let obj = new Animal ( ) ;
  console.log ( Animal.prototype.isPrototypeOf ( obj ) ) ;

  The description of the code is given below:

  • • Firstly, a class “Animal” is created, and after that an “obj” object is initialized with a new keyword.
    • Furthermore, the “isPrototypeOf()” method is employed to check the existence of an object by passing “obj”.

    

    

    The output returns a “true” value that validates the access to the class “Animal” in JavaScript.

    Method 3: Get the Class Name Using instanceof Property

    The instanceof property provides a facility to get the class name in JavaScript. Generally, it evaluates the type of object during run time. To find the class name, you can write the class name after the instanceof operator. It returns a Boolean output (true or false value) that validates either you got the class name or not. The following example code makes use of the instanceof operator in JavaScript:

    console.log ( «An example to get the class name» ) ;
    class Vehicle { }
    let veh = new Vehicle ( ) ;
    console.log ( veh instanceof Vehicle ) ;

    In this code, the class name “Vehicle” is accessed through the instanceof operator. After that, the console.log() method is utilized to display the return value.

    

    

    The output displays the “true” value in the console window, which validates the accessibility of the class.

    Conclusion

    JavaScript provides the name property, isPrototypeOf() method, and instanceof operators to get the class name. These methods evaluate the existence of objects and return a Boolean output (true or false values) that validates whether you got the class name or not. These methods are useful for debugging messages. All the latest browsers support these methods. In this blog, you have learned to retrieve the class name with different examples in JavaScript.

    About the author

    Syed Minhal Abbas

    I hold a master’s degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.

    Источник

    How to get the Class name of an Object in JavaScript

    

    JavaScript supports object-oriented programming, which means that you can create classes and objects, and use them to store data.

    One useful thing to be able to know from an object is the name of the class it was created from.

    In this post, we’ll learn how you can get the class name of an object in JavaScript.

    Getting the class name of an object

    First let’s start with a class and an object created from it.

     const triangle = new Shape(); 

    Given the object triangle , we can get the class name of it using the constructor property, which returns a reference to the constructor function that created the object, then using the name property to get the name of the class.

     const triangle = new Shape(); console.log(triangle.constructor.name); 

    The reason this works is you can use the constructor property to get the class of an object, which includes the name, along with other properties.

    Because most things in JavaScript are objects, they will therefore have a valid constructor property.

    Conclusion

    In this post, we’ll learn how you can get the class name of an object in JavaScript by using the constructor property.

    This is useful because it allows you to get the name of the class that created an object, which can be useful for debugging.

    If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!

    Give feedback on this page , tweet at us, or join our Discord !

    Источник