JS Classes

Think of an architectural blueprint for a house, the blueprint itself isn't a house you can live in, but it defines exactly how to build one, and you can use that same blueprint to construct many individual houses, each with its own address but the same layout. A class in JavaScript is that blueprint, a template describing what properties and methods every object built from it will have, and each individual object created from a class is called an instance. Classes help organize larger applications, like modeling a Tutorial or a User consistently across a codebase powering something like cookiescursor.com.

In this page:

Class Syntax and the Constructor
Methods
Inheritance With extends and super
Static Methods
Getters and Setters

Class Syntax and the Constructor

A class is declared with the class keyword, and its constructor method runs automatically whenever a new instance is created with new, typically used to set up the instance's initial properties.

Note: The constructor is the natural place to accept parameters and assign them to this, establishing each instance's starting state.

Warning: A class can only have one constructor method, defining a second one causes a syntax error.

Example: Class Syntax and the Constructor

javascript

class User {
  constructor(name) {
    this.name = name;
  }
}
const u = new User("Sam");
console.log(u.name);

Methods

Methods defined inside a class become available on every instance created from it, letting each object built from the class share the same behavior without duplicating that code.

Note: Class methods are written without the function keyword, similar to shorthand methods in object literals.

Warning: Methods defined on a class are shared across all instances, they cannot access instance-specific data unless referenced through this.

Example: Methods

javascript

class User {
  constructor(name) { this.name = name; }
  greet() { console.log(`Hi, ${this.name}`); }
}
new User("Amit").greet();

Inheritance With extends and super

extends lets one class build on another, inheriting its properties and methods, and super() inside a subclass's constructor calls the parent class's constructor, which must run before this can be used.

Note: A subclass can override a parent method simply by defining a method with the same name, while still calling super.methodName() if it needs the original behavior too.

Warning: Forgetting to call super() as the very first line in a subclass constructor throws a ReferenceError before this can even be used.

Example: Inheritance With extends and super

javascript

class Animal {
  constructor(name) { this.name = name; }
}
class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  bark() { console.log(`${this.name} says woof`); }
}
new Dog("Rex").bark();

Static Methods

A static method belongs to the class itself rather than to individual instances, called directly on the class name, and is commonly used for utility functions closely related to the class but not tied to any specific instance's data.

Note: Static methods are a natural home for factory-style functions that create and return new instances of the class.

Warning: A static method cannot access this to reach instance properties, since it's never called on an actual instance.

Example: Static Methods

javascript

class MathUtil {
  static double(n) { return n * 2; }
}
console.log(MathUtil.double(5));

Getters and Setters

get and set define special methods that run automatically when a property is read or assigned, letting you compute a derived value on read or validate a value before it's stored, while the calling code still uses ordinary property syntax.

Note: Getters are great for computed properties, like combining a first and last name, without storing that combination as a separate, duplicated field.

Warning: A getter and setter with the same name should not directly read or write that identical name inside themselves, doing so causes infinite recursion.

Example: Getters and Setters

javascript

class Circle {
  constructor(radius) { this._radius = radius; }
  get area() { return Math.PI * this._radius ** 2; }
  set radius(value) { this._radius = value; }
}
const c = new Circle(2);
console.log(c.area);

Common Mistakes

Forgetting to call super() in a subclass's constructor before using this, which throws an error in any class that extends another.
Trying to call a class directly as a function without new, class functions specifically require the new keyword to create an instance.
Confusing static methods, called on the class itself, with regular methods, called on instances created from the class.

Chapter Summary

A class defines a constructor and methods shared by every object, called an instance, created from it with new.
extends and super enable inheritance, letting one class build on and reuse another's behavior.
static methods belong to the class itself, while getters and setters let you control how properties are read and assigned.

Browser Support

Classes have been supported in all major browsers since 2015 and are a fully standard, widely used part of modern JavaScript.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Arrow Functions Next Lesson → JS Modules

JS Classes

Class Syntax and the Constructor

Methods

Inheritance With extends and super

Static Methods

Getters and Setters

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code