Class declarations are hoisted but remain in the Temporal Dead Zone. You can't use a class before its declaration (unlike function declarations). Always define classes before using them.

Can I have multiple constructors?

No, a class can have only one constructor. For multiple initialization patterns, use static factory methods: static fromJSON(json) { return new MyClass(...); }

What's the difference between class fields and constructor properties?

Class fields (declared directly in the class body like 'name = \

Should I use classes or factory functions?

Classes: when you need inheritance, instanceof checks, or familiar OOP patterns. Factory functions: for simpler creation, true privacy (closures), and when you don't need 'new'. Both are valid in modern JS.

JavaScript Classes

Blueprints for creating objects. Syntactic sugar over prototypes.

Module 5 · Advanced Concepts

Beyond the basics lie the tools professional JavaScript relies on daily: Promises for async work, classes for object-oriented design, Map and Set for specialized collections, and structured error handling for reliable applications.

Learn Classes in JavaScript — covering Class Basics, Constructor, Methods, Static Members with interactive visual examples and step-by-step explanations.

About this module

Once you are comfortable with functions and data structures, the next step is the patterns professional codebases use every day. Promises coordinate asynchronous work, classes organize related behavior, and try/catch keeps applications from crashing on unexpected input.

This module bridges beginner syntax and production-ready JavaScript. You will learn when to reach for Map instead of a plain object, how Set eliminates duplicates, and how error handling turns fragile scripts into reliable software.

Why this matters

Understanding classes is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

Class Basics
Constructor
Methods
Static Members
Private Fields

Where you'll use it

Building interactive web applications with classes
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

Class Basics

A template for creating objects with shared structure.

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  greet() {
    return `Hi, I'm ${this.name}`;
  }
}

const alice = new User("Alice", "alice@test.com");
alice.greet(); // "Hi, I'm Alice"
alice.name;    // "Alice"

💡 Classes are syntactic sugar over prototypes. Under the hood, typeof User is "function" and methods live on User.prototype.

Constructor

Runs automatically when you create a new instance.

class Product {
  constructor(name, price) {
    // Initialize instance properties:
    this.name = name;
    this.price = price;
    this.createdAt = new Date();
  }
}

const laptop = new Product("MacBook", 2499);
laptop.name;      // "MacBook"
laptop.price;     // 2499
laptop.createdAt; // Date object

// Without 'new' → TypeError:
// Product("MacBook", 2499); // Error!

Instance properties

Set in constructor with this.x = value

Each instance gets its own copy

Prototype methods

Defined in class body

Shared between all instances

Methods

Functions that belong to the class. Includes getters and setters.

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  // Regular method:
  area() {
    return Math.PI * this.radius ** 2;
  }

  // Getter (accessed like a property):
  get diameter() {
    return this.radius * 2;
  }

  // Setter (assigned like a property):
  set diameter(d) {
    this.radius = d / 2;
  }
}

const c = new Circle(5);
c.area();     // 78.54 (method call)
c.diameter;   // 10 (getter — no parentheses)
c.diameter = 20; // setter
c.radius;     // 10

Static Members

Belong to the class itself, not instances.

class MathUtils {
  static PI = 3.14159;

  static circleArea(radius) {
    return this.PI * radius ** 2;
  }

  static max(...nums) {
    return Math.max(...nums);
  }
}

// Called on the CLASS:
MathUtils.PI;             // 3.14159
MathUtils.circleArea(5);  // 78.54
MathUtils.max(1, 5, 3);   // 5

// NOT on instances:
const m = new MathUtils();
m.PI;            // undefined
m.circleArea;    // undefined

Use static for: utility functions, factory methods, constants, and singletons.

Private Fields

Truly private with # prefix. Not accessible outside the class.

class BankAccount {
  #balance = 0;       // private field
  #owner;             // private field

  constructor(owner, initial = 0) {
    this.#owner = owner;
    this.#balance = initial;
  }

  deposit(amount) {
    if (amount <= 0) throw new Error("Invalid amount");
    this.#balance += amount;
  }

  get balance() {
    return this.#balance;
  }

  // Private method:
  #log(action) {
    console.log(`[${this.#owner}] ${action}`);
  }
}

const acc = new BankAccount("Alice", 100);
acc.deposit(50);
acc.balance;    // 150 (via getter)
acc.#balance;   // SyntaxError! Truly private
acc.#log;       // SyntaxError!

FAQ

Common questions about classes.

class User { constructor(name, email) { this.name = name; this.email = email; } greet() { return `Hi, I'm ${this.name}`; } } const alice = new User("Alice", "alice@test.com"); alice.greet(); // "Hi, I'm Alice" alice.name; // "Alice"

class Product { constructor(name, price) { // Initialize instance properties: this.name = name; this.price = price; this.createdAt = new Date(); } } const laptop = new Product("MacBook", 2499); laptop.name; // "MacBook" laptop.price; // 2499 laptop.createdAt; // Date object // Without 'new' → TypeError: // Product("MacBook", 2499); // Error!

class Circle { constructor(radius) { this.radius = radius; } // Regular method: area() { return Math.PI * this.radius ** 2; } // Getter (accessed like a property): get diameter() { return this.radius * 2; } // Setter (assigned like a property): set diameter(d) { this.radius = d / 2; } } const c = new Circle(5); c.area(); // 78.54 (method call) c.diameter; // 10 (getter — no parentheses) c.diameter = 20; // setter c.radius; // 10

class MathUtils { static PI = 3.14159; static circleArea(radius) { return this.PI * radius ** 2; } static max(...nums) { return Math.max(...nums); } } // Called on the CLASS: MathUtils.PI; // 3.14159 MathUtils.circleArea(5); // 78.54 MathUtils.max(1, 5, 3); // 5 // NOT on instances: const m = new MathUtils(); m.PI; // undefined m.circleArea; // undefined

class BankAccount { #balance = 0; // private field #owner; // private field constructor(owner, initial = 0) { this.#owner = owner; this.#balance = initial; } deposit(amount) { if (amount <= 0) throw new Error("Invalid amount"); this.#balance += amount; } get balance() { return this.#balance; } // Private method: #log(action) { console.log(`[${this.#owner}] ${action}`); } } const acc = new BankAccount("Alice", 100); acc.deposit(50); acc.balance; // 150 (via getter) acc.#balance; // SyntaxError! Truly private acc.#log; // SyntaxError!

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Class Basics

Constructor

Methods

Static Members

Private Fields

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Class Basics

Constructor

Methods

Static Members

Private Fields

FAQ