For many years, JavaScript was known as a prototype-based language. However, with ES6 (ECMAScript 2015), the class structure, which provides a more familiar syntax for object-oriented programming (OOP), became a part of the language. In this article, you will learn the fundamentals of JavaScript classes and how to use them. You will also gain a better understanding of the topic with various example code snippets.
The Basics of JavaScript Classes
JavaScript classes are a structure that makes object-oriented programming easier and more understandable. Classes provide a template for creating objects and allow you to define an object’s properties and methods.
Defining a Simple Class
To define a class, you use the class keyword. Here’s a simple example:
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.`);
}
}
const john = new Person('John Doe', 30);
john.greet(); // Hello, my name is John Doe and I am 30 years old.
In this example, we defined a class called Person. The constructor method is called when a new object is created and sets the name and age properties. The greet method uses these properties to print a message.
Inheritance and Subclasses
JavaScript classes can inherit from other classes, making it easier to write reusable code. Inheritance is done using the extends keyword.
Inheritance Example
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
speak() {
console.log(`${this.name} barks.`);
}
}
const rex = new Dog('Rex', 'German Shepherd');
rex.speak(); // Rex barks.
In this example, we defined a class called Animal and a subclass called Dog. The Dog class overrides the speak method from the Animal class and defines its own speak method. Additionally, the Dog class uses the super keyword to call the constructor method of the Animal class.
Static Methods and Properties
Static methods and properties belong to the class itself and are called directly on the class, not on instances of the class.
Static Method Example
class Calculator {
static add(a, b) {
return a + b;
}
}
console.log(Calculator.add(5, 3)); // 8
In this example, the Calculator class has a static method called add. This method can be called directly on the class without creating an instance.
Summary and Conclusion
JavaScript classes make object-oriented programming more accessible and understandable in modern JavaScript. Classes provide a useful structure for creating objects, inheriting from other classes, and defining static methods.
In this article, we covered the basic uses of JavaScript classes and some key features. Classes enable writing more organized and maintainable code for large and complex applications. By using JavaScript classes, you can explore how to better organize your projects and apply the knowledge you’ve gained.