The Idea of Abstraction

Mohammad S. Hussain
The Startup
Published in
3 min readNov 24, 2020
Points by Wassily Kandinsky. Source: https://artsandculture.google.com/asset/points-wassily-kandinsky/7gG1uWQ899bI0A?hl=en

What does it mean to abstract? Abstraction is to hide the specific details of an event and to display only the essential information needed for a scenario. Showing whats relevant to the subject and at the same time submerging the processes of the phenomena.

The above oil on canvas by Wassily Kandinsky is an art piece that comes under the genre of abstract art. As you can see by the image, the artist has portrayed the main elements of the many different events/ideas he wanted to express and he did so within the bounds of one canvas.

Now let’s translate that idea into computer programming languages. JavaScript abstraction is a workflow where a programmer codes in a convention where the implementation details of events are encapsulated and the functionality details are hidden or summarized. This helps to organize data to optimize code and make it more apprehensible for other programmers to work with.

Let us take a real life example for instance. When we change a gear of a car, there are is a series of complicated mechanics that take place under the gearbox. But as the driver, all we see is the the gear icon changing from 1 to 2 in the display. This is abstraction: the changing of the display to show us the shifting of the gear. Therefore only rendering relevant information to us while the process takes place behind the scenes.

In the above snippet of a javascript file, we can see a basic form of abstraction. So let’s break it down:

Lines 1, 2 and 3 We are creating a function called ‘Car’ with ‘model’ as its argument and then creating a constant variable called ‘gear’ and setting its value to one.

Line 5 We create a function called doSomeMagicWithGearStick which runs the process the gearbox needs to in order to change the gear.

Line 9 We are referring to the ‘car’ object changing gears by writing delcaring a constant called ‘this.changeGear’. This holds the criteria for the events that take place when the gear is changed. Its argument value is ‘changeTo’ which we are using to set the limit of the top gear to be 5. Any gear change command that will be greater to 5 will give an error saying “Gear cannot be more than 5.”

Line 13 We assign the gear to the changeTo argument we created on line 9. This associates the gear limit we created to ‘gear’.

Line 14 We are invoking the function we made earlier on line 5. By adding ‘()’ at the end of the function name, we are saying to call and run its process.

Line 18 We create a new car object called ‘Toyota Corolla’

The output when we call ‘car’ in the browser console

As you can see when we invoke the car object in the console, it brings back the object car and its integral information in hash brackets ‘{}’. Notice that the ‘changeGear’ key in the hash holds a value ‘function’. The process of the gear changing is abstracted to ‘f’.

So ladies and gentlemen, using abstraction makes life more creative and simpler at the same time. Thank you for reading.

--

--

Mohammad S. Hussain
The Startup

Software Engineer trying to change the world for the better.