Javascript Classes with Examples

Javascript Classes Intro

JavaScript is a popular programming language used for creating interactive web pages and applications.

One of the key features of JavaScript is its ability to use classes, which allow developers to create reusable code and improve the organization of their programs.
In this article we will explore the basics of JavaScript classes, object-oriented programming concepts in classes, and best practices for writing effective classes.

JavaScript Classes Syntax

JavaScript classes are a way to define a blueprint for creating objects with similar properties and methods. They are essentially a template for creating multiple instances of the same object.

The syntax for declaring a class in JavaScript is similar to that of other programming languages, such as Java and C++. 

To declare a class in JavaScript, we use the class keyword followed by the name of the class.

Inside the class, we can define properties and methods using the constructor function and other functions.

class MyNameClass {
  constructor(property1, property2) {
    this.property1 = property1;
    this.property2 = property2;
  }
}

We can define the constructor method as follows:

• Its name is "constructor" and it defines the basic properties of the class and will initialize the properties of the object created from the class.
• It runs automatically when a new object is created.
• If you don't define a constructor method, an empty constructor method will automatically be created.

We can then create instances of the class using the new keyword, and access the properties and methods of each instance using dot notation.

const myClass = new MyNameClass("house", "white");
console.log(myClass.property1);

Try it Yourself

In addition to the constructor method, a class can have many more methods or functions:

class MyNameClass {
  constructor() { ... }
  method_A() { ... }
  method_B() { ... }
  method_C() { ... }
}

Try it Yourself

Object-oriented programming concepts in Javascript

JavaScript classes support key object-oriented programming concepts such as encapsulation, inheritance, and polymorphism. 

• Encapsulation refers to the practice of keeping data and methods within a class private, so they can only be accessed by that class or its instances.
• Inheritance allows us to create new classes based on existing classes, inheriting their properties and methods.
• Polymorphism allows us to use the same method or property in different ways, depending on the context.

Inheritance between classes

To define a new class that extends an existing class, we use the extends keyword followed by the name of the parent class. 
We can then override methods and properties in the child class to customize its behavior. 

class MainNameClass {
  constructor(property1) {
     this.property1 = property1;
  }
  methods_main() { ... }
}

class nameClassInherited extends MainNameClass {
  constructor(property1, property2) {
     super(property1);
     this.property2 = property2;
  }
  method_A() { ... }
}

const newObject = new nameClassInherited(prop1, prop2);
newObject.method_A();
newObject.methods_main();
newObject.property2;

By calling the super() method in the inherited constructor method, we call the constructor method of the parent or parent class and have access to the properties and methods of the parent class.

Try it Yourself