JavaScript classes are a way to create reusable blueprints for objects. They were introduced in ECMAScript 6 (ES6) to provide a cleaner and more structured syntax for working with objects and inheritance. Although JavaScript has always supported object-oriented programming through prototypes, classes make the process more familiar to developers coming from other object-oriented languages like Java, C++, or Python.
1. What Is a JavaScript Class?
A class in JavaScript is a template for creating objects with predefined properties and methods. It defines how an object should behave and what data it should hold.
Here’s a basic example of a class:
javascriptCopyEditclass Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
In this example:
Personis the name of the class.- The
constructor()is a special method that initializes new objects. greet()is a regular method defined inside the class.
2. Creating an Instance
To create an object from a class, you use the new keyword:
javascriptCopyEditconst person1 = new Person('Alice', 30);
person1.greet(); // Output: Hello, my name is Alice.
Each time you call new Person(...), a new object is created with its own name and age.
3. Adding Methods to a Class
You can add as many methods as needed to a class. These methods are shared among all instances (they are part of the class’s prototype).
javascriptCopyEditclass Animal {
constructor(type) {
this.type = type;
}
speak() {
console.log(`The ${this.type} makes a sound.`);
}
}
const dog = new Animal('dog');
dog.speak(); // Output: The dog makes a sound.
4. Class Inheritance
One of the main benefits of using classes is inheritance—a way to create a new class based on an existing one.
javascriptCopyEditclass Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const myDog = new Dog('Rex');
myDog.speak(); // Output: Rex barks.
extendsis used to inherit from another class.- The subclass (
Dog) can override methods from the parent class (Animal).
5. The super Keyword
Inside a subclass, super() is used to call the constructor or methods of the parent class.
javascriptCopyEditclass Cat extends Animal {
constructor(name, color) {
super(name); // calls the parent class constructor
this.color = color;
}
describe() {
console.log(`${this.name} is a ${this.color} cat.`);
}
}
const kitty = new Cat('Mittens', 'black');
kitty.describe(); // Output: Mittens is a black cat.
6. Getters and Setters
You can use get and set to create computed properties or control access to private data.
javascriptCopyEditclass Circle {
constructor(radius) {
this._radius = radius;
}
get area() {
return Math.PI * this._radius ** 2;
}
set radius(r) {
this._radius = r;
}
}
const c = new Circle(5);
console.log(c.area); // Output: 78.54
c.radius = 10;
console.log(c.area); // Output: 314.16
7. Static Methods
Static methods are called on the class itself, not on instances.
javascriptCopyEditclass MathHelper {
static square(x) {
return x * x;
}
}
console.log(MathHelper.square(4)); // Output: 16
8. Conclusion
JavaScript classes offer a modern and powerful way to work with object-oriented programming. They provide clear syntax for creating reusable objects, supporting features like inheritance, method overriding, getters/setters, and static methods.
By mastering classes, you can write cleaner, more organized, and scalable JavaScript code—especially useful in larger applications, frameworks like React, or when working with APIs and data models.