Classes and Objects in JavaScript

Published: at 08:52 PM

JavaScript, a versatile programming language, introduced classes as a syntactical sugar for creating objects in ECMAScript 2015 (ES6). This blog post will explore the concepts of classes and objects in JavaScript, highlighting their syntax, features, and practical applications.

What is a Class?

A class in JavaScript serves as a blueprint for creating objects. It encapsulates data and methods that operate on that data, providing a structured way to define object properties and behaviors.

Key Features of Classes

Class Syntax

The basic syntax for defining a class in JavaScript is as follows:

class ClassName {
    constructor(parameters) {
        // Initialization code
    }

    methodName() {
        // Method code
    }
}

Example of a Class

Let’s consider a simple example of a Car class:

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

    age(currentYear) {
        return currentYear - this.year;
    }
}

// Creating instances of Car
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

console.log(`My ${myCar1.name} is ${myCar1.age(2024)} years old.`);
console.log(`My ${myCar2.name} is ${myCar2.age(2024)} years old.`);

Creating Objects

Objects are instances of classes. When you create an object using the new keyword, the constructor method initializes its properties:

const myCar = new Car("Toyota", 2020);
console.log(myCar); // Output: Car { name: 'Toyota', year: 2020 }

Accessing Properties and Methods

You can access an object’s properties and methods using the dot notation:

console.log(myCar.name); // Output: Toyota
console.log(myCar.age(2024)); // Output: 4

Inheritance

JavaScript classes support inheritance, allowing one class to inherit properties and methods from another. This is done using the extends keyword:

class ElectricCar extends Car {
    constructor(name, year, batteryLife) {
        super(name, year); // Call the parent class constructor
        this.batteryLife = batteryLife;
    }

    displayBatteryLife() {
        console.log(`The battery life of ${this.name} is ${this.batteryLife} hours.`);
    }
}

const myElectricCar = new ElectricCar("Tesla", 2021, 12);
myElectricCar.displayBatteryLife(); // Output: The battery life of Tesla is 12 hours.

Class Diagram Representation

To visualize the relationship between classes and their methods, we can use Mermaid.js to create a class diagram:

inherits
Car
string name
int year
age(currentYear)
ElectricCar
int batteryLife
displayBatteryLife()

Conclusion

Classes and objects are essential components of JavaScript that enable developers to create structured and reusable code. By understanding how to define classes and instantiate objects, programmers can effectively model real-world entities within their applications. The introduction of classes in ES6 has provided a more organized approach to object-oriented programming in JavaScript, making it easier to manage complex codebases.

Sources