JavaScript Classes

In the previous section, we explored JavaScript prototypes and how they enable object-oriented programming (OOP) through inheritance. While prototypes are powerful, ES6 introduced a more structured and familiar syntax for creating classes in JavaScript. This tutorial will guide you through using ES6 class syntax, constructors, and creating instances.

Introduction

JavaScript classes provide a more intuitive way to define objects and their behaviors compared to traditional prototype-based inheritance. They simplify the process of creating multiple similar objects with shared methods and properties. Understanding classes is essential for modern JavaScript development, especially when working on larger projects or frameworks like React.

Core Content

What Are Classes?

In object-oriented programming, a class is a blueprint for creating objects. It defines a set of properties (attributes) and methods that the created objects will have. In JavaScript, classes are syntactic sugar over prototypes but offer clearer syntax and more familiar structure to developers coming from other OOP languages like Java or C++.

ES6 Class Syntax

ES6 introduced the class keyword to define classes in JavaScript. Here's the basic syntax:

1class ClassName {
2constructor(parameters) {
3  // code to initialize properties
4}
5 
6method1() {
7  // code for method1
8}
9 
10method2() {
11  // code for method2
12}
13}

• constructor(): This special method is called when an instance of the class is created. It initializes the object's properties.
• Methods: Regular methods that define the behaviors of the objects.

Creating a Class

Let's create a simple Car class to demonstrate how classes work:

1class Car {
2constructor(make, model) {
3  this.make = make;
4  this.model = model;
5}
6 
7displayInfo() {
8  console.log(`This car is a ${this.make} ${this.model}.`);
9}
10}

Creating Instances

To create an instance of the Car class, you use the new keyword followed by the class name and any required arguments:

1const myCar = new Car('Toyota', 'Corolla');
2myCar.displayInfo();

Explanation

• Base Class (Animal): This class has a constructor to initialize the name property and a speak() method that outputs a generic message.
• Derived Class (Dog): The Dog class extends the Animal class. It uses the super keyword to call the parent class's constructor, initializing the name property. It also has its own speak() method that overrides the one in the Animal class.

Summary

• Classes provide a structured way to define objects and their behaviors.
• The class keyword is used to define classes in JavaScript.
• The constructor() method initializes object properties.
• Instances of a class are created using the new keyword.
• Classes can be extended to create derived classes with additional or overridden methods.

What's Next?

Now that you understand how to create classes, constructors, and instances in JavaScript, the next step is to learn about JavaScript Class Inheritance. This will allow you to build more complex object hierarchies and share code between related classes efficiently. Stay tuned for the next tutorial!