Skip to main content

JavaScript Classes (Live Playground)

JavaScript classes were introduced in ES6 (ECMAScript 2015) and provide a more convenient and organized way to work with objects and inheritance. In this tutorial, we'll introduce the basics of JavaScript classes, including their syntax, how to create instances, and the benefits of using classes in your code.

JavaScript Class Declaration​

A class is declared using the class keyword followed by the class name and a pair of curly braces {} containing the class body. The class body can contain methods, constructors, and properties:

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

  startEngine() {
    console.log('Engine started!');
  }
}

Constructor Method​

The constructor method is used to create and initialize an object when a new instance of a class is created. It allows you to set initial values for object properties and perform any setup tasks that are required.

The constructor method is defined within the class body using the constructor keyword, followed by parentheses () containing any required parameters, and a pair of curly braces {} containing the method body:

class MyClass {
  constructor(value) {
    this.value = value;
  }
}

Adding Methods to a Class​

Methods can be added to a class by including them in the class body. The method name is followed by parentheses () and a pair of curly braces {} containing the method body:

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

  startEngine() {
    console.log('Engine started!');
  }

  honk() {
    console.log('Honk! Honk!');
  }
}

const myCar = new Car('Toyota', 'Camry', 2020);
myCar.startEngine(); // Engine started!
myCar.honk(); // Honk! Honk!
Live Playground, Try it Yourself

Creating Instances​

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

const myCar = new Car('Toyota', 'Camry', 2020);
console.log(myCar); // Car { make: 'Toyota', model: 'Camry', year: 2020 }
Live Playground, Try it Yourself

Instance Methods​

Instance methods are functions defined within the class that can be called on instances of the class.

class MyClass {
  constructor(value) {
    this.value = value;
  }

  displayValue() {
    console.log(`The value is: ${this.value}`);
  }
}

const myInstance = new MyClass(42);
myInstance.displayValue(); // The value is: 42
Live Playground, Try it Yourself

Benefits of Using Classes​

Using classes in JavaScript provides several benefits:

  • Encapsulation: Classes encapsulate data and functionality, making it easier to organize and understand your code.

  • Inheritance: Classes support inheritance, allowing you to create new classes that inherit properties and methods from existing classes.

  • Readability: Class syntax is more readable and intuitive, making it easier for developers to understand the structure and purpose of your code.

  • Consistency: Classes provide a consistent and standardized way to work with objects and inheritance across your codebase.

Conclusion​

In this tutorial, we introduced the basics of JavaScript classes, including their syntax, how to create instances, and the benefits of using classes in your code. By using classes, you can improve the organization, readability, and maintainability of your code, making it easier to work with objects and inheritance in JavaScript.