Classes | Intermediate | Javascript Essentials Tutorial

Using classes in JavaScript

JavaScript classes provide a way to create objects and handle inheritance more easily. This tutorial covers the basics of using classes, including defining classes, constructors, methods, inheritance, and more.

Key Points:

Classes in JavaScript are syntactical sugar over the existing prototype-based inheritance.
Classes make it easier to create and manage objects and handle inheritance.
Understanding classes is essential for writing modern JavaScript code.

Defining a Class

A class is defined using the class keyword followed by the class name. Here is an example:


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

    greet() {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

const alice = new Person('Alice', 30);
console.log(alice.greet()); // Output: Hello, my name is Alice and I am 30 years old.

Constructors

The constructor method is a special method for creating and initializing objects created with a class. It is called automatically when a new instance of the class is created. Here is an example:


class Animal {
    constructor(name, species) {
        this.name = name;
        this.species = species;
    }

    describe() {
        return `${this.name} is a ${this.species}.`;
    }
}

const dog = new Animal('Buddy', 'dog');
console.log(dog.describe()); // Output: Buddy is a dog.

Methods

Methods are functions defined within a class. They can be used to define behaviors for the objects created from the class. Here is an example:


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

    display() {
        return `This car is a ${this.brand} ${this.model}.`;
    }
}

const myCar = new Car('Toyota', 'Corolla');
console.log(myCar.display()); // Output: This car is a Toyota Corolla.

Inheritance

Inheritance allows one class to inherit the properties and methods of another class using the extends keyword. Here is an example:


class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        return `${this.name} makes a sound.`;
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    speak() {
        return `${this.name} barks.`;
    }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
console.log(myDog.speak()); // Output: Buddy barks.

Getters and Setters

Getters and setters are special methods that provide a way to access and update the properties of an object. Here is an example:


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

    get area() {
        return this.width * this.height;
    }

    set dimensions({ width, height }) {
        this.width = width;
        this.height = height;
    }
}

const rect = new Rectangle(10, 20);
console.log(rect.area); // Output: 200
rect.dimensions = { width: 5, height: 15 };
console.log(rect.area); // Output: 75

Static Methods

Static methods are called on the class itself rather than on instances of the class. They are defined using the static keyword. Here is an example:


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

console.log(MathUtil.add(5, 3)); // Output: 8

Summary

In this tutorial, you learned about using classes in JavaScript, including defining classes, constructors, methods, inheritance, getters and setters, and static methods. Understanding classes is essential for writing modern, efficient, and maintainable JavaScript code.

JavaScript Essentials - Classes