W3docs

JavaScript Class Syntax

In JavaScript, classes provide a syntax for more traditional object-oriented programming, but they do more than just offer a new syntax. They provide a clear

Introduction to JavaScript Class Syntax

A class is a blueprint for creating objects that share the same shape and behavior. Instead of writing the same constructor-function-plus-prototype boilerplate by hand, you describe the object once and stamp out as many instances as you need. Classes were introduced in ECMAScript 2015 (ES6) and have become the standard way to model object-oriented code in JavaScript.

This chapter covers the essentials: how to declare a class, what the constructor does, how to add methods, getters/setters, and public fields, the difference between class declarations and class expressions, and two facts that trip people up — classes are functions under the hood, and they are not hoisted like regular functions.

Defining a Class

A class is declared with the class keyword, followed by a name and a body in curly braces:

class MyClass {
  // class body
}

By convention class names use PascalCase (Rectangle, UserAccount). The body holds methods, getters/setters, and fields — but note that, unlike object literals, members are not separated by commas.

The Constructor

The constructor is a special method that runs automatically when you create an instance with new. Its job is to receive arguments and initialize the new object's properties through this:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

A class can have at most one constructor. If you omit it, JavaScript supplies an empty one for you.

Creating an Instance

Use the new keyword to build an instance. new creates a fresh object, binds it to this, runs the constructor, and returns the object:

javascript— editable

Class Methods

Methods declared in the body are added to the class's prototype, so every instance shares one copy rather than getting its own. Inside a method, this refers to the instance it was called on:

javascript— editable

Class methods are non-enumerable, which means they won't show up in a for...in loop or Object.keys() — another way classes differ from plain objects, where added methods are enumerable.

Getters and Setters

A getter lets you expose a computed value as if it were a property; a setter lets you intercept an assignment. Prefix a method with get or set:

javascript— editable

Getters and setters are ideal for validation or derived values. See Property getters and setters for a deeper look.

Public Class Fields

You can declare and initialize instance properties directly in the class body, without writing them inside the constructor. These are public class fields:

javascript— editable

Fields are assigned to each instance (not the prototype) before the constructor body runs. For fields that should be hidden from outside code, use private fields (the # prefix) — covered in Private and protected properties and methods.

Static Methods

A static method belongs to the class itself, not to its instances. Static members are handy for utilities or factory functions that relate to the class but don't need a specific instance:

javascript— editable

Classes also support static fields and properties. For the full picture, read Static properties and methods.

Class Expressions

Just like functions, classes can be defined as expressions and assigned to a variable. Class expressions can be anonymous or named:

javascript— editable

This is useful when you need to create a class conditionally, pass it as an argument, or return it from a function.

Classes Are Functions Under the Hood

A class is really a special kind of function. The class syntax is largely syntactic sugar over the older constructor-function-plus-prototype pattern, with some added safety:

javascript— editable

The extra safety includes: the body always runs in strict mode, methods are non-enumerable, and a class constructor cannot be called without new (doing so throws a TypeError).

Classes Are Not Hoisted

Function declarations are hoisted — you can call them before they appear in the code. Class declarations are not usable before they're defined. They are hoisted in name only but remain in the "temporal dead zone," so accessing one early throws a ReferenceError:

javascript— editable

Always declare a class before you use it.

Summary

JavaScript classes give object-oriented code a clear, predictable structure. In this chapter you saw how to declare a class, write a constructor, add prototype methods, getters/setters, public fields, and static methods, plus class expressions. Remember the two key facts: a class is a function under the hood whose body runs in strict mode and can't be called without new, and class declarations are not hoisted.

From here, the natural next steps are extending classes with Class inheritance, grouping shared utilities with Static properties and methods, and hiding internal state with Private and protected properties and methods.

Practice

Practice
What are the key features of JavaScript 'class' syntax?
What are the key features of JavaScript 'class' syntax?
Was this page helpful?