How to create a JavaScript class

Creating a class in JavaScript using ES6 syntax is fundamental in modern web development. It’s an essential skill for any developer looking to understand object-oriented JavaScript, encapsulate data, and leverage inheritance.

In this article, I’ll walk you through the JavaScript class syntax, constructor functions, and class methods.

Mastering these concepts will enable you to build more modular and maintainable code. By the end of this guide, you’ll be comfortable with creating and managing class instances, implementing static methods, and utilizing prototypes to enhance your applications.

Defining JavaScript Classes

Class Syntax

Class declarations

Defining a class in JavaScript using a class declaration is straightforward. Starting with the class keyword, you name your class and define its body.

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

This creates a class Animal with a constructor method that initializes a name property and a speak method that logs a message.

Class expressions

Class expressions provide another way to define classes. They can be named or unnamed and are useful for creating classes on the fly or assigning them to a variable.

const Animal = class {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
};

In this case, Animal could be an anonymous class assigned to a variable. Both methods give you the flexibility to define functionalities.

Example of basic class definition

A basic class definition shows you how the blueprint works. Here’s a simple example:

class Dog {
    constructor(name) {
        this.name = name;
    }
    bark() {
        console.log(`${this.name} barks.`);
    }
}

const myDog = new Dog('Rex');
myDog.bark(); // Rex barks.

Class Body

Methods and constructors

In JavaScript, the class body consists of methods and constructors. The constructor initializes object properties, while methods define the actions that the object can perform.

class Car {
    constructor(model) {
        this.model = model;
    }
    drive() {
        console.log(`${this.model} is driving.`);
    }
}

The constructor method sets up the model property, and the drive method provides behavior.

Properties and fields

JavaScript classes can have properties and fields. Properties are typically defined within the constructor, while fields can be added directly in the class body.

class Book {
    author = 'Unknown'; // Field
    constructor(title) {
        this.title = title; // Property
    }
    getInfo() {
        return `${this.title} by ${this.author}`;
    }
}

Here, author is a field with a default value, and title is a property initialized through the constructor.

Public vs private elements

Modern JavaScript classes support both public and private elements, enhancing encapsulation. Public elements are accessible from outside the class, while private elements, denoted by a #, are only accessible within the class.

class BankAccount {
    #balance = 0; // Private field
    constructor(accountHolder) {
        this.accountHolder = accountHolder; // Public property
    }
    deposit(amount) {
        this.#balance += amount;
    }
    getBalance() {
        return this.#balance;
    }
}

In this example, #balance is a private field, thus enhancing the class’s encapsulation and making it more secure. Public properties and methods remain accessible, providing clear and controlled interactions with the object’s state.

Class Inheritance

Understanding Inheritance

Definition and purpose

Inheritance in JavaScript allows a class to inherit properties and methods from another class. This is a fundamental concept in object-oriented programming (OOP) that promotes code reusability and logical hierarchy. It helps in creating a parent-child relationship between classes.

In JavaScript, inheritance means that one class, called the child or subclass, can inherit properties and behavior from another class, called the parent or superclass.

Comparison with other OOP languages (classical vs prototypical inheritance)

In classical inheritance, commonly seen in languages like Java or C#, classes can inherit from a single class or multiple classes (using interfaces). JavaScript, on the other hand, uses prototypical inheritance—a more flexible and dynamic approach.

While classical inheritance defines the structure and behavior at compile-time, prototypical inheritance links objects and shares behavior through prototype chains at runtime. This means JavaScript objects can inherit directly from other objects without the need for blueprints.

Implementing Inheritance in JavaScript

The extends keyword

JavaScript introduces the extends keyword to set up inheritance between a subclass and superclass. Using extends allows the subclass to inherit the methods and properties of the superclass.

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log(`${this.name} barks.`);
    }
}

Here, the Dog class inherits from the Animal class, gaining its properties and methods.

Using the super() method

The super() method is essential in JavaScript inheritance. It calls the constructor of the superclass, enabling the child class to inherit and initialize the parent’s properties.

class Dog extends Animal {
    constructor(name, breed) {
        super(name);             // Calls the parent class constructor
        this.breed = breed;
    }
    bark() {
        console.log(`${this.name}, a ${this.breed}, barks.`);
    }
}

This example shows how super(name) is used to ensure the Dog class inherits the name property from Animal.

Example of class inheritance

Let’s see a practical example of implementing inheritance in JavaScript classes.

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

class Employee extends Person {
    constructor(firstName, lastName, jobTitle) {
        super(firstName, lastName);
        this.jobTitle = jobTitle;
    }
    getIntroduction() {
        return `Hi, my name is ${this.getFullName()} and I am a ${this.jobTitle}`;
    }
}

const emp = new Employee('John', 'Doe', 'Software Developer');
console.log(emp.getIntroduction());  // Hi, my name is John Doe and I am a Software Developer

Prototypical Inheritance and Prototype Chaining

Explanation of prototype chains

Prototypical inheritance in JavaScript allows objects to inherit properties and methods from other objects directly through prototype chains. Each object has an internal link to another object called its prototype. This chain continues until it reaches an object with a null prototype.

Prototypical inheritance simplifies the creation of new objects, as new objects can share existing properties or methods without redundant declarations.

Example of prototype chaining

Here’s an example that demonstrates a prototype chain in JavaScript:

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound.`);
};

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
    console.log(`${this.name}, a ${this.breed}, barks.`);
};

const myDog = new Dog('Rex', 'Golden Retriever');
myDog.speak();  // Rex makes a sound.
myDog.bark();   // Rex, a Golden Retriever, barks.

In this example, Dog inherits from Animal using prototypical inheritance, and both classes share methods through their prototype chains. This is a classic illustration of how prototype chaining helps in reusing behavior and creating hierarchical structures.

Constructors in JavaScript Classes

The Constructor Method

Definition and role in object creation

In JavaScript, the constructor is a special method used for initializing newly created instances of a class. When a new object is created from a class, the constructor method is automatically called, setting up initial properties and any necessary configurations. This method is essential for defining an object’s state as soon as it is instantiated.

The constructor method differs from regular methods in that it effectively replaces the constructor functions used in older JavaScript versions. Constructors are now defined directly within class declarations, making the process cleaner and more intuitive.

class User {
    constructor(username, email) {
        this.username = username;
        this.email = email;
    }

    displayInfo() {
        console.log(`User: ${this.username}, Email: ${this.email}`);
    }
}

This code snippet shows a User class with a constructor initializing properties username and email. The displayInfo method outputs the user’s details.

Example of constructor usage

Here’s a more detailed example to illustrate how you might use a constructor in a practical scenario.

class Car {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    displayDetails() {
        console.log(`${this.year} ${this.make} ${this.model}`);
    }
}

const myCar = new Car('Toyota', 'Camry', 2021);
myCar.displayDetails();  // 2021 Toyota Camry

In this example, the Car class has a constructor method that sets the make, model, and year fields. When we create a new instance (myCar), the constructor is called, and displayDetails method outputs the car’s details.

Static Initialization Blocks

Purpose and usage

Static initialization blocks bring a new level of functionality to ES6 class definitions. These blocks allow for static methods and properties within a class, providing a straightforward way to initialize or prepare class-level data, directly within the class body.

These initialization blocks are defined using the static keyword and can execute logic or assign values to properties that pertain to the class itself, rather than to any instance of the class.

class Counter {
    static count = 0;

    constructor() {
        Counter.count++;
    }

    static getCount() {
        return Counter.count;
    }
}

Here, we have a Counter class with a static field count and a static getCount method. The constructor increments count every time a new instance is created by checking Counter.count.

Example of static initialization blocks

Let’s look at an example that demonstrates how static initialization blocks work in JavaScript classes.

class Configuration {
    static settings = {};

    static {
        Configuration.settings = {
            theme: 'dark',
            language: 'en',
        };
    }

    static getSettings() {
        return Configuration.settings;
    }
}

console.log(Configuration.getSettings());  // { theme: 'dark', language: 'en' }

In this example, Configuration class has a static initialization block that sets a default settings object. The static getSettings method provides access to these settings. Initialization code runs once when the class object is first created and ensures that the settings are ready and available for any subsequent use.

Methods in JavaScript Classes

Instance Methods

Definition and examples

Instance methods are functions defined within a class and are available to every instance of that class. They operate on the data contained in the instance and can manipulate or interact with the object’s properties.

For example:

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

const person = new Person('Jane', 'Doe');
console.log(person.getFullName());  // Jane Doe

The getFullName method is an instance method that concatenates the firstName and lastName properties.

Different types (plain, async, generator, etc.)

Instance methods can come in different types, offering various functionalities:

  • Plain method: The most common type, like the getFullName method above.
  • Async method: Handles asynchronous operations using the async/await syntax. 
      class DataLoader {
      async fetchData(url) {
          const response = await fetch(url);
          return response.json();
      }
  }

  const loader = new DataLoader();
  loader.fetchData('https://api.example.com/data').then(data => console.log(data));
  • Generator method: Uses the function* syntax to define a generator, which can pause and resume execution. 
      class NumberSequence {
      *generateNumbers(limit) {
          for (let i = 1; i <= limit; i++) {
              yield i;
          }
      }
  }

  const sequence = new NumberSequence();
  for (let num of sequence.generateNumbers(5)) {
      console.log(num);  // 1, 2, 3, 4, 5
  }

Static Methods

Definition and examples

Static methods belong to the class itself rather than any instance and are called on the class directly. They are useful for utility functions that don’t rely on instance-specific data.

class MathUtil {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtil.add(2, 3));  // 5

In this example, add is a static method that performs a simple addition.

Usage scenarios

Static methods are great for scenarios where you need utility functions or want to avoid creating an instance of the class just to access a particular method. They’re often used for services like logging, configuration, or mathematical operations.

Binding this in Methods

Explanation of this context

In JavaScript, the this keyword refers to the object on which a method was called. Its context can change based on how the method is invoked. Binding this properly ensures that the method retains the correct context, even if it’s called in a different scope.

Example scenarios

Consider this example:

class Button {
    constructor(label) {
        this.label = label;
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log(`Button ${this.label} clicked`);
    }
}

const button = new Button('Submit');
document.getElementById('myButton').addEventListener('click', button.handleClick);

Without bind(this), the handleClick method would lose its context when passed as a callback, resulting in this.label being undefined. Binding ensures handleClick retains its context, letting it access this.label as expected.

Fields in JavaScript Classes

Public Fields

Definition and usage

Public fields in JavaScript classes are properties that are accessible from outside the class. They are defined directly within the class body and are not dependent on the constructor. Public fields make it simple to define initial properties and values upfront without requiring additional steps in the constructor.

Here’s a simple example:

class User {
    username = 'guest';
    email = '';

    constructor(email) {
        this.email = email;
    }

    getUserInfo() {
        return `${this.username}, ${this.email}`;
    }
}

In this example, the username and email fields are public. You can access and modify them directly from instances of the User class.

Example of public fields

Consider a more detailed implementation:

class Car {
    make = 'Unknown';
    model = 'Unknown';
    year = 2000;

    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    displayDetails() {
        return `${this.year} ${this.make} ${this.model}`;
    }
}

const myCar = new Car('Toyota', 'Camry', 2021);
console.log(myCar.displayDetails());  // 2021 Toyota Camry
console.log(myCar.make);  // Toyota
myCar.model = 'Corolla';
console.log(myCar.displayDetails());  // 2021 Toyota Corolla

Here, make, model, and year are public fields of the Car class. They can be directly accessed and manipulated outside of the class, providing flexibility in managing instances.

Private Fields

Definition and usage

Private fields in JavaScript classes are prefixed with a # symbol and are only accessible within the class they are defined in. These fields protect sensitive data and encapsulate the internal logic, ensuring that it can’t be manipulated externally.

Here’s the basic syntax for private fields:

class BankAccount {
    #balance = 0;

    constructor(accountHolder) {
        this.accountHolder = accountHolder;
    }

    deposit(amount) {
        this.#balance += amount;
    }

    getBalance() {
        return this.#balance;
    }
}

In this example, #balance is a private field. It can only be accessed and modified through the deposit and getBalance methods.

Example of private fields

A more elaborate example might look like this:

class Employee {
    #salary = 50000;

    constructor(name, position) {
        this.name = name;
        this.position = position;
    }

    getSalary() {
        return `The salary of ${this.name} is ${this.#salary}`;
    }

    setSalary(newSalary) {
        if (newSalary > 50000) {
            this.#salary = newSalary;
        } else {
            console.log('New salary must be greater than the current salary.');
        }
    }
}

const emp = new Employee('Alice', 'Manager');
console.log(emp.getSalary());  // The salary of Alice is 50000
emp.setSalary(55000);
console.log(emp.getSalary());  // The salary of Alice is 55000
// Below would raise an error since #salary is private
// console.log(emp.#salary);  // SyntaxError: Private field '#salary' must be declared in an enclosing class

In this scenario, #salary is a private field of the Employee class. It is only accessible via the getSalary and setSalary methods, protecting it from unauthorized modifications or exposure.

Getters and Setters

Definition and Purpose

Explanation of getters and setters

Getters and setters in JavaScript classes are special methods that provide a way to access and update the properties of an object. These methods look like regular properties but allow for more controlled and encapsulated access to the data.

A getter is a method that retrieves the value of a property, while a setter is used to set the value of a property. They are defined using the get and set keywords.

class User {
    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name;
    }

    set name(value) {
        if (value.length > 0) {
            this._name = value;
        } else {
            console.log('Name must not be empty.');
        }
    }
}

In this example, the _name property is accessed through the getter name and updated using the setter name. The underscore convention indicates that _name is a private field, though it’s not technically private in the strictest sense.

Benefits of using getters and setters

  • Encapsulation: Getters and setters help encapsulate the internal representation of an object’s properties. This prevents direct manipulation, thereby reducing the risk of unintended changes.
  • Validation and processing: Setters allow you to include validation logic or preprocessing before setting a value. This ensures that the state of your object remains consistent and valid.
  • Flexibility: They provide a way to change the internal implementation without altering the external interface, enhancing maintainability.

Implementing Getters and Setters

Syntax and examples

Defining getters and setters in a JavaScript class is straightforward. Here’s how you can use them:

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

    get area() {
        return this._height * this._width;
    }

    get height() {
        return this._height;
    }

    set height(value) {
        if (value > 0) {
            this._height = value;
        } else {
            console.log('Height must be positive.');
        }
    }

    get width() {
        return this._width;
    }

    set width(value) {
        if (value > 0) {
            this._width = value;
        } else {
            console.log('Width must be positive.');
        }
    }
}

const rect = new Rectangle(10, 20);
console.log(rect.area);  // 200
rect.height = 15;
console.log(rect.area);  // 300
rect.width = -5;         // Width must be positive.

In the Rectangle class, getters and setters are used to manage the height and width properties, and compute the area dynamically. The setters include validation to ensure positive dimensions.

Best practices

  • Use meaningful names: Choose clear and descriptive names for getters and setters to indicate their purpose.
  • Avoid side effects: Keep getters pure by avoiding changes to the object’s state within them.
  • Use underscores for private fields: Use an underscore prefix for fields backing your getters and setters to denote their intended private status.
  • Validate inputs: Perform necessary validation within setters to keep the object’s state consistent and valid.

Class Hoisting

Explanation of Hoisting

Definition and impact on JavaScript declarations

In JavaScript, hoisting refers to the behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This allows functions to be called and variables to be accessed before they are actually defined in the source code.

However, class declarations behave differently.

When you declare a class in JavaScript, unlike functions, the class declaration is not hoisted in the same way. This means you must define the class before you can create instances of it or access its methods. Using a class before declaring it will result in a ReferenceError.

console.log(new Car()); // ReferenceError: Cannot access 'Car' before initialization

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
}

Comparison with function hoisting

Function declarations in JavaScript are fully hoisted. This means you can call a function before it is defined in the source code, and it will still work as expected.

sayHello(); // Outputs: Hello, world!

function sayHello() {
    console.log('Hello, world!');
}

In contrast, if you try to instantiate or reference a class before its declaration, you will get a ReferenceError. This key difference affects how and where you place your class definitions in the code.

Class Hoisting in Practice

Example of class hoisting

Let’s consider a practical example to illustrate this behavior:

try {
    console.log(MyClass); // ReferenceError: Cannot access 'MyClass' before initialization
    const instance = new MyClass();
} catch (error) {
    console.log(error.message);
}

class MyClass {
    constructor() {
        this.name = 'Example';
    }
}

In the example above, trying to access MyClass before its declaration results in an error. This shows that class declarations must come before any references or instances are made.

Implications and common errors

The fact that class declarations are not hoisted has several implications for organizing your code:

  • Order matters: Ensure you declare classes before using them. This is crucial for preventing ReferenceError issues.
  • Avoid circular dependencies: In larger applications, carefully manage dependencies between modules to avoid circular references that can cause initialization problems.
  • Use clear structure: Organize your code with a clear and logical structure, placing class declarations at the beginning of the script or module to ensure they are accessible when needed.

Common errors related to class hoisting typically involve trying to instantiate or reference a class before it has been defined:

const instance = new AnotherClass(); // ReferenceError: Cannot access 'AnotherClass' before initialization

class AnotherClass {
    constructor() {
        this.value = 42;
    }
}

To avoid these issues, always declare your classes before using them, ensuring that your code is both functional and follows best practices.

FAQ On How To Create A JavaScript Class

What is a JavaScript class and why is it useful?

A JavaScript class is a blueprint for creating objects. It uses the ES6 class syntax to define properties and behaviors.

This structure helps in object-oriented programming by encapsulating data and methods, simplifying code, and enhancing reusability and maintainability across your projects.

How do I define a JavaScript class?

To define a class in JavaScript, use the class keyword followed by the class name and a set of curly braces. Inside, you can include a constructor to initialize object properties as well as methods to define object behavior. Keep your syntax clean for readability.

What is a constructor function in a JavaScript class?

A constructor function in a JavaScript class initializes the object’s properties. It’s called automatically when a class instance is created. Define it inside the class using the constructor() method. This function sets up the initial state of the object with parameters.

How do I create an instance of a JavaScript class?

Creating an instance of a JavaScript class is straightforward. Use the new keyword followed by the class name and any required parameters. This invokes the constructor, returning a new object of the class. For example, const myObject = new MyClass(param1, param2);.

Can JavaScript classes have multiple methods?

Absolutely, JavaScript classes can have multiple methods. Define methods inside the class without the function keyword. These methods can manipulate the object’s data or perform actions. It’s essential for the maintenance of robust object-oriented JavaScript applications.

What is method inheritance in JavaScript classes?

In JavaScript class inheritance, a class can inherit properties and methods from another class. Use the extends keyword to create a subclass. This enables the subclass to reuse and extend the behavior of the parent class, promoting code reusability and modular design.

How do prototypes work with classes in JavaScript?

Prototypes in JavaScript enable objects to inherit properties and methods. When a class is defined, its methods are added to the class prototype. This mechanism ensures all instances share the same methods, saving memory and adhering to JavaScript object model principles.

What are static methods in JavaScript classes?

Static methods belong to the class itself rather than any class instance. They are defined using the static keyword. These methods are useful for utility functions related to the class but do not require an instance to operate, enhancing modularity in JavaScript programming.

What are public and private fields in JavaScript classes?

Public fields are accessible from any context, while private fields, denoted by a # prefix, are accessible only within the class. This encapsulation enhances security by protecting the internal state. Implement these fields to adhere to JavaScript coding best practices.

Can you provide an example of a simple JavaScript class implementation?

Certainly! Here’s a basic example:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  startEngine() {
    console.log(`${this.make} ${this.model} engine started.`);
  }
}

const myCar = new Car('Toyota', 'Corolla');
myCar.startEngine();

This implementation uses the constructor to initialize properties and defines a method to simulate starting the car’s engine.

Conclusion

Creating a JavaScript class is an essential skill for any web developer focused on object-oriented programming. By mastering class syntax, constructor functions, and methods, you can build robust and scalable applications.

Key Takeaways:

  • Understand how to define classes using ES6 syntax.
  • Utilize inheritance and prototypes to enhance functionality.
  • Implement static methods and manage public and private fields for better encapsulation.

Using these techniques, you’ll not only write cleaner code but also create more maintainable and efficient web applications. Armed with this knowledge, you’re well-prepared to harness the full power of JavaScript in your projects.

If you liked this article about how to create a JavaScript class, you should check out this article about how to handle events in JavaScript.

There are also similar articles discussing how to make AJAX calls with JavaScript, how to create an object in JavaScript, how to use JavaScript promises, and how to write asynchronous JavaScript.

And let’s not forget about articles on how to use JavaScript fetch API, how to implement JavaScript ES6 features, how to use JavaScript for form validation, and how to add event listeners in JavaScript.

By Bogdan Sandu

Bogdan is a seasoned web designer and tech strategist, with a keen eye on emerging industry trends. With over a decade in the tech field, Bogdan blends technical expertise with insights on business innovation in technology. A regular contributor to TMS Outsource's blog, where you'll find sharp analyses on software development, tech business strategies, and global tech dynamics.

Exit mobile version