JavaScript Classes

Classes were introduced in ES6 (ECMAScript 2015) to provide a cleaner syntax for creating objects and implementing Object-Oriented Programming (OOP).

Important:

Classes are syntactic sugar
over JavaScript Prototypes

JavaScript still uses Prototype-Based Inheritance internally.

Why Do We Need Classes?

Without Classes:

function User(name, age) {
    this.name = name;
    this.age = age;
}

User.prototype.greet = function() {
    console.log("Hello");
};

With Classes:

class User {

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log("Hello");
    }

}

Cleaner and easier to read.

Class Architecture
Class
  |
  +-- Properties
  |
  +-- Constructor
  |
  +-- Methods
Creating a Class
class User {

    constructor(name, age) {

        this.name = name;
        this.age = age;

    }

}

Create Object:

const user =
new User("Venu", 35);
Constructor

A constructor is a special method that executes when an object is created.

class User {

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

}

Usage:

const user =
new User("Venu");

Output:

{
  name: "Venu"
}
Object Creation Flow
new User()
     |
     v
Create Object
     |
     v
Call Constructor
     |
     v
Assign Properties
Instance Properties
class User {

    constructor(name, city) {

        this.name = name;
        this.city = city;

    }

}

Usage:

const user =
new User(
    "Venu",
    "San Antonio"
);
Instance Methods

Methods belong to all objects.

class User {

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

    greet() {
        console.log(
            `Hello ${this.name}`
        );
    }

}

Usage:

user.greet();

Output:

Hello Venu
Class Diagram
User
 |
 +-- name
 |
 +-- greet()
Multiple Objects
const user1 =
new User("Venu");

const user2 =
new User("John");

Output:

user1.name // Venu

user2.name // John

Each object has its own state.

this in Classes

Inside classes:

this = Current Object

Example:

class Employee {

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

    display() {
        console.log(this.name);
    }

}
Getters

Getters look like properties.

class User {

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

    get fullName() {
        return this.name;
    }

}

Usage:

console.log(
    user.fullName
);

No parentheses needed.

Setters

Used for updating values.

class User {

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

    set fullName(value) {
        this.name = value;
    }

}

Usage:

user.fullName = "Java";
Static Methods

Static methods belong to the class, not objects.

class MathUtil {

    static add(a,b) {
        return a+b;
    }

}

Usage:

MathUtil.add(10,20);

Output:

30
Static Method Diagram
Class
 |
 +-- Static Methods

Object
 |
 +-- Instance Methods
Inheritance

One class can inherit another.

Parent:

class Animal {

    eat() {
        console.log("Eating");
    }

}

Child:

class Dog extends Animal {

    bark() {
        console.log("Barking");
    }

}

Usage:

const dog =
new Dog();

dog.eat();
dog.bark();

Output:

Eating
Barking
Inheritance Diagram
Animal
   |
   v
Dog

Dog inherits Animal methods.

super Keyword

Used to call parent constructor.

class Animal {

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

}

Child:

class Dog extends Animal {

    constructor(name) {

        super(name);

    }

}
Method Overriding

Child can override parent methods.

class Animal {

    speak() {
        console.log("Animal Sound");
    }

}

Child:

class Dog extends Animal {

    speak() {
        console.log("Bark");
    }

}

Output:

Bark
Private Fields

Modern JavaScript supports private properties.

class Account {

    #balance = 1000;

    getBalance() {
        return this.#balance;
    }

}

Usage:

account.getBalance();

Direct Access:

account.#balance;

Output:

Syntax Error
Real World Example
class BankAccount {

    constructor(owner,balance) {

        this.owner = owner;
        this.balance = balance;

    }

    deposit(amount) {

        this.balance += amount;

    }

}

Usage:

const account =
new BankAccount(
    "Venu",
    1000
);

account.deposit(500);

Balance:

1500
Classes vs Constructor Functions
Feature	Constructor Function	Class
Syntax	Old	Modern
Readability	Medium	High
Inheritance	Prototype	extends
Static Methods	Manual	Built-in
Common Mistakes
Forgetting new

Wrong:

const user =
User("Venu");

Correct:

const user =
new User("Venu");
Accessing Static Method Through Object

Wrong:

user.add();

Correct:

MathUtil.add();
Missing super()

Wrong:

class Dog extends Animal {

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

}

Must call:

super(name);

first.

Best Practices
Use classes for OOP modeling.
Keep classes focused on a single responsibility.
Use private fields for sensitive data.
Prefer composition when inheritance becomes deep.
Use static methods for utility functions.
Interview Questions
What is a Class?

A blueprint for creating objects.

Are Classes Real Classes?

No.

They are syntactic sugar over prototypes.

What is a Constructor?

A special method executed during object creation.

What is Inheritance?

One class acquiring properties and methods of another class.

What is super()?

Calls the parent constructor.

What are Static Methods?

Methods that belong to the class instead of instances.

What are Private Fields?

Properties accessible only within the class.

Cheat Sheet
Class
-----
Blueprint For Objects

Keywords
--------
class
constructor
extends
super
static

Features
--------
Properties
Methods
Inheritance
Encapsulation

Access Types
------------
Public

Private (#)

Inheritance
-----------
Parent -> Child

Animal -> Dog
Summary

JavaScript Classes provide a clean and modern way to implement OOP.

Key Concepts:

Classes
Constructors
Properties
Methods
this Keyword
Static Methods
Inheritance
super()
Private Fields

Although classes look similar to Java or C#, they are built on top of JavaScript's Prototype System.

Understanding Classes is essential before learning:

Advanced OOP
Design Patterns
React Components
TypeScript
Enterprise JavaScript Development