Most elements of JavaScript are built on "objects," and it employs "Object-Oriented Programming" (OOP) in its own unique style of programming.

JavaScript Abstraction is the concept of hiding implementation details and highlighting an object's main properties to users. This is how integrating Abstraction in JavaScript programs may improve code readability and minimize repetition. It also improves an application's security by showing only important details to users.

Still, confused and don't understand the concept of JavaScript Abstraction? Not to worry! This article will explain JavaScript Abstraction fully with appropriate examples. So, let's get started!

JavaScript Abstract Classes

If a class has one or more than one abstract method, it is referred to as an "Abstract Class," and this sort of class contains both abstract and normal JavaScript methods. Note that you have to specify at least one (1) abstract method in order to execute Abstraction in a class.

JavaScript Abstract Methods

An "Abstract Method" is a sort of method in an Abstract class that is just defined and doesn't have a function body or implementation.  The Abstract class must define the abstract method, and its definition could be included in the sub-classes.

Creating Abstract Class in JavaScript

First, we'll make a constructor function called "Person" with a "name" property. Our "Person" function that was generated will serve as an "Abstract Class":

function Person() {
    this.name = "Melly";
    if (this.constructor === Person) {
      throw new Error("Your Error Message...");
    }
};

Next, we will be to defining an "info()" method for our "Person" Abstract class that gives the value of our "name" property:

Person.prototype.info = function () {

    return this.name;

}

Finally, we will build an instance of the Abstract Class called "person":

var person = new Person();

The above code will fail because we cannot create instances or objects of an Abstract class.

We will now expand on the above example. And we will do this by implementing "Inheritance." To do this, we will write another constructor function that inherits the methods and attributes of the Abstract class "Person."

Extending JavaScript Abstraction Class in JavaScript

Also, in the example, we'll write a constructor function called "Teacher" that inherits the attributes and methods of the newly constructed "Person" class using "Prototype Chaining": Please note that the secret to understanding Javascript abstraction is to understand how to properly created Classes in Javascript

function Person() {
    this.name = "Melly";
    if (this.constructor === Person) {
     throw new Error("Your Error Message...");
    }
};
Person.prototype.info = function () {
    return "Person name is: " + this.name;
}
function Teacher(name) {
    this.name = name;
}

Teacher.prototype = Object.create(Person.prototype);
var teacher1 = new Teacher("Catherine");
console.log(teacher1.info());

In this scenario, the "Person" Abstract class implementation is not visible, and the "Teacher" Construct function (subclass) may only access the "info()" function to retrieve the value of the "name" property.

We attempted to incorporate Abstraction in earlier examples, but because we have not specified any Abstract methods, all of the characteristics of an Abstract Class are not entirely satisfied.

The ES6 Js version has numerous new capabilities, such as the ability to create "Classes" using the "class" keyword & implement methods. It also enables you to build Abstract methods in an Abstract class as well as extend them in subclasses using "Inheritance."

Now, we will create a Js Abstract Class with specified properties.

Implementing JavaScript Abstraction

Now, we will define "Person" as an Abstract class with a "constructor()" as well as an "info()" Abstract function by using the "class" keyword.

class Person {
  constructor() {
    if (this.constructor == Person) {
      throw new Error("Your Error Message...");
        }
    }
    info() {
        throw new Error(" The abstract Method does not have any implementation");
    }
}

Then, using "Inheritance," we will construct a subclass "Teacher" that inherits the attributes and methods of the "Person" class and defines the implementation of our Parent class abstract method "info()" in the "Teacher" class.

class Teacher extends Person {
    info() {
        console.log("This is a Teacher");
    }
}
var teacher1 = new Teacher();
teacher1.info();

The "info()" method implementation will now be run properly.

When the "Teacher" class invokes the Parent class abstract "info()" function, an error is thrown. To test this, add the line of code below to the declaration of the child class's "info()" function and run the program again.

super.info();

Conclusion

Abstraction is a key and fundamental concept in object-oriented programming. It is based on the development of customized data structures and classes. The present version of JavaScript has a system that allows you to build and operate with classes in the same manner that other notable OOP languages do.