JavaScript Classes Made Easy: A Quick Start Guide

One feature is its support for object-oriented programming (OOP), a programming paradigm that organizes code around objects rather than functions and logic.

In years past, OOP might have been difficult for users coming from different languages, but today, OOP in JavaScript can be implemented using classes.

Classes in JavaScript were introduced with the ECMAScript 6 (ES6) standard and provided a cleaner, more readable syntax for creating objects, managing their state and behavior, and reusing code.

This article will explore the basics of JavaScript classes, why they are useful, and how to create and use them effectively.

Creating a JavaScript class

Creating a class in JavaScript is simple.

Here is the syntax to create a class:

class MyClass {
  constructor(parameters) {
    // Properties and methods
  }
  // Other properties and methods
}

The constructor method is a special method that is used to create and initialize an object created from a class.

You'll see it in action when we go through the next section.

Decaring Properties and Methods

• Properties are variables associated with a class. They represent characteristics of an object created from the class, like 'brand' or 'model'.
• Methods are functions associated with a class. They represent actions an object created from the class can perform, like 'start' or 'stop'.

In a class, properties can be defined inside the constructor method or directly within the class body, and methods are defined directly within the class body. Here's how you can do it:

class Car {
  constructor(brand, model) {
    // Properties defined in constructor
    this.brand = brand; 
    this.model = model; 
  }

  color = 'black'; // Property defined in class body

  start() {
    // Method defined in class body
  }

  stop() {
    // Method defined in class body
  }
}

As you can see in this example, brand and model are properties defined in the constructor of the Car class, color is a property defined directly in the class body, and start and stop are methods defined in the class body.

Next, how do we use them?

Accessing Methods and Properties

Your "class" is just an object.

You can access the properties and methods of objects created from a class using the dot operator.

Let's go through an example that will help solidify your understanding:

const myToyota = new Car('Toyota', 'Corolla');
console.log(myToyota.brand); // 👈 Logs "Toyota"
console.log(myToyota.model); // 👈 Logs "Corolla"
console.log(myToyota.color); // 👈 Logs "Black"
myCar.start(); // 👈 Calls the "start" method and logs the return value
myCar.stop(); // 👈 Calls the "stop" method and logs the return value

As you can see, we created a myToyota object from the Car class. We then accessed the brand, model, and color properties and the start and stop methods of the myToyota object.

Why would I use classes?

Using classes in JavaScript can be useful for the following reasons:

• Clean and more readable code: The class syntax is cleaner and more readable compared to using functions and prototypes for OOP.

• Encapsulation: Classes allow you to encapsulate properties and methods inside an object, making it easier to manage the object’s state and behavior.

• Reusability: Classes make it easier to create multiple objects with the same properties and methods.

• Inheritance: Classes in JavaScript support inheritance, which allows you to create new classes based on existing ones.

Happy Coding! ✨