Class basics

Classes in one picture

A JavaScript class is a compact way to describe objects that share the same shape and behavior. If constructor functions taught you how new links an object to F.prototype, class syntax is the same idea in a cleaner uniform.

Think of a class as a blueprint. Each time you use new, JavaScript builds one house from the blueprint. The constructor is the move-in checklist run once for that house. Prototype methods live in a shared blueprint library, so they are not copied into every house. Public fields are furniture each house receives for itself.

This lesson covers class syntax, constructors, prototype methods, class accessors, public fields, classes as function values, and the static async factory pattern. Later lessons go deeper into inheritance, static blocks, private fields, and advanced object-oriented design.

A class declaration starts with class, a name, and a body. Inside the body, constructor is the special method that runs when you write new ClassName(...). It receives the arguments from new, and this is the fresh instance being built.

Base-class public fields run before the constructor body. The experiment proves it: history exists before the constructor pushes its second note.

1class Counter {2  history = ["field initialized"];Run3 4  constructor(start = 0) {5    this.value = start;6    this.history.push("constructor ran");7  }8 9  increment() {10    this.value += 1;11    return this.value;12  }13}14 15const counter = new Counter(5);16const result = counter.increment();17console.log(counter.history.join(" → "));18console.log(result);

When you write a method such as increment() in a class body, JavaScript puts that function on Counter.prototype. Instances do not receive their own copy. This is exactly the sharing model from F.prototype & constructors, with friendlier syntax.

The next playground compares a class and a constructor function side by side. Both create objects that greet the same way; the differences are the safer rules classes add.

1class UserClass {2  constructor(name) {3    this.name = name;4  }5  greet() {6    return "Hi " + this.name;7  }8}9 10function UserFunction(name) {11  this.name = name;12}13UserFunction.prototype.greet = function () {14  return "Hi " + this.name;15};16 17const classUser = new UserClass("Ada");18const functionUser = new UserFunction("Ada");

1class UserClass {2  constructor(name) {3    this.name = name;4  }5  greet() {6    return "Hi " + this.name;7  }8}9 10function UserFunction(name) {11  this.name = name;12}13UserFunction.prototype.greet = function () {14  return "Hi " + this.name;15};16 17const classUser = new UserClass("Ada");18const functionUser = new UserFunction("Ada");

A getter is a method you read like a property. A setter is a method you assign like a property. They are useful when the object should store one source of truth but expose a friendlier view.

1class Temperature {2  constructor(celsius) {3    this.celsius = celsius;4  }5 6  get fahrenheit() {7    return this.celsius * 9 / 5 + 32;8  }9 10  set fahrenheit(value) {11    this.celsius = (value - 32) * 5 / 9;12  }13}14 15const tea = new Temperature(100);16console.log(tea.fahrenheit);17tea.fahrenheit = 32;18console.log(tea.celsius);

Public fields are different: they create own properties on each instance. A field can hold data, an array, or even an arrow function. That arrow function field is handy when you need a callback that keeps this, but it is not shared through the prototype.

1class ToolbarButton {2  clicks = 0;3  handleClick = () => {4    this.clicks += 1;5    return this.clicks;6  };7 8  describe() {9    return "Button clicked " + this.clicks + " time(s)";10  }11}12 13const save = new ToolbarButton();14const cancel = new ToolbarButton();15console.log(save.describe === cancel.describe);16console.log(save.handleClick === cancel.handleClick);

A class declaration creates a value. In fact, typeof Counter is "function". The value has a prototype, can be exported, and can have static methods. But it cannot be called like Counter(); classes must be constructed with new.

Constructors should do synchronous setup. If creating an object needs to wait for data, use a static async factory such as Profile.create(). The factory can await a simulated loading step, then call the normal constructor and return a ready instance.

1class Profile {2  constructor(name, avatar) {3    this.name = name;4    this.avatar = avatar;5  }6 7  static async create(name) {8    const avatar = await loadAvatar(name);9    return new Profile(name, avatar);10  }11}12 13async function loadAvatar(name) {14  return name.slice(0, 1).toUpperCase() + "-avatar";15}16 17const profile = await Profile.create("Ada");18console.log(profile.avatar);

Where you’ll use this

Classes are useful when many objects share behavior and each object carries its own state: UI widgets, model objects, data validators, game entities, or service clients. A class makes the shared API easy to find: constructor for required data, methods for actions, getters for computed views, and static factories for named creation paths.

Classes are not mandatory. Plain objects and factory functions are still great. Choose a class when the new story helps readers understand that many instances share one set of behaviors.

Common misconceptions

Key takeaways

• A class is syntax for creating objects with shared prototype behavior.
• The constructor runs once per new instance; public fields initialize before a base constructor body.
• Methods and accessors live on the prototype; fields live on each instance.
• Classes are function values, but they must be called with new and live in the TDZ before declaration.
• Use static async create() when setup must wait before returning a ready instance.

Up next: Inheritance with extends & super.