Creating Classes in JavaScript: A Short Introduction

In this article, we’re going to explore classes. Classes in JavaScript provide a way to create reusable code that can be used throughout your application. They’re a fundamental building block of object-oriented programming (that is, OOP). Classes are used to define objects and their properties and methods, allowing you to create instances of the class, which is then used to manipulate the properties and methods of the object.

Let’s create a class!

Creating a class

To create a class in JavaScript, you use the class keyword followed by the name of the class. We’ll define properties and methods using the constructor method inside of the class.

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

  getMake() {
    return this.make;
  }

  getModel() {
    return this.model;
  }

  getYear() {
    return this.year;
  }
}

As you can see, we declared a class Car above, and attached three properties to it – make, model, and year. We also defined three methods – getMake(), getModel(), and getYear(), that return the property values.

Creating an instance of the class

To create an instance of the Car class, we use the new keyword followed by the name of the class and any required parameters.

let myCar = new Car("Ford", "Mustang", 2022);

We have created a new instance of the Car class called myCar. We have passed in three parameters – "Ford", "Mustang", and 2022 – which are used to set the values of the make, model, and year properties.

We can now use the methods of the Car class to get the property values of the myCar instance.

console.log(myCar.getMake()); // "Ford"
console.log(myCar.getModel()); // "Mustang"
console.log(myCar.getYear()); // 2022

Extending classes

Classes in JavaScript can inherit properties and methods from other classes by using the extends keyword. This allows you to create more complex class structures and reuse code from other classes. Let’s explore an example, and extend our class from above.

class SportsCar extends Car {
  constructor(make, model, year, topSpeed) {
    super(make, model, year);
    this.topSpeed = topSpeed;
  }

  getTopSpeed() {
    return this.topSpeed;
  }
}

We have defined a new class SportsCar that extends the Car class. The SportsCar class inherits the properties from the Car class, and we also included a new property called topSpeed().

The constructor method of the SportsCar class also calls the constructor method of the Car class using the super keyword to set the values of the make, model, and year properties.

Using the class

Creating instances of the SportsCar class works the same way as creating instances of the Car class as per the above.

let mySportsCar = new SportsCar("Ferrari", "488", 2022, 200);
console.log(mySportsCar.getMake()); // "Ferrari"
console.log(mySportsCar.getModel()); // "488"
console.log(mySportsCar.getYear()); // 2022
console.log(mySportsCar.getTopSpeed()); // 200

Conclusion

Classes are a powerful tool for us JavaScript developers. They allow us to create reusable code, providing a way to define objects and their properties and methods. We hope this article provided a direct understanding to your class knowledge. If it did, drop a thumbs up below!

We’ll be writing more on this subject in future articles. If you’d like to write for us, feel free to leave a comment below, or send us a message.

FAQ

Q: What are classes in JavaScript?

A: Classes in JavaScript are a way of creating reusable code by defining objects, along with their properties and methods. Classes provide a structure for creating instances of an object, which can be used to manipulate its properties and methods.

Q: How do you define a class in JavaScript?

A: In JavaScript, you define a class using the class keyword followed by the name of the class. Within the class, you define properties and methods using the constructor method.

Q: What is the difference between a class and an object in JavaScript?

A: A class is a structure for creating objects, while an object is an instance of a class. A class defines the properties and methods that an object will have, while an object represents a specific instance of those properties and methods.

Q: What is the constructor method in a class in JavaScript?

A: The constructor method is a special method that is called when a new instance of a class is created. It is used to set the initial values of the object’s properties.

Q: How do you create an instance of a class in JavaScript?

A: To create an instance of a class in JavaScript, you use the new keyword followed by the name of the class and any required parameters. This creates a new object based on the class’s structure.

Q: What is inheritance in JavaScript classes?

A: Inheritance in JavaScript classes is a way of creating new classes based on existing classes. The new class inherits the properties and methods of the existing class and can add its own properties and methods.

Q: How do you implement inheritance in JavaScript classes?

A: In JavaScript, you implement inheritance using the extends keyword, followed by the name of the class that you want to inherit from. You can then add any additional properties or methods to the new class.

Q: What is the super keyword in JavaScript classes?

A: The super keyword in JavaScript classes is used to call the constructor or methods of the parent class. It is used to access the parent class’s properties and methods from within the child class.