OOP Concepts · Foundations

Classes and Objects

A class is a blueprint; an object is a thing built from that blueprint. This single idea is the foundation of every object-oriented language.

Beginner 5 min Lesson 3 of 38 Runnable examplesExamples use modern JavaScript (ES2022 private fields) and C# 13.
0/38 in OOP Concepts
On this page · 5 min · Beginner

In simple words#

A cookie cutter (class) makes many cookies (objects). Same shape, but each cookie can have different toppings (property values).

Class
Blueprint.
Object / instance
A real thing created from the blueprint.
new
Creates an object from a class.

Learning objectives#

  • Explain the difference between a class and an object
  • Write a class with a constructor, properties and methods
  • Create several independent objects from one class
  • Compare the same class in JavaScript and C#

Explanation#

Think of a class as the architectural drawing for a house, and objects as the actual houses built from it. Every house follows the same plan, but each has its own paint colour and its own furniture.

A class defines two things: the data each object holds (properties, also called fields or state) and what each object can do (methods, also called behaviour).

The constructor is a special method that runs when you create an object with new. Its job is to give the new object a valid starting state.

Each object is independent. Changing one object’s properties does not affect any other object made from the same class.

Syntax#

JavaScript Illustrative
class ClassName {
  constructor(param) {
    this.property = param;   // state
  }
  method() {                 // behaviour
    return this.property;
  }
}
const instance = new ClassName('value');

Code example: A BankAccount class#

JavaScriptA BankAccount class Runnable
class BankAccount {
  constructor(owner, balance = 0) {
    this.owner = owner;
    this.balance = balance;
  }


  deposit(amount) {
    this.balance += amount;
    return this.balance;
  }


  describe() {
    return `${this.owner} has ₹${this.balance}`;
  }
}


const asha = new BankAccount('Asha', 500);
const ravi = new BankAccount('Ravi');


asha.deposit(250);


console.log(asha.describe());
console.log(ravi.describe());
console.log(asha instanceof BankAccount);
Expected output
Asha has ₹750
Ravi has ₹0
true
Opens this example in the full playground

Step-by-step explanation#

  1. class BankAccount declares the blueprint.
  2. The constructor receives an owner and an optional starting balance (default 0) and stores them on this — the object being created.
  3. deposit and describe are methods: every BankAccount object can use them.
  4. new BankAccount(...) creates two separate objects. asha and ravi each have their own owner and balance.
  5. Depositing into asha changes only asha’s balance; ravi stays at ₹0.
  6. instanceof confirms that asha was created from the BankAccount class.

Real-world use case#

A shopping site models Product, Cart and Order as classes. Each product on the page is an object with its own name and price, but all share the same methods such as applyDiscount().

Common mistakes#

Forgetting new

Calling BankAccount('Asha') without new throws “Class constructor cannot be invoked without new” in JavaScript.

Forgetting this

Inside a method, balance refers to a variable, not the property. Always write this.balance.

Putting everything in one giant class

A class should represent one concept. If it grows to hundreds of lines doing unrelated things, split it.

Best practices#

  • Name classes with nouns in PascalCase (BankAccount, Invoice)
  • Use the constructor to ensure every object starts in a valid state
  • Keep each class focused on one responsibility
  • Prefer methods that describe intent (deposit) over exposing raw data

Remember this#

Class = blueprint. Object = a house built from it.

new runs the constructor and gives you a fresh object.

Each object has its own data; methods are shared.

Practice exercise#

Your task: Create a Rectangle class with width and height, and two methods: area() and perimeter(). Create two rectangles and log their areas.

JavaScript Runnable
class Rectangle {
  // your code here
}
Opens this example in the full playground
Need a hint?
Store width and height on this in the constructor; area is width * height and perimeter is 2 * (width + height).
Show solution
JavaScript Runnable
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  area() { return this.width * this.height; }
  perimeter() { return 2 * (this.width + this.height); }
}
const a = new Rectangle(3, 4);
const b = new Rectangle(10, 2);
console.log(a.area(), b.area());           // 12 20
console.log(a.perimeter(), b.perimeter()); // 14 24
Opens this example in the full playground

Mini quiz#

Classes and Objects quizMultiple choice Question 1 of 3

What is the relationship between a class and an object?

Score so far: 0/0

Want more? Practise all OOP Concepts MCQs · OOP Concepts interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.