JavaScript Abstraction

What is Abstraction in JavaScript?

In JavaScript, abstraction refers to the concept of hiding complex details and showing only an object's essential features or functionalities. Simply, it helps us reduce complexity and allows us to design efficiently and implement complex software systems. We can achieve abstraction with either abstract classes or with the help of interfaces

An abstraction is a way of hiding the implementation details and showing only the functionality to the users. In other words, it ignores the irrelevant details and shows only the required ones.

Points to Remember

We cannot create an instance of Abstract Class.
It reduces the duplication of code.

Why do we use Abstraction in JavaScript?

Abstraction in JavaScript, we have several important purposes to use it. Such as:

Simplification

With the use of abstraction, developers can simplify complex systems by hiding unnecessary details and exposing only the essential parts. It makes the code easier to understand and maintain.

Encapsulation

With the use of abstraction, we can encapsulate the implementation details of a particular function and we can allow the developers to focus on the functionality usage rather than how we can implement it. Because of this we can promote modularity and reduce coupling between the different parts of the codebase.

Reusability

When we abstract the common pattern and functionalities into reusable components it helps the developers to save time and effort by leveraging existing code rather than reusing the code each time.

Flexibility

With the help of abstraction, developers can create an interface that can be implemented differently under the hood. It provides flexibility for easier adaptation to changing requirements and environments without the need to modify a large portion of the program.

Maintainability

When we abstract away implementation details it will reduce the likelihood of bugs and it make changes or updates to the program without affecting the other parts of the system.

In JavaScript specifically, we can achieve abstraction with the help of functions, classes, modules, and libraries, among others. With the help of these tools, developers can organize and structure their code or program in a way that promotes clarity, maintainability, and also scalability.

How we can achieve abstraction in JavaScript?

In JavaScript, when we can create an abstraction that involves organizing your code in a way that hides the complex details and exposes only the essential features to other parts of the programs.

If you want to achieve abstraction in JavaScript you need to create an abstract class and also an interface even though JavaScript doesn't have native support for these types of concepts. Most developers often use prototypes, functions, and object-oriented patterns to enforce abstraction.

Example 1:

 
// Define a function called `add` that takes two arguments, `a` and `b`, and returns their sum.
function add(a, b) {
    return a + b;
  }
  // Define a function called `subtract` that takes two arguments, `a` and `b`, and returns their difference.
  function subtract(a, b) {
    return a - b;
  }
    // Define a function called `multiply` that takes two arguments, `a` and `b`, and returns their product.
  function multiply(a, b) {
    return a * b;
  }
    // Define a function called `divide` that takes two arguments, `a` and `b`, and returns their quotient.
  function divide(a, b) {
    return a / b;
  }
    // Define a function called `calculate` that takes two arguments, `a` and `b`, and an operator, and returns the result of applying the operator to `a` and `b`.
  function calculate(a, b, operator) {
    switch (operator) {
      case 'add':
        return add(a, b);
      case 'subtract':
        return subtract(a, b);
      case 'multiply':
        return multiply(a, b);
      case 'divide':
        return divide(a, b);
      default:
        throw new Error('Invalid operator');
    }
  }
   // Call the `calculate` function with the arguments 5, 3, and 'add'.
  const result = calculate(5, 3, 'add');
  
  // Print the result to the console.
  console.log(result); // Output: 8

Output:

Example 2:

Let's take a program to check if we can create an instance of the Abstract class or not.

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //creating a constructor function
        function vehicle()
        {
            this.vehicleName = vehicleName;
            throw new Error("you cannot create an instance of Abstract class");
        }
        Vehicle.prototype.display= function()
        {
            return this.vehicleName;
        }
        var vehicle = new Vehicle();
    </script>
</body>
</html>

Output:

Example 3

Let's take an example to achieve abstraction

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //creating a constructor function
        function Vehicle()
        {
            this.vehicleName = "vehicleName";
            throw new Error("You cannot create an instance of Abstract Class");
        }
        Vehicle.prototype.display= function()
        {
            return "Vehicle is:" +this.vehicleName;
        }
        //creating a constructor function
        function Bike(vehicleName)
        {
            this.vehicleName = vehicleName;
        }
        //Creating object without using the function constructor
        Bike.prototype = Object.create(Vehicle.prototype);
        var bike= new Bike(" Hero Honda");
        document.writeln(bike.display());
    </script>
</body>
</html>

Output:

Example 4:

 
// Define a function called `calculateArea` that takes an object with a `width` and `height` property, and returns the area of the rectangle.
function calculateArea(rectangle) {
  return rectangle.width * rectangle.height;
}
// Define an object called `rectangle1` with a `width` of 5 and a `height` of 10.
const rectangle1 = {
  width: 3,
  height: 10
};
// Define an object called `rectangle2` with a `width` of 10 and a `height` of 20.
const rectangle2 = {
  width: 10,
  height: 20
};
// Call the `calculateArea` function with the `rectangle1` object as an argument.
const area1 = calculateArea(rectangle1);
// Call the `calculateArea` function with the `rectangle2` object as an argument.
const area2 = calculateArea(rectangle2);
// Print the areas to the console.
console.log(`Area of rectangle1: ${area1}`); 
console.log(`Area of rectangle2: ${area2}`); 

Output:

 
Area of rectangle1: 30
Area of rectangle2: 200

Next TopicJavaScript Cookies

← prev next →

We provides tutorials and interview questions of all technology like java tutorial, android, java frameworks

Contact info

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

[email protected].

JavaScript Abstraction

What is Abstraction in JavaScript?

Points to Remember

Why do we use Abstraction in JavaScript?

Simplification

Encapsulation

Reusability

Flexibility

Maintainability

How we can achieve abstraction in JavaScript?

Learn Important Tutorial

B.Tech / MCA

Preparation

Contact info

Follow us

Tutorials

Interview Questions

Online Compiler

Python

AI, ML and Data Science

Java

B.Tech and MCA

Web Technology

Software Testing

Technical Interview

Java Interview

Web Interview

Database Interview

Company Interviews

JavaScript Tutorial

JavaScript Basics

JavaScript Objects

JavaScript BOM

JavaScript DOM

JavaScript Validation

JavaScript OOPs

JavaScript Cookies

JavaScript Events

Exception Handling

JavaScript Misc

JavaScript Advance

Differences

Questions

Lodash

MCQ

Interview Questions

JavaScript DataView

JavaScript Handler

JavaScript JSON Object

JavaScript Number Methods

JavaScript Reflect

JavaScript Symbol

Symbol Property

JavaScript Math Methods

JavaScript Date Methods

JavaScript Map Methods

JavaScript Object Methods

JavaScript Set Methods

JavaScript String Methods

JavaScript TypedArray Method

JavaScript WeakMap Methods

JavaScript WeakSet Methods

JavaScript Array Methods

JavaScript RegExp Object

JavaScript Abstraction

What is Abstraction in JavaScript?

Points to Remember

Why do we use Abstraction in JavaScript?

Simplification

Encapsulation

Reusability

Flexibility

Maintainability

How we can achieve abstraction in JavaScript?

Learn Important Tutorial

B.Tech / MCA

Preparation

Contact info

Follow us

Tutorials

Interview Questions

Online Compiler