Classes in JavaScript

In JavaScript, classes provide a way to define blueprints for creating objects with similar properties and behaviors. They are a fundamental part of object-oriented programming (OOP) and allow for creating reusable and organized code. Introduced in ECMAScript 2015 (ES6), classes in JavaScript are syntactic sugar over the prototype-based inheritance model. In this article, we'll cover the basics of classes in JavaScript and how they can be used.

To define a class, you can use the class keyword followed by the name of the class. The body of the class contains the properties and methods of the class. To create a class, you can use the following example:

class Car
{
    constructor(make, model, year)
    {
        this.make = make;
        this.model = model;
        this.year = year;
    }
    start()
    {
        console.log('The car has started.');
    }
    drive()
    {
        console.log('The car is being driven.');
    }
}

In this example, we define a Car class with properties like make, model, and year, and methods like start() and drive().

To create an object from a class, you can use the new keyword followed by the class name and parentheses. For example:

let myCar = new Car('Toyota', 'Camry', 2021);

In this example, we create a new Car object named myCar using the Car class constructor.

To access the properties and methods of a class instance, you use the dot notation.

For example:

console.log(myCar.make); // Output: 'Toyota'
myCar.start(); // Output: 'The car has started.'

In this example, we access the make property of the myCar object and call the start() method.

The constructor() method is a special method that gets executed when an object is created from the class. It is used to initialize the object's properties. For example:

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

In this example, the Person class has a constructor that takes name and age as parameters and assigns them to the object's properties

Classes in JavaScript support inheritance, allowing you to create a hierarchy of classes where child classes inherit properties and methods from parent classes. This is achieved using the extends keyword. We'll read more about inheritance in the upcoming blog.

class ElectricCar extends Car
{
    charge()
    {
        console.log('The electric car is charging.');
    }
}

In this example, the ElectricCar class extends the Car class, inheriting its properties and methods. It also defines an additional method called charge().

Static methods are methods that are called on the class itself, rather than on instances of the class. They are useful for utility functions or operations that don't require access to instance-specific data. For example:

class MathUtils
{
    static square(x)
    {
        return x * x;
    }
}

In this example, the MathUtils class has a static method called square() that calculates the square of a number.

console.log(MathUtils.square(5));

Getter and setter methods allow you to define special methods to get and set the values of class properties. You can have a clear understanding of getter and setter methods in JavaScript in the upcoming module. For example:

class Circle
{
    constructor(radius)
    {
        this.radius = radius;
    }
    get radius()
    {
        return this.radius;
    }
    set radius(newRadius)
    {
        this.radius = newRadius;
    }
}

In this example, the Circle class has a getter method radius() and a setter method radius(newRadius) to access and modify the adius property.

Classes in JavaScript provide a convenient way to organize and reuse code, promote code modularity, and enable object-oriented programming concepts. They allow you to define blueprints for creating objects with shared properties and behaviors. Understanding classes is essential for building complex JavaScript applications that follow the principles of object-oriented programming.