Class basics

Classes in one picture

A class is a plan for making objects. Every object made from the same class has the same kind of data and the same methods. An object made from a class is called an instance of that class.

In the last lesson, you made objects with a constructor function and new. A class does the same job with shorter, clearer code.

1class User {2  constructor(name) {3    this.name = name;4  }5  greet() {6    return "Hi " + this.name;7  }8}9 10const user = new User("Asha");11console.log(user.greet());

Here is what each part does:

• Line 1 starts a class called User.
• Lines 2 to 4 are the constructor. It runs once for each new object. It stores the name on the new object as this.name.
• Lines 5 to 7 are a method called greet(). It reads the object's name through this.
• Line 10 makes one instance with new User("Asha").
• Line 11 calls greet() and prints Hi Asha.

The name and the method end up in two different places. The name is stored inside user. The method is stored once on User.prototype, a shared object that every User instance links to.

Think of a class as a blueprint for a house. Each new builds one house from it.

This lesson covers these parts of a class:

• The class code and the constructor.
• Methods, which all instances share.
• Static members, which belong to the class itself.
• Getters, setters, and fields.
• Classes as values, and a safe way to set up an object that must wait for data.

Later lessons cover classes that extend other classes, private fields, and more.

A class starts with the word class, then a name, then a body in curly braces { }. Inside the body, the method named constructor is special:

• It runs when you write new ClassName(...).
• It gets the arguments you pass to new.
• Inside it, this is the new object being built.

A class can also have fields. A field is a line like history = ["field initialized"]; in the class body. It gives every new object a property with a starting value.

Fields run before the constructor body. The experiment below shows it. The history field makes an array first. Then the constructor body adds a second note to that array.

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);

1class Score {2  constructor(player) {3    this.player = player;4    this.points = 0;5  }6  addPoint() {7    this.points += 1;8  }9}10 11const first = new Score("Asha");12const second = new Score("Ben");13first.addPoint();14console.log(first.points);15console.log(second.points);

The constructor gives each instance its own player and its own points. Line 13 calls addPoint() on first, so only first.points changes. The program prints 1, then 0.

1class Order {2  constructor(customer = "Guest") {3    this.customer = customer;4  }5}6 7const order = new Order();8console.log(order.customer);

The = "Guest" part is a default value. It is used only when the caller passes nothing. Line 7 calls new Order() with no argument, so customer is Guest. If you passed a name, the object would store that name instead.

When you write a method such as increment() in a class body, JavaScript puts that one function on Counter.prototype. The instances do not get their own copies. They all find the method through their link to the prototype. This is the same sharing you saw in F.prototype & constructors.

The next playground shows a class and a constructor function side by side. Both make objects that greet in the same way. Click the buttons to see where the two are different.

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");

To check where a property is stored, use Object.hasOwn(object, "name"). It gives true only when the property sits directly on that object, not on its prototype.

1class User {2  role = "reader";3 4  greet() {5    return "Hi";6  }7}8 9const user = new User();10console.log(Object.hasOwn(user, "role"));11console.log(Object.hasOwn(user, "greet"));12console.log(Object.hasOwn(User.prototype, "greet"));

Line 2 is a field, so every User gets its own role. The three checks print:

• Line 10 prints true: user has its own role.
• Line 11 prints false: user does not have its own greet.
• Line 12 prints true: greet is stored on User.prototype.

Object.keys(object) gives an array of the names an object lists as its own. A property that shows up in this list is called enumerable. Class methods are not enumerable, so they don't show up.

1class User {2  role = "reader";3  greet() {4    return "Hi";5  }6}7 8const user = new User();9console.log(Object.keys(user).join(","));10console.log(Object.keys(User.prototype).join(",") || "none");

Line 9 prints role, the field. Line 10 prints none: the list for User.prototype is empty, so the || "none" part fills in the word. A for...in loop can also list enumerable properties from the prototype, so use Object.keys when you want only the object's own names.

"Not enumerable" does not mean "private". Any code can still call the method through the prototype, and any code can still read a field. Private fields use a different #name form, which a later lesson covers.

The table sums up the differences. Read each row as a question, then compare the two answers.

A static member is a field or method with the word static in front. It is stored on the class itself, not on the instances. So you call it on the class name: Cart.withTax(), not cart.withTax().

Static members are good for two things:

• Rules that are the same for every instance, like a tax rate.
• Named ways to make an instance, which you'll see later in this lesson.

1class Cart {2  static taxRate = 0.05;3 4  constructor(total) {5    this.total = total;6  }7 8  static withTax(total) {9    return total * (1 + Cart.taxRate);10  }11}12 13const cart = new Cart(20);14console.log(cart.total);15console.log(Cart.withTax(cart.total));

Here is what each part does:

• Line 2 stores one tax rate, 0.05, on the class Cart.
• Lines 8 to 10 are a static method. It reads the tax rate and works out a price. It does not need any particular cart.
• Line 13 makes one cart with its own total of 20.
• Line 14 prints 20. Line 15 prints 21, which is 20 plus 5 percent tax.

1class Cart {2  static withTax(total) {3    return total * 1.05;4  }5}6 7const cart = new Cart();8console.log(cart.withTax(20));

The last line throws a TypeError, the error JavaScript gives when you use a value in a way it can't be used. cart is an instance, and it has no withTax method. To fix it, call Cart.withTax(20) on the class.

A getter is a method that you read like a property. You write it with get in front, and you read it without brackets: tea.fahrenheit. Each read runs the method.

A setter is a method that runs when you assign to a property. You write it with set in front, and you use it with =: tea.fahrenheit = 32.

Together they let an object store one number but show it in more than one way. In the playground, the object stores only Celsius. The getter works out Fahrenheit each time you read it.

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);

1class Score {2  constructor(value) {3    this.value = value;4  }5 6  get passed() {7    return this.value >= 50;8  }9 10  set passed(next) {11    this.value = next ? 50 : 0;12  }13}14 15const score = new Score(42);16console.log(score.passed);17score.passed = true;18console.log(score.value);

Here is what each part does:

• Lines 6 to 8 are the getter. It turns the stored number into true or false: did the score reach 50?
• Lines 10 to 12 are the setter. It takes true or false and stores 50 or 0.
• Line 16 reads score.passed. 42 is less than 50, so it prints false.
• Line 17 assigns true, so the setter stores 50. Line 18 prints 50.

Fields work differently. Each field becomes a property on each instance. A field can hold a number, an array, or even an arrow function.

An arrow function in a field is handy for a callback, a function you pass to other code to call later, such as a button click. It always uses the instance as this. But each instance gets its own copy of that function.

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);

Each new instance runs its field lines again. So a field such as items = [] makes a new, empty array for every cart. No two carts share one list by accident.

1class Cart {2  items = [];3}4 5const first = new Cart();6const second = new Cart();7first.items.push("tea");8console.log(first.items.length);9console.log(second.items.length);

Line 7 adds "tea" to first's array only. The program prints 1, then 0. The two carts have two separate arrays.

Use an arrow function field when a callback really needs to keep the instance as this. Otherwise, a normal method is the better choice, because all instances share one copy.

A class is a value, like a number or a function. In fact, typeof Counter gives "function". (typeof tells you what kind of value something is.) So you can do these things with a class:

• Store it in a variable.
• Export it from a file.
• Pass it to another function.

But a class has one rule a normal function doesn't: you can't call it as Counter(). You must use new Counter().

1const Guest = class {2  constructor(name) {3    this.name = name;4  }5 6  greeting() {7    return "Hello, " + this.name;8  }9};10 11const guest = new Guest("Asha");12console.log(guest.greeting());13console.log(typeof Guest);

This code is a class expression: a class with no name of its own, stored in the variable Guest. After line 9, it works like any other class. Line 12 prints Hello, Asha. Line 13 prints function.

A class expression is handy when you need a class in only one place, or want to pick one of two classes, or pass a class into a function. It follows the same rules as any class.

Now for objects that must wait for data before they are ready. new Profile() always gives back the object right away, so a constructor can't wait. Instead, use a static async factory:

• A factory is a function that makes and returns an object.
• Static means it is stored on the class, like Profile.create().
• Async means it can wait, using await, before it returns.

The factory waits for the data. Then it calls the normal constructor and returns the ready object. Anyone reading await Profile.create(...) can see that the code waits.

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 17async function main() {18  const profile = await Profile.create("Ada");19  console.log(profile.avatar);20}21 22main();

Where you’ll use this

A class helps when you have many objects that do the same things, but each one keeps its own data. Some examples:

• Buttons, menus, and other parts of a page.
• Shopping carts, users, and orders.
• Players and enemies in a game.
• Code that checks form input, or code that talks to a server.

A class also keeps the parts easy to find:

• The constructor takes the data the object needs.
• Methods do the actions.
• Getters work out values from the stored data.
• Static factories give you named ways to make an object.

1class ShoppingCart {2  items = [];3 4  add(item) {5    this.items.push(item);6  }7 8  get count() {9    return this.items.length;10  }11}12 13const cart = new ShoppingCart();14cart.add("tea");15cart.add("bread");16console.log(cart.count);

Each cart keeps its own items list. All carts share one add() method. The count getter works out how many items there are. After two calls to add(), line 16 prints 2.

If your program has only one cart, a plain object may be simpler. A class is worth it when you need many carts that behave the same way.

Pick a class when an object has a clear life: it is made, it changes over time, and several actions belong to it. The constructor can refuse missing data. Methods can keep the data correct. A getter can show a useful value without letting other code change the data directly.

Pick a factory function, a plain function that builds and returns an object, when you only need to turn some input into an object once. Not every object needs a class.

Watch out when you send class objects to a server. JSON.stringify(object) turns an object into text. It keeps only the object's own data, not methods from the prototype. When the data comes back, rebuild the object with new or a factory to get the methods back.

1class User {2  constructor(name) {3    this.name = name;4  }5  greet() {6    return "Hi " + this.name;7  }8}9 10const user = new User("Asha");11console.log(JSON.stringify(user));12console.log(typeof user.greet);

Line 11 prints {"name":"Asha"}, because name is the object's own data. Line 12 prints function, so greet still works. But greet is not in the JSON text, because it is stored on the prototype.

You never have to use classes. Plain objects and factory functions are fine too. Pick a class when new makes it clear that many objects share one set of methods.

Common misconceptions

Key takeaways

• A class is a plan for making objects that share the same methods.
• The constructor runs once for each new. Fields run just before the constructor body.
• Methods, getters, and setters are stored once, on the prototype. Fields are stored on each instance.
• Static members are stored on the class itself, so you call them on the class name.
• A class is a function value, but you must call it with new, and only after the line that makes it.
• Use static async create() when setup must wait before the object is ready.

Up next: Inheritance with extends & super.