DEV Community

SAURAV KUMAR
SAURAV KUMAR

Posted on

Class vs Object in JavaScript — Explained in Simple Words

#webdev #programming #javascript #beginners

In my previous post, I explained what OOP is in JavaScript in simple words.

But when we go a little deeper into OOP, a few terms start showing up again and again:

  • class
  • object
  • properties
  • methods

At first, these words sound easy.

But when I started learning them, the difference between them was not always very clear.

So in this post, let’s understand these basics properly in JavaScript — in the simplest way possible.

We will also look at how objects are created, what happens when they are no longer used, and a small memory-related idea that every beginner should know.

🧱 What Is a Class in JavaScript?

A class is a blueprint.

It tells us what kind of data an object should have and what kind of actions it should perform.

In simple words, a class is like a design.

It is not the actual object itself.

It is just the structure from which objects are created.

Let’s take a simple Employee example:

class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }

  setName(name) {
    this.name = name;
  }

  setSalary(salary) {
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}
Enter fullscreen mode Exit fullscreen mode

Here:

  • Employee is the class
  • name and salary are properties
  • setName(), setSalary(), and getSalary() are methods

So this class defines what an employee object should contain and what it should be able to do.

📦 What Is an Object?

An object is an instance of a class.

If class is the blueprint, object is the real thing created from it.

For example:

const emp1 = new Employee("Raj", 10000);
const emp2 = new Employee("Rahul", 15000);

console.log(`${emp1.name}'s salary is ₹${emp1.getSalary()}`);
console.log(`${emp2.name}'s salary is ₹${emp2.getSalary()}`);
Enter fullscreen mode Exit fullscreen mode

Here:

  • emp1 is one object
  • emp2 is another object

Both are created from the same class.

But both have their own separate data.

That means even if two objects come from the same class, they still behave like separate real entities.

That is one of the most important ideas in OOP.

🧠 Properties and Methods

When we create objects, they usually have two things:

1. Properties

Properties are the data of an object.

They describe the current state of that object.

In the Employee example:

  • name
  • salary

These are properties.

2. Methods

Methods are the actions an object can perform.

In the same example:

  • setName()
  • setSalary()
  • getSalary()

These are methods.

So in very simple words:

  • properties = data
  • methods = actions

That is the basic building block of OOP.

⚙️ How Objects Are Created

In JavaScript, we create objects from a class using the new keyword.

Example:

const emp1 = new Employee("Raj", 10000);
Enter fullscreen mode Exit fullscreen mode

When this runs:

  • a new object is created
  • the constructor() runs
  • values are assigned to that object
  • emp1 starts referring to that object

Let’s see the full example again:

class Employee {
  constructor(name, salary) {
    this.name = name;
    this.salary = salary;
  }

  setName(name) {
    this.name = name;
  }

  setSalary(salary) {
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}

const emp1 = new Employee("Raj", 10000);
const emp2 = new Employee("Rahul", 15000);

console.log(`${emp1.name}'s salary is ₹${emp1.getSalary()}`);
console.log(`${emp2.name}'s salary is ₹${emp2.getSalary()}`);
Enter fullscreen mode Exit fullscreen mode

Output:

Raj's salary is ₹10000
Rahul's salary is ₹15000
Enter fullscreen mode Exit fullscreen mode

Now let’s change one object:

emp1.setSalary(20000);

console.log(emp1.getSalary()); // 20000
console.log(emp2.getSalary()); // 15000
Enter fullscreen mode Exit fullscreen mode

This shows that both objects have their own separate state.

Changing one object does not change the other.

🗑️ What Happens When an Object Is No Longer Used?

This part is important because different languages handle memory differently.

In JavaScript, we usually do not delete objects manually in normal code.

Instead, JavaScript uses garbage collection.

That means if an object is no longer reachable anywhere in the program, JavaScript can remove it from memory automatically.

Example:

let emp = new Employee("Raj", 10000);

emp = null;
Enter fullscreen mode Exit fullscreen mode

After this, if nothing else is referring to that object, it becomes eligible for garbage collection.

So the simple idea is:

  • we create objects using new
  • JavaScript keeps them in memory while they are needed
  • when they are no longer reachable, JavaScript cleans them up automatically

For beginners, this understanding is enough.

🧮 One Simple Memory Idea Beginners Should Know

In JavaScript, object variables store references.

That means the variable points to the object instead of copying the whole object.

For example:

const emp1 = new Employee("Raj", 10000);
const emp2 = emp1;

emp2.setSalary(25000);

console.log(emp1.getSalary()); // 25000
Enter fullscreen mode Exit fullscreen mode

You might expect only emp2 to change.

But both show the same updated value.

Why?

Because both emp1 and emp2 are referring to the same object.

This is a very important beginner concept in JavaScript.

So remember:

  • primitives like numbers and strings behave differently
  • objects are reference-based
  • unused objects are cleaned up automatically by the garbage collector

You do not need to go deep into engine internals right now.

Just understanding reference is already very helpful.

🚀 Why This Matters

Class and object are not just theory topics.

We use these ideas to model real things in software like:

  • users
  • employees
  • bank accounts
  • products
  • orders

Once you understand class, object, properties, methods, and references, it becomes much easier to understand bigger OOP concepts later like:

  • encapsulation
  • inheritance
  • polymorphism
  • abstraction

That is why these basics matter so much.

They are also common in interviews, especially when someone wants to check whether your OOP foundation is clear.

🎯 Quick Interview-Friendly Answer

If someone asks you:

What is a class in JavaScript?

You can say:

A class is a blueprint for creating objects. It defines what properties and methods those objects will have.

If they ask:

What is an object?

You can say:

An object is an instance created from a class. It contains its own data and can use the methods defined in that class.

If they ask:

What happens when an object is no longer used in JavaScript?

You can say:

JavaScript uses garbage collection, so objects that are no longer reachable can be cleaned up automatically from memory.

✅ Final Thoughts

If you are learning OOP in JavaScript, do not try to jump too quickly into advanced concepts.

First, make these basics strong:

  • Class = blueprint
  • Object = instance
  • Properties = data
  • Methods = actions
  • new = creates object
  • Unused objects = cleaned up automatically

Once these ideas become clear, OOP starts making much more sense.

And honestly, this is one of those topics that feels theoretical at first, but becomes very practical when you start building real projects.

🙋‍♂️ About Me

Hi, I’m Saurav Kumar.

I enjoy learning, building, and writing about web development in simple words—especially breaking down topics that are useful for beginners and developers preparing for interviews.

Right now, I’m focusing on deepening my understanding of core concepts like JavaScript, Object-Oriented Programming, system design, and software engineering fundamentals.

Let's connect!

Top comments (0)