Working with Class Constructors and Methods in JavaScript

Classes in JavaScript provide a way to create complex objects with well-defined structure and behavior. A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class. Classes are usually used to represent a real-world concept like a car, a person, or an animal. This tutorial will provide an overview of how to work with class constructors and methods in JavaScript.

Constructors

A constructor is a special method of a class that is used to create an instance of the class. This instance is referred to as an object. The constructor is the first method that is called when an object is created. It is responsible for setting up the object’s properties and methods.

In JavaScript, constructors are defined using the following syntax:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

class className {
    constructor(param1, param2) {
        // code to initialize the object
    }
}

[/dm_code_snippet]

The constructor method takes any number of parameters. These parameters are used to initialize the object’s properties. For example, here is a constructor for a Person class:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

[/dm_code_snippet]

Once the constructor is defined, we can create a new instance of the Person class by calling the constructor and passing in the appropriate parameters:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let john = new Person("John", 26);

[/dm_code_snippet]

The john variable now holds a reference to an instance of the Person class. This instance has two properties: name and age.

Methods

In addition to constructors, classes can also contain methods. Methods are functions that are defined within a class and can be called on an instance of the class. For example, here is a method for the Person class:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

[/dm_code_snippet]

We can now call the sayHello() method on the john object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

john.sayHello(); // prints "Hello, my name is John"

[/dm_code_snippet]

Static Methods

In addition to instance methods, classes can also contain static methods. Static methods are methods that are called directly on the class instead of an instance of the class. For example, here is a static method for the Person class:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }

    static getNumberOfPeople() {
        return Person.people.length;
    }
}

Person.people = [
    new Person("John", 26),
    new Person("Mary", 24),
];

[/dm_code_snippet]

We can now call the getNumberOfPeople() method on the Person class:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Person.getNumberOfPeople(); // prints 2

[/dm_code_snippet]

Conclusion

Classes in JavaScript are a powerful feature that allow us to create complex objects with well-defined structure and behavior. Constructors are used to create instances of a class, while methods are used to define the behavior of a class. Static methods are methods that are called directly on the class instead of an instance of the class. In this tutorial, we have seen how to work with class constructors and methods in JavaScript.