JavaScript Classes
This lesson explains JavaScript Classes in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.
JavaScript ES6+ Classes Overview
JavaScript classes are an ES6 feature that provides a cleaner syntax for
creating objects and working with object-oriented programming concepts.
Classes make it easier to define constructors, methods, inheritance,
static methods, getters, setters, and reusable object blueprints.
JavaScript classes are commonly used for models, services, UI components,
reusable utilities, API wrappers, game objects, data structures, and
enterprise application architecture. Although classes look similar to other
object-oriented languages, JavaScript classes are built on top of
prototypes.
| Class Feature | Description | Common Usage |
| class | Defines a reusable object blueprint. | User, Product, Order models. |
| constructor | Initializes object properties. | Set default values. |
| Methods | Functions inside a class. | Reusable object behavior. |
| extends | Creates inheritance from another class. | Base and child classes. |
| super | Calls the parent class constructor or methods. | Reuse parent behavior. |
| static | Defines class-level methods. | Utility helpers and factories. |
| Getters and Setters | Control how properties are read or updated. | Validation and computed values. |
JavaScript Class Example
class User {
constructor(name, role) {
this.name = name;
this.role = role;
}
getProfile() {
return this.name + " is a " + this.role;
}
}
const user = new User("John", "Developer");
console.log(user.name);
console.log(user.getProfile());
This example creates a User class with a constructor and a
method. The new keyword creates an object instance from the
class.
Top 10 JavaScript Class Examples
The following examples show the most common JavaScript class patterns used
in real-world applications, interviews, frontend projects, and backend
services.
| # | Example | Syntax |
| 1 | Create Class | class User { } |
| 2 | Constructor | class User { constructor(name) { this.name = name; } } |
| 3 | Create Instance | const user = new User("John"); |
| 4 | Class Method | class User { greet() { return "Hello"; } } |
| 5 | Inheritance | class Admin extends User { } |
| 6 | super Keyword | class Admin extends User { constructor(name) { super(name); } } |
| 7 | Static Method | class MathUtil { static add(a, b) { return a + b; } } |
| 8 | Getter | class User { get profile() { return this.name; } } |
| 9 | Setter | class User { set profile(value) { this.name = value; } } |
| 10 | Private Field | class Account { #balance = 0; } |
Popular Real-World JavaScript Class Examples
These examples show how JavaScript classes are used in practical projects
such as APIs, UI widgets, services, state management, and reusable business
logic.
| Scenario | Class Pattern |
| User Model | class User { constructor(name, email) { this.name = name; this.email = email; } } |
| Product Model | class Product { constructor(title, price) { this.title = title; this.price = price; } } |
| API Service | class ApiService { getUsers() { return fetch("/api/users"); } } |
| Form Validator | class Validator { required(value) { return value !== ""; } } |
| Shopping Cart | class Cart { addItem(item) { this.items.push(item); } } |
| Modal Component | class Modal { open() { this.element.classList.add("show"); } } |
| Logger Utility | class Logger { static log(message) { console.log(message); } } |
| Bank Account | class Account { #balance = 0; deposit(amount) { this.#balance += amount; } } |
| Notification Service | class Notification { show(message) { alert(message); } } |
| Base Component | class Button extends Component { render() { return "button"; } } |
Best Practices
- Use classes when you need reusable object blueprints.
- Use meaningful class names such as
User, Product, or ApiService. - Keep constructors focused on initializing data.
- Keep class methods small and related to the class responsibility.
- Use
extends only when inheritance creates a clear relationship. - Use composition instead of inheritance when behavior is shared across unrelated objects.
- Use private fields when internal state should not be accessed directly.
- Use static methods for utility behavior that does not depend on an instance.
Common Mistakes
- Forgetting to use the
new keyword when creating an instance. - Using classes when a simple object or function is enough.
- Putting unrelated logic inside one large class.
- Overusing inheritance instead of composition.
- Forgetting to call
super() in a child class constructor. - Using arrow functions as class methods without understanding tradeoffs.
- Accessing private fields outside the class.
Key Takeaways
- JavaScript classes provide cleaner syntax for creating objects.
- The
constructor method initializes object properties. - Class methods define reusable behavior.
extends and super support inheritance.- Static methods belong to the class, not the instance.
- Private fields help protect internal state.
- JavaScript classes are built on top of prototypes.
Pro Tip
Use JavaScript classes when you need reusable object templates with shared
behavior. For simple data containers, plain objects are often cleaner and
easier to maintain.