JavaScript - Abstraction

Abstraction in JavaScript

The Abstraction in JavaScript can be achieved using the abstract class. In object-oriented programming, the abstraction concept allows you to hide the implementation details and expose features only to the users.

For example, you can execute the Math object methods in JavaScript by accessing the method using its name but can’t see how it is implemented. Same way array methods like push(), pop(), etc., can be executed, but you don’t know how it is implemented internally.

So, the abstraction makes code cleaner by exposing the required features and hiding the internal implementation details.

How to Achieve Abstraction in JavaScript?

In most programming languages, you can achieve abstraction using the abstract class. The abstract class contains only method declaration but not implementation. Furthermore, you need to implement the methods declared in the abstract class into the child class. Also, you can’t create an instance of the abstract class.

JavaScript doesn’t allow to create an abstract class like Java or CPP natively, but you can achieve the same functionality using the object constructor function.

First, let’s create an abstract class using the example below.

Creating the Abstract Class

In the below example, the fruit() function initializes the name property. When anyone creates an instance of the fruit(), the value of the constructor property becomes equal to the ‘fruit’. So, we throw an error to prevent creating an instance of the fruit.

Also, we have added the getName() method to the prototype. After that, we create an instance of the fruit() constructor, and you can observe the error in the output.

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         // Object constructor
         function fruit() {
            this.name = "Fruit";
            if (this.constructor === fruit) {// Preventing the instance of the object
               throw new Error("You can't create the instance of the fruit.");
            }
         }
         // Implementing method in the prototype
         fruit.prototype.getName = function () {
            return this.name;
         }
         const apple = new fruit();
      } catch (error) {
         document.getElementById("output").innerHTML = error;
      }
   </script>
</body>
</html>

Output

Error: You can't create the instance of the fruit.

In the above example, you learned to achieve the abstract class functionality.

Now, you will learn to extend the abstract class and implement the methods defined in the abstract class via the example below.

Extending the Abstract Class

In the example below, fruit() constructor is similar to the above example. We have implemented the Apple() constructor, initializing the name property.

After that, we assign the prototype of the fruit() function to the Apple() function using the Object.create() method. It means Apple() function inherits the properties and methods of the fruit() class.

After that, we have created the instance of the Apple() class and invoked the getName() method.

<html>
<body>
   <div id = "output">The name of the fruit is: </div>
   <script>
      // Abstract class
      function fruit() {
         this.name = "Fruit";
         if (this.constructor === fruit) { // Preventing the instance of the object
            throw new Error("You can't create the instance of the fruit.");
         }
      }

      // Implementing method in the prototype
      fruit.prototype.getName = function () {
         return this.name;
      }

      // Child class
      function Apple(fruitname) {
         this.name = fruitname;
      }

      // Extending the Apple class with the fruit class
      Apple.prototype = Object.create(fruit.prototype);

      const apple = new Apple("Apple");
      document.getElementById("output").innerHTML += apple.getName();
   </script>
</body>
</html>

Output

The name of the fruit is: Apple

The prototype implements the getName() method in the above code. So, it is hidden.

This way, you can use an object constructor to achieve abstraction in JavaScript.

Print Page