How to implement Abstraction in JavaScript | JavaScript & Object Oriented Programming | Part 8

Shadab Ansari

4 years ago

In the Previous Tutorial, we learned the following –

Every object has a constructor property that returns the function used to create that object.
JavaScript has a built-in Constructor Function Object() that creates the object literal.
In JavaScript, functions are also object.
Like objects, functions also have a constructor property.
JavaScript has another built-in Constructor Function Function() that creates the function.
There are several other build-in Constructor Functions provided by JavaScript like Boolean, String and Number.

Unlike other programming languages vanilla JavaScript does not have concepts of private, public or protected keywords. It has led to a common question among JavaScript developers – how to implement abstraction in JavaScript.

What is Abstraction?

Well, if you remember from the Introduction Tutorial that Abstraction is one of the Object Oriented programming principles.

Have you ever wondered when you press your car’s accelerator what exactly happens inside? What principles of mechanical engineering applies there? Most of us do not care about it. All we care about is when we press the pedal the car should accelerate. That describes abstraction.

In abstraction, we hide the complexity of a system from end user and show them details that matters to them. We hide implementation details and present a simple interface to deal with.

Let us write a simple JavaScript code for our Car in myjs.js

function Car(model) {
    this.model = model;
    this.gear = 1;

    this.doSomeMagicWithGearStick = function(){
        console.log('I am doing something very complicated thing for the gear ' + this.gear);
    }

    this.changeGear = function(changeTo) {
        if(changeTo > 5){
            throw new Error('Gear cannot be more than 5.');
        }
        this.gear = changeTo;
        this.doSomeMagicWithGearStick();
    }
  }

  var car = new Car('Toyota Corolla');

Save the code, go to the browser console and run the following command – car

Do you see the problem here?

We have access to gear property and doSomeMagicWithGearStick() method. It means any one can directly set gear to 10 or -1 0r 1000 which is an invalid data. Also you can directly call doSomeMagicWithGearStick() without setting the gear. Which may lead to undesirable state with the car. All you need to do is to run one of these commands –

this.gear = -1;
this.doSomeMagicWithGearStick();

We need to implement abstraction logic and hide some details from the user like the gear property and doSomeMagicWithGearStick() method.

How to hide properties / methods from the users?

JavaScript does not provide any private keyword to do so. We can take advantage of a regular var keyword. Any variable that we declare with the var keyword is available within the scope of the declaration. Also, the this keyword refers to the current object.

Any object member that we do not want to expose outside should NOT be set by using this keyword. We should use var, const or let keyword instead.

Lets update myjs.js

function Car(model) {
    this.model = model;
    var gear = 1;

    var doSomeMagicWithGearStick = function(){
        console.log('I am doing something very complicated thing for the gear ' + gear);
    }

    this.changeGear = function(changeTo) {
        if(changeTo > 5){
            throw new Error('Gear cannot be more than 5.');
        }
        gear = changeTo;
        doSomeMagicWithGearStick();
    }
  }

  var car = new Car('Toyota Corolla');

Save the code, go to the console window and run this command again – car

See, we do not have access to the members that are not declared using the this keyword.

Did you Notice?

We have accessed members inside the Constructor function by using this (this.run()) for the members that are declared using the this keyword. However, for the members that are declared with var keyword, we have accessed them directly.

This was all about implementing Abstraction in JavaScript. It is a very useful feature that software developers should use while designing their code.

In the Next Tutorial, we’ll learn some ways to play with object properties.

Share this: