Classes in JavaScript

-

 

Classes in JavaScript: A Comprehensive Guide

In JavaScript, classes were introduced in ECMAScript 6 (ES6) as a way to provide a clearer, more concise syntax for creating objects and dealing with inheritance. They are essentially syntactic sugar over the existing prototype-based inheritance system. Classes provide a more familiar structure, particularly for developers coming from object-oriented programming (OOP) languages like Java or C#.

1. Basic Syntax of Classes

A JavaScript class is defined using the class keyword followed by a class name and a constructor function. The constructor is a special method that is called when an instance of the class is created.

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

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

// Creating an instance of the class
const person1 = new Person("Alice", 30);
person1.greet(); // Output: "Hello, my name is Alice and I am 30 years old."

2. Constructor Method

The constructor is a special method inside the class that is automatically called when a new object is created from the class. The constructor can accept parameters to initialize the object's properties.

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

const myCar = new Car("Toyota", "Corolla");
console.log(myCar.brand); // "Toyota"
console.log(myCar.model); // "Corolla"

3. Methods in Classes

You can define methods inside a class, which are functions that are available on instances of the class. These methods are added to the prototype of the class, which means they are shared by all instances.

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

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

const dog = new Animal("Dog");
dog.speak(); // "Dog makes a noise."

4. Class Inheritance

JavaScript classes support inheritance, which allows one class to inherit properties and methods from another class. You use the extends keyword to create a subclass, and the super() function to call the constructor of the parent class.

Example:

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

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

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

    speak() {
        super.speak(); // Call the parent class method
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak();
// Output:
// "Buddy makes a noise."
// "Buddy barks."

5. Getter and Setter Methods

JavaScript classes allow you to define getter and setter methods. These are special methods that allow you to access and modify an object's properties in a controlled way.

Example:

class Rectangle {
    constructor(width, height) {
        this._width = width;  // Convention to use underscore for private fields
        this._height = height;
    }

    get area() {
        return this._width * this._height;  // Compute the area when accessed
    }

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

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

const rectangle = new Rectangle(5, 10);
console.log(rectangle.area); // Output: 50
rectangle.width = -5;        // Output: Width must be a positive value.
rectangle.height = 15;
console.log(rectangle.area); // Output: 75

6. Static Methods

Static methods are methods that belong to the class itself, rather than instances of the class. You define a static method using the static keyword.

Example:

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

    static multiply(a, b) {
        return a * b;
    }
}

console.log(MathOperations.add(5, 3));        // Output: 8
console.log(MathOperations.multiply(5, 3));   // Output: 15

7. Private Fields and Methods (ES2022)

Starting from ES2022, JavaScript supports private fields and methods, which can be used to create truly private properties and methods that can't be accessed outside the class. Private fields are prefixed with #.

Example:

class BankAccount {
    #balance = 0;  // Private field

    constructor(initialBalance) {
        this.#balance = initialBalance;
    }

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

    withdraw(amount) {
        if (amount > 0 && this.#balance >= amount) {
            this.#balance -= amount;
        }
    }

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

const account = new BankAccount(100);
account.deposit(50);
account.withdraw(30);
console.log(account.getBalance()); // Output: 120
// console.log(account.#balance); // SyntaxError: Private field '#balance' must be declared in an enclosing class

8. Class Expression

In JavaScript, classes can also be defined as expressions. This means you can assign a class to a variable, just like any other expression.


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

    display() {
        console.log(`${this.brand} ${this.model}`);
    }
};

const myCar = new Car("Tesla", "Model S");
myCar.display();  // Output: "Tesla Model S"

9. Class and Prototype

Although JavaScript classes provide a more structured syntax, under the hood, classes are just syntactic sugar over JavaScript's prototype-based inheritance system. You can still interact with class prototypes directly.

Example:

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

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

const dog = new Animal("Dog");
console.log(Object.getPrototypeOf(dog) === Animal.prototype);  // Output: true

10. Dynamic Method Definition

You can also define methods dynamically within a class by adding them directly to the class prototype.

Example:

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

// Add a method to the Car class dynamically
Car.prototype.drive = function() {
    console.log(`${this.brand} ${this.model} is driving.`);
};

const car = new Car("Ford", "Mustang");
car.drive(); // Output: "Ford Mustang is driving."

Conclusion

JavaScript classes bring a more traditional object-oriented approach to JavaScript, making it easier to create objects, manage inheritance, and define methods. Classes in JavaScript are highly flexible and can be extended with getter/setter methods, static methods, and private fields. They provide developers with tools to build clean, maintainable, and reusable code in a more structured way than with plain objects or functions.

Key concepts to remember:

  1. Class Declaration: Define classes with class keyword.
  2. Constructor: Initialize objects with the constructor() method.
  3. Methods: Define functions inside the class to handle object behaviors.
  4. Inheritance: Use extends and super() to create subclasses.
  5. Static Methods: Define methods that belong to the class, not instances.
  6. Private Fields: Use # to define truly private fields and methods.

Comments

Post a Comment

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

-
  PrimeNG Tutorial: Frequently Used Classes and Components PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles. In this tutorial, we will explore some of the frequently used components and classes in PrimeNG , along with examples for creating interactive, modern, and responsive UIs. 1. Setting Up PrimeNG Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps: Step 1: Install PrimeNG and PrimeIcons Run the following commands to install PrimeNG and PrimeIcons: bash Copy code npm install primeng npm install primeicons Step 2: Import Required Modules After installation, you need to import the relevant PrimeNG modules in your app.module.ts . Example of importing commonly used modules: typescript Copy code import { NgModule ...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

Building strong foundational knowledge in frontend development topics

-
 These topics are essential for building strong foundational knowledge, and each comes with a simple solution or code snippet to illustrate the concept. 1. What is the difference between HTML, CSS, and JavaScript? Answer : HTML (Hypertext Markup Language) is used for structuring web content (headings, paragraphs, images, links, etc.). CSS (Cascading Style Sheets) is used for styling the layout, design, and appearance of the web content. JavaScript is used for adding interactivity and dynamic behavior to the website (e.g., form validation, animations, events). html <!-- HTML --> < div class = "box" > </ div > css /* CSS */ .box { width : 100px ; height : 100px ; background-color : blue; } javascript // JavaScript document . querySelector ( '.box' ). addEventListener ( 'click' , function ( ) { alert ( 'Box clicked!' ); }); 2. What are semantic HTML elements and why are they important? Answer : Semantic HTML elements cl...
Read more