Classes in JavaScript

Introduction

The class keyword defines reusable blueprints for objects. Under the hood, JavaScript still uses prototypes, but class syntax reads like Java or Python and is the standard in modern front-end and Node code. This chapter covers declaring a class, creating instances with new, and instance methods.

Prerequisites

Basic Class Declaration

javascript
// Class with constructor and method
class Product {
  constructor(sku, title, price) {
    this.sku = sku;
    this.title = title;
    this.price = price;
  }
 
  describe() {
    return `${this.title} (${this.sku}) — $${this.price}`;
  }
}
 
const item = new Product("A1", "Pen", 2.5);
console.log(item.describe());

new Creates an Instance

javascript
// Each new call is a separate object
const a = new Product("A1", "Pen", 2);
const b = new Product("B2", "Mug", 12);
 
console.log(a === b);
console.log(a.sku, b.sku);

Always use new with classes (unless you wrap construction in a factory).

Warning

Calling a class without new throws in modern JavaScript. Constructor functions had the same convention historically.

Instance Fields

javascript
// Field declared on instance in constructor
class Session {
  constructor(userId) {
    this.userId = userId;
    this.createdAt = Date.now();
    this.active = true;
  }
}
 
const s = new Session(42);
console.log(s.userId, s.active);

Public class fields (optional shorthand):

javascript
// Class field syntax
class Logger {
  prefix = "[app]";
 
  log(message) {
    console.log(`${this.prefix} ${message}`);
  }
}
 
new Logger().log("ready");

Getters and Setters

javascript
// Controlled access to derived value
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
 
  get area() {
    return this.width * this.height;
  }
}
 
const rect = new Rectangle(4, 5);
console.log(rect.area);

instanceof

javascript
// Check prototype chain
console.log(item instanceof Product);
console.log(item instanceof Object);

Mini Example: Simple Stack Class

javascript
// Stack with push/pop
class Stack {
  constructor() {
    this.items = [];
  }
 
  push(value) {
    this.items.push(value);
  }
 
  pop() {
    return this.items.pop();
  }
 
  peek() {
    return this.items.at(-1);
  }
}
 
const stack = new Stack();
stack.push(1);
stack.push(2);
console.log(stack.peek());
console.log(stack.pop());

FAQ

Are classes hoisted?

Class declarations are hoisted but live in the temporal dead zone until the line runs—do not use before declaration.

Can I add methods after defining the class?

Yes on the prototype: Product.prototype.discount = function() { ... }—prefer methods inside the class body.

Arrow methods in class body?

method() {} is correct; arrow = () => {} as a field creates a per-instance function—useful for callbacks, different this rules.

What comes next?

Prototypes—how JavaScript wires inheritance under class.