Abstraction in JavaScript

JavaScript abstraction refers to the concept of hiding complex implementation details and showing only the essential features or functionalities of an object or module to the user also it is the fundamental concept in object-oriented programming.

How to achieve JavaScript Abstraction?

Creating abstraction in JavaScript involves organizing your code in a way that hides complex details and exposes only the essential features to other parts of your program.

Achieving abstraction in JavaScript involves creating abstract classes and interfaces, even though JavaScript itself doesn’t have native support for these concepts. Instead, developers often use prototypes, functions, and object-oriented patterns to enforce abstraction.

Example 1: Here, the Animal abstract class has an abstract method makeSound, and the Dog class extends Animal, providing a concrete implementation for the makeSound method. Trying to instantiate an object of the abstract class Animal will throw an error, showing the abstraction concept.

Javascript

// Define an abstract class Animal
function Animal() {
    if (this.constructor === Animal) {
        throw new Error(`Cannot instantiate
        abstract class Animal`);
    }

    this.makeSound = function () {
        throw new Error(`Cannot call abstract
        method makeSound from Animal`);
    };
}

// Create a concrete class Dog that extends Animal
function Dog(name) {
    Animal.call(this);
    this.name = name;

    this.makeSound = function () {
        console.log(`${this.name} barks`);
    };
}

// Inherit from the abstract class
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Create an instance of the Dog class
let dog = new Dog("Buddy");
dog.makeSound();

// Try to create an instance of
// the abstract class Animal
try {
    let animal = new Animal();
} catch (error) {
    console.error(error.message);
}

Output: (error)

Cannot instantiate abstract class Animal

Example 2: Here, the Shape class serves as an abstract class with a property shapeName and a method display. The Triangle class extends Shape and provides a concrete implementation for the shapeName property. Creating an object of the abstract class Shape will result in an error, enforcing the abstraction concept.

Javascript

// Creating a constructor function
// for the abstract class Shape
function Shape() {
    this.shapeName = "shapeName";
    throw new Error(`You cannot create an
    instance of Abstract Class`);
}

Shape.prototype.display = function () {
    return "Shape is: " + this.shapeName;
};

// Creating a constructor function
// for the concrete class Triangle
function Triangle(shapeName) {
    this.shapeName = shapeName;
}

// Creating an object without
// using the function constructor
Triangle.prototype = Object
    .create(Shape.prototype);

// Creating an instance of the Triangle class
let triangle = new Triangle("Equilateral");
console.log(triangle.display());

Output: (error)

Cannot instantiate abstract class Animal