Classes in JavaScript

In JavaScript, classes are a way to define blueprints for creating objects with shared properties and methods. Introduced in ECMAScript 2015 (ES6), the class syntax provides a more structured and object-oriented approach to creating and working with objects.

Here’s a basic overview of how classes work in JavaScript:

1. Class Declaration: You can declare a class using the class keyword, followed by the class name. Inside the class, you define properties and methods.

class Person {
  constructor() {
    // Constructor for initializing properties
  }

  myMethod() {
    // Method definition
  }
}

2. Constructor Method: The constructor method is a special method that gets called when an object is instantiated from the class. It's used for initializing object properties.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

3. Properties and Methods: You can define properties and methods inside the class. Properties are variables associated with the class, and methods are functions.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  myMethod() {
    console.log(`Name: ${this.name}, Age: ${this.age}`);
  }
}

In this example, we have a Person class with a constructor method that initializes the name and age properties. The class also has a myMethod method that logs information about the person to the console.

Get Vibha Sharma’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

4. Instantiation: To create an object (instance) from a class, you use the new keyword.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  myMethod() {
    console.log(`Name: ${this.name}, Age: ${this.age}`);
  }
}

// Create an instance of the Student class
const student1 = new Student("Alice Smith", 20, "S12345");

// Call the overridden "myMethod" method on the student instance
student1.myMethod();

When you try to execute the code, will get the output:

"Name: John Doe, Age: 25"

5. Inheritance: Classes support inheritance, allowing one class to inherit properties and methods from another class. Certainly! Inheritance in JavaScript classes allows you to create a hierarchy of classes where child classes (subclasses) can inherit properties and methods from parent classes (superclasses). This helps in code reusability and promotes a hierarchical organization of your code.

Here’s an example demonstrating inheritance in JavaScript classes:

// Define a superclass called "Shape"
class Shape {
  // Constructor method to initialize object properties
  constructor(color) {
    this.color = color;
  }

  // Method to get the color of the shape
  getColor() {
    return this.color;
  }
}

// Define a subclass called "Circle" that extends the "Shape" class
class Circle extends Shape {
  // Constructor method for Circle class
  constructor(color, radius) {
    // Call the parent class constructor using "super"
    super(color);
    this.radius = radius;
  }
 // Method to calculate the area of the circle
  calculateArea() {
    return Math.PI * this.radius ** 2;
  }
}

// Create an instance of the Circle class
const myCircle = new Circle('red', 5);

// Access properties and call methods on the instance
console.log('Color:', myCircle.getColor()); // Output: Color: red
console.log('Area:', myCircle.calculateArea()); // Output: Area: 78.53981633974483

In this example:

• We have a superclass Shape with a constructor that initializes the color property and a method getColor() to retrieve the color.
• We define a subclass Circle that extends Shape. It has its constructor to initialize color and radius, and a method calculateArea() to compute the area of the circle.
• When creating an instance of Circle, we pass both color and radius parameters. The Circle class inherits the getColor() method from its superclass, which it can use directly.

Inheritance allows Circle to inherit properties and methods from Shape, making it easier to define related objects hierarchically.

In conclusion, JavaScript classes provide a more structured and familiar syntax for defining object-oriented programming paradigms in JavaScript. They were introduced in ECMAScript 2015 (ES6) and offer a way to define blueprints for creating objects, as well as supporting inheritance, making code organization and maintenance more straightforward for developers.

Thanks for reading!!!!