JavaScript Classes
JavaScript classes provide syntax for defining objects with a constructor and methods. Create an instance with new; this lesson's visible demo ends with tea / regular / mint.
Define a class and its constructor
A class describes the shape and behavior of objects. Its constructor runs when new creates an instance and initializes that instance's fields.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
}
const order = new Drink("tea", "regular");
The constructor receives name and size, then stores them on the new object. Inside a class, this refers to the current instance. new Drink(...) creates the instance and runs the constructor.
Add an instance method
Methods describe actions that instances can perform. Define a method by writing its name and parameters inside the class body.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
label() {
return this.name + " / " + this.size;
}
}
const order = new Drink("tea", "regular");
console.log(order.label());
Calling order.label() returns tea / regular. Class methods are placed on the prototype, so instances can use the shared method without each object storing a separate copy.
Extend a class
Inheritance lets a specialized class reuse a general class. extends establishes the relationship, super(...) calls the parent constructor, and super.label() calls the inherited method.
class SpecialDrink extends Drink {
constructor(name, size, extra) {
super(name, size);
this.extra = extra;
}
fullLabel() {
return super.label() + " / " + this.extra;
}
}
const special = new SpecialDrink("tea", "regular", "mint");
console.log(special.fullLabel());
The SpecialDrink instance inherits label() from Drink and adds extra plus fullLabel(). Its output is tea / regular / mint. A derived constructor must call super(...) before using its own this.
Static methods and private fields
A static method belongs to the class itself, not to its instances. A private field such as #secret can be read only inside the class body.
class Drink {
static kind() {
return "drink";
}
#secret = "recipe";
reveal() {
return this.#secret;
}
}
console.log(Drink.kind());
console.log(new Drink().reveal());
Call the static method as Drink.kind(), not new Drink().kind(). The private #secret field is intentionally brief here: outside code cannot access drink.#secret.
See classes in one page
This page demo uses the complete Drink and SpecialDrink example and writes the result to the document.
<p id="result"></p>
<script>
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
label() {
return this.name + " / " + this.size;
}
}
class SpecialDrink extends Drink {
constructor(name, size, extra) {
super(name, size);
this.extra = extra;
}
fullLabel() {
return super.label() + " / " + this.extra;
}
}
const order = new SpecialDrink("tea", "regular", "mint");
document.querySelector("#result").textContent = order.fullLabel();
</script>
The page displays exactly tea / regular / mint. A class declaration is not usable before its declaration; do not rely on it being available earlier in the file. This is the temporal dead zone, not a reason to call classes hoisted.
Classes organize object creation and shared behavior. They are distinct from modules, which organize files, and from an object method written directly on one object. Use new for an instance, extends for inheritance, and static for class-level behavior.
📊 Class features
| Syntax | Purpose | Example |
|---|---|---|
constructor(...) |
Initialize a new instance | constructor(name, size) |
this |
Refer to the current instance | this.name = name |
extends and super |
Reuse and call parent behavior | class SpecialDrink extends Drink |
static |
Define a class-level method | Drink.kind() |
The table summarizes the core class syntax used throughout this lesson.
Practical exercise
Create Drink with name, size, and label(). Then create SpecialDrink with extends, add extra, and make its fullLabel() display tea / regular / mint. Add Drink.kind() and call it on the class.
Common mistakes
Do not call an instance method on the class, forget super(...) in a derived constructor, or use this before super(...). Do not expect a class declaration to work before its declaration.
Key point
Classes package instance data and behavior: the constructor initializes fields, methods are shared through the prototype, and inheritance reuses behavior without changing the parent class.
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top