A class instance in JavaScript is an object created from a class using the new keyword. A class defines the structure and behavior, while each instance represents an individual object with its own data.
For example, a Student class can define properties such as name and age. You can create multiple student instances from that class, with each student having different values.
Class instances are an important part of object-oriented programming in JavaScript. They help developers create and manage multiple objects that share common behavior.
In this tutorial, you will learn what class instances are, how to create them, how to access their properties and methods, and how to check whether an object belongs to a particular class.
What Is a Class Instance in JavaScript?
A class instance is an object created from a class. The class acts as a blueprint, defining the properties and methods that its instances can use.
Consider this example:
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
displayDetails() {
console.log(`${this.name} is ${this.age} years old.`);
}
}
const student1 = new Student("Rahul", 20);
student1.displayDetails();Output:
Rahul is 20 years old.In this example:
Studentis the class.new Student("Rahul", 20)creates a class instance.student1is the variable that refers to the instance.nameandageare properties initialized by the constructor.displayDetails()is a method available to the instance.
The instance contains its own property values and can use the methods defined by the class.
To understand how the blueprint works, read about JavaScript Classes.
How to Create Class Instances
You create a class instance by using the new keyword followed by the class name and any required arguments.
Basic Syntax
const objectName = new ClassName(arguments);Here, objectName stores a reference to the newly created instance, ClassName is the class, and arguments are the values passed to its constructor.
Example of Creating an Instance
class Car {
constructor(brand, color) {
this.brand = brand;
this.color = color;
}
}
const car1 = new Car("Toyota", "White");
console.log(car1.brand);
console.log(car1.color);Output:
Toyota
WhiteThe new Car("Toyota", "White") expression creates a new object and initializes its properties through the constructor.
The car1 variable then refers to that object.
Creating Multiple Instances from the Same Class
One of the main advantages of classes is that you can create multiple instances from a single class.
Each instance can have its own property values while sharing the methods defined by the class.
class Employee {
constructor(name, role) {
this.name = name;
this.role = role;
}
displayDetails() {
console.log(`${this.name} works as a ${this.role}.`);
}
}
const employee1 = new Employee("Priya", "Developer");
const employee2 = new Employee("Arun", "Designer");
const employee3 = new Employee("Ayesha", "Data Analyst");
employee1.displayDetails();
employee2.displayDetails();
employee3.displayDetails();Output:
Priya works as a Developer.
Arun works as a Designer.
Ayesha works as a Data Analyst.All three objects come from the same Employee class, but each stores different values.
This approach is useful when building applications that manage multiple employees, students, products, customers, or other entities.
Class Instances Have Their Own Properties
Properties initialized using this in a constructor are generally created as own properties on each instance.
Changing a property on one instance does not automatically change the corresponding property on another instance.
class Student {
constructor(name, marks) {
this.name = name;
this.marks = marks;
}
}
const student1 = new Student("Rahul", 85);
const student2 = new Student("Priya", 92);
student1.marks = 90;
console.log(student1.marks);
console.log(student2.marks);Output:
90
92When student1.marks changes to 90, the marks belonging to student2 remain 92.
This happens because the two instances have separate marks properties.
Accessing Properties of a Class Instance
You can access an instance’s properties using dot notation or bracket notation.
Using Dot Notation
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
}
const product = new Product("Laptop", 55000);
console.log(product.name);
console.log(product.price);Output:
Laptop
55000Dot notation is useful when you know the property name in advance.
Using Bracket Notation
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
}
const product = new Product("Laptop", 55000);
const propertyName = "price";
console.log(product[propertyName]);Output:
55000Bracket notation is useful when the property name is stored in a variable or needs to be determined dynamically.
Calling Methods on Class Instances
Class instances can call the instance methods defined by their class.
class Calculator {
add(a, b) {
return a + b;
}
multiply(a, b) {
return a * b;
}
}
const calculator = new Calculator();
console.log(calculator.add(10, 20));
console.log(calculator.multiply(5, 4));Output:
30
20The calculator object can access both methods. Ordinary class instance methods are usually stored on the class prototype and shared across instances.
You can learn more about defining and calling these functions in JavaScript Class Methods.
Checking Whether an Object Is a Class Instance
JavaScript provides the instanceof operator to check whether an object’s prototype chain includes a particular class’s prototype.
Example
class Person {
constructor(name) {
this.name = name;
}
}
const person1 = new Person("Rahul");
console.log(person1 instanceof Person);
console.log(person1 instanceof Object);Output:
true
trueBoth expressions return true because person1 is an instance of Person, and its prototype chain also includes Object.prototype.
Checking Different Objects
class Car {
constructor(brand) {
this.brand = brand;
}
}
const car = new Car("Honda");
const person = { name: "Priya" };
console.log(car instanceof Car);
console.log(person instanceof Car);Output:
true
falseThe car object was created from the Car class, while person is a regular object literal.
Important: instanceof checks the prototype chain, not simply the object’s property names. It can also return false for objects created in another JavaScript realm, such as a different iframe, even when they represent similar class instances.
Class Instances and the Constructor
The constructor runs when a new instance is created with new. It is commonly used to initialize the instance’s properties.
class User {
constructor(name, email) {
this.name = name;
this.email = email;
}
}
const user1 = new User("Rahul", "rahul@example.com");
const user2 = new User("Priya", "priya@example.com");
console.log(user1.name);
console.log(user2.name);Output:
Rahul
PriyaThe constructor receives different arguments for each instance and initializes the corresponding properties.
You can explore this concept further in JavaScript Constructors.
Class Instances vs Classes
A class and a class instance are related, but they are not the same thing.
| Feature | Class | Class Instance |
|---|---|---|
| Meaning | Blueprint for creating objects | Object created from a class |
| Created using | class keyword | new keyword |
| Main purpose | Defines structure and behavior | Stores individual data and uses behavior |
| Example | class Student {} | new Student("Rahul") |
For example:
class Student {
constructor(name) {
this.name = name;
}
}
const student1 = new Student("Rahul");
const student2 = new Student("Priya");
console.log(student1.name);
console.log(student2.name);Output:
Rahul
PriyaStudent is the class, while student1 and student2 refer to separate instances created from it.
Common Mistakes with Class Instances
Forgetting the new Keyword
JavaScript classes must be called with new.
Incorrect:
class Student {
constructor(name) {
this.name = name;
}
}
// Student("Rahul"); // TypeErrorCorrect:
const student = new Student("Rahul");
console.log(student.name);Output:
RahulConfusing the Class with an Instance
Declaring a class does not automatically create an instance.
class Animal {
speak() {
console.log("Animal sound");
}
}
const animal = new Animal();
animal.speak();Output:
Animal soundThe Animal class defines the structure, while animal refers to the created instance.
Assuming Methods Are Own Properties
Ordinary methods declared in a class body are generally placed on the class prototype rather than directly on each instance.
class User {
greet() {
return "Hello!";
}
}
const user = new User();
console.log(Object.hasOwn(user, "greet"));
console.log(user.greet());Output:
false
Hello!The method can be called through the instance even though it is not an own property of that instance.
Frequently Asked Questions
What is a class instance in JavaScript?
A class instance is an object created from a class using the new keyword. It can store its own property values and access methods defined by the class.
How do you create an instance of a class?
Use the new keyword followed by the class name and any required arguments, such as const user = new User("Rahul");.
Can a class have multiple instances?
Yes. You can create as many instances as needed from the same class. Each instance can have different property values.
What is the difference between a class and an object?
A class defines how objects can be created and what behavior they can share. An object is a concrete collection of properties and behavior. A class instance is an object created from a class.
How can you check whether an object is an instance of a class?
Use the instanceof operator, such as user instanceof User. It checks whether the class’s prototype appears in the object’s prototype chain.
Do class instances share methods?
Ordinary instance methods defined in a class are generally shared through the class prototype, while properties initialized using this in the constructor are usually stored separately on each instance.
Conclusion
Class instances are objects created from JavaScript classes using the new keyword. Each instance can have its own properties while sharing methods defined by the class.
Understanding how to create instances, access their properties, call their methods, and use instanceof will help you work effectively with JavaScript classes and object-oriented programming.