FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Objects, Prototypes & Classes

Advanced

Classes

Classes provide a clean syntax for creating object instances with shared methods.

class Counter {
  count = 0;

  next() {
    this.count += 1;
    return this.count;
  }
}

Objects, Prototypes & Classes

Class syntax is a modern way to write constructor-and-prototype patterns.

A class defines a blueprint for instances. The constructor initializes instance state, and methods are shared through the prototype.

Class syntax does not remove prototypes. It gives them a clearer shape. Understanding prototypes helps you understand what class methods really are.

Modern classes can use public fields, private fields and static methods. Use those tools when they make object boundaries clearer.

class

Defines a class declaration or expression.

constructor

Runs when new creates an instance.

Method

Shared through the class prototype.

Private field

#count creates state only accessible inside the class body.

Examples

Object code becomes clear when shape, state and behavior are visible.

Small class with clear responsibility

class Counter {
  #count = 0;

  next() {
    this.#count += 1;
    return this.#count;
  }
}

Class used as a namespace only

class Helpers {
  static format(value) { return value.trim(); }
  static upper(value) { return value.toUpperCase(); }
}

// A simple module of functions may be clearer.

Code patterns

Reusable examples for quick reference.

These patterns focus on the pieces developers actually reuse: object literals, methods, constructors, prototypes, getters, copying, classes and inheritance.

Basic class

Initialize instance properties in a constructor.

class Record {
  constructor(title) {
    this.title = title;
  }
}

const record = new Record("Overview");

Class method

Methods are shared between instances.

class Record {
  constructor(title) { this.title = title; }
  label() { return this.title; }
}

Private field

Use # for private class state.

class Counter {
  #count = 0;
  next() {
    this.#count += 1;
    return this.#count;
  }
}

Static method

Call utility behavior on the class itself.

class Record {
  static fromTitle(title) {
    return new Record(title.trim());
  }
  constructor(title) { this.title = title; }
}

Rules that matter

Model data deliberately before adding behavior.

Objects are where JavaScript programs start to model real application state. Good object shape makes later functions, classes and UI updates much easier to maintain.

Use classes for instance models

Classes fit objects that share behavior and have state.

Keep constructors simple

Set initial state; avoid hidden side effects.

Use private fields for real privacy

#field is enforced by the language.

Use methods for behavior

Do not expose every internal detail as public state.

Do not force classes everywhere

Plain functions and objects are often simpler.

Remember methods use this

Detached methods can still lose context.

Production thinking

Object design decides how understandable the rest of the code can be.

Why does this matter?

Classes make object creation more readable when many instances share the same behavior.

Accessibility

Class-based UI models should keep accessible state explicit and testable.

Production note

Production classes should have clear boundaries, small public APIs and minimal constructor side effects.

SEO note

Content classes should render deterministic output and avoid hidden runtime-only dependencies.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Add a reset method.
  • Add a getter called value.
  • Create two counters and prove their state is separate.

Practice assignment

Do this before moving to the next topic.

  1. Write a class with a constructor.
  2. Add one instance method.
  3. Add one private field.

Try it yourself

Build a counter class

Live preview

Self-check

Before you continue, prove that you understand Classes.

Advanced

Object-oriented JavaScript becomes much easier when you can explain where the data lives, where the method is found and which object receives this.

  1. Can you explain what class syntax does?
  2. Can you explain constructor?
  3. Can you explain private fields?
  4. Can you explain static methods?
  5. Can you explain when a class is unnecessary?