Classes in JavaScript

Classes allow a clearer and more concise syntax for creating objects and defining their behavior (compared to traditional constructor functions).

They were introduced in ECMAScript 6 as a more structured and modern way to work with object-oriented programming (and, above all, more similar to other languages).

Class Syntax

A class is declared using the keyword class, followed by the class name. The name must start with an uppercase letter by convention.

class ClassName {
  constructor(parameters) {
    // Property initialization
  }

  method() {
    // Method definition
  }
}

Let’s see it with an example of how to define and use a basic class:

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

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

Creating Instances

A class is like a mold or template used to create objects with specific properties and methods. Each object created from a class is called an instance of that class.

To create a new instance based on a class, the keyword new is used followed by the class name and its arguments, if any.

// Create instances of the Person class
const person1 = new Person("Luis", 30);
const person2 = new Person("Ana", 25);

person1.greet(); // "Hello, my name is Luis and I am 30 years old."

Methods in Classes

Methods are functions that belong to a class and can be used by its instances. They are defined within the class block.

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

  subtract(a, b) {
    return a - b;
  }
}

const calc = new Calculator();
console.log(calc.add(3, 5)); // Prints: 8
console.log(calc.subtract(10, 4)); // Prints: 6

Difference Between Classes and Literal Objects

While literal objects are useful for simple structures, classes are more suitable for handling complex logic and multiple instances.

Let’s see a comparison of how to create the same object with both syntaxes.

const person = {
  name: "Luis",
  speak() {
    console.log(`Hello, I am ${this.name}.`);
  }
};

person.speak(); // Prints: Hello, I am Luis.

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

  speak() {
    console.log(`Hello, I am ${this.name}.`);
  }
}

let luis = new Person("Luis");
luis.speak();