Introduction to Object Oriented Programming | JavaScript & Object Oriented Programming | Part 1

Course Content

In all the ES5 tutorials, I’ll be using var to declare variables just to align with the ES5 syntax. But you should never use var and use let or const instead. Read this tutorial to know why?

How are we going to Learn?

Unlike most of the Object-Oriented Programming languages, JavaScript does not have the concept of classes, inheritance, abstraction, etc. And it led to many, including professional JavaScript developers, believe that JavaScript is not an Object-Oriented programming language.

There are lots of tutorials all over the Internet about Object-oriented capabilities of JavaScript but unfortunately, most of them are too complex and intimidating. They talk as if they are explaining NASA’s mission to Mars.

That is the reason I’ve decided to write a tutorial series on this topic. I’ll follow KISS format – Keep it simple, stupid. We’ll learn by writing code, doing things. You won’t have to read tons of technical information. After all, it is not your Ph.D. subject, I believe.

A good writer empowers the reader. A poor writer makes them feel stupid.

Unknown

OOP in JavaScript? But I heard JavaScript does not have classes…

OOP in JavaScript??? Are you kidding me?

Yes, it is true vanilla JavaScript does not have the concept of class.

Classes are the basis of implementing encapsulation in lots of modern programming languages. But nowhere the OOP principle spoke about having classes a must. However, it does speak about organizing code around objects rather than functions. JavaScript gets along with objects very well. OOPs has also laid down some principles that Object oriented languages must implement.

In this series of tutorials, I’ll demonstrate how to implement all OOP principles in JavaScript.

What is Object Oriented programming?

It would be more helpful to you if you understand what was the common code design approach before OOP and how it was problematic.

Procedural Programming

Earlier programs were written with a different approach called Procedural Programming. If you are familiar with programming you must have used this approach knowingly or unknowingly. In a procedural way, you write your variables (or data) and functions separately. 

var make = 'Volkswagen;
var model = 'Golf';
var cruisingSpeed = 120;
function runWithCruiseControl(){
  console.log('Running with speed ' + cruisingSpeed);
}

Here is a problem…

What if you also have another car Polo and you want to run it with different speed in cruise control? Or maybe you are a car dealer and you have tons of cars of different makes and models, each with different cruising speed? To handle such a scenario you would need to create separate variables for all of them. And to make it more complicated what if some of the cars do not have Cruise Control feature? The logic of running would be different for that car. So you need different functions like runWithCruiseControl, runWithoutCruiseControl etc.

Spaghetti Code

The more code is written with the procedural approach the more it becomes difficult to maintain it. The procedural way evolves around functions, functions, and functions. All dependent on each other that results in the infamous Spaghetti Code. You make a change in one function and it impacts a dozen others.

Here comes the solution – Object Oriented Programming

Did you notice the related things in the above example? Both, car attributes (make, model, speed) and the behavior (function to run the car) are dependent on each other. In other words, data and the business logic to work on that data can be considered as a single unit. In OOP this unit is called an object. We can create as many similar car objects with different data and each car object can call the functions to run, start, stop, etc. In OOP, an object resembles a real-world object like a real car.

Object-oriented programming is nothing but a different and effective way to organize code. It proposes to organise code around objects that can resemble real-world objects. Each object can have some attributes(data) and methods(function) to act on that data. Think about a car. There can be different kinds of cars but each car will have some common attributes like color, make, model but different value for those data. Each car object will have similar abilities to start, stop and run, etc.

You can write structured and highly maintainable code by following Object Oriented Programming principles.

What are the principles of Object Oriented Programming?

Principles of Object-oriented programming

There are four main principles in OOP – Encapsulation, Abstraction, Inheritance, and Polymorphism. You can implement all four principles in JavaScript. In this series of tutorials, I will explain it step by step and implement it using both plain old Vanilla JavaScript way and the ES6 or ECMA 2015 way. If you don’t understand what ES6/ECMA means, do not worry I’ll explain it later on.

Encapsulation

Think again about the car example discussed above. There can be 1000s number of cars but each car will have some common attributes like color, make, model but different values. Each car object will have similar abilities to start, stop and run, etc. Both, car’s attributes ( e.g. make, model and speed) and the abilities (function to run the car) are dependent on each other. So we can group together all the related information about a car in a single unit. That describes encapsulation.

Encapsulation is explained with its implementation details in This Tutorial.

Abstraction

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 the end user and present them with details that matter to them. We hide implementation details and present a simple interface to deal with.

Abstraction is implemented and explained in detail in This Tutorial.

Inheritance

Do you share some (but not all) attributes of your father, grandfather, and great-grandfather? That is due to inheritance. You (child) inherited some of the attributes of your father (parent).

Inheritance is a mechanism in which one object acquires the property of another object. They share a parent-child relationship.

Let’s revisit our car example.

All cars are vehicles. They inherit the attributes of a vehicle like a start, stop, run. Similarly, all bikes are vehicles. They also inherit the same attributes of the vehicle. But cars carry some of their own attributes like emission, no of tires, etc. Similarly, bikes have some of their own attributes like a handle, paddle, gear, etc.

So the vehicle is the parent object. Cars and Bikes are their children. That is an inheritance.

Inheritance is implemented and explained in detail in This Tutorial.

Polymorphism

The word polymorphism came from greek roots – poly(many) and morphe(form). It is the ability of a single interface to have multiple forms. Confused???

Let’s revisit our car example.

Tesla, Ford, Toyota all are cars. All car objects will have run() function. But the science (logic) to run the car is different for all such brands. There is a single function run() but it’ll act differently depending on what type of car it is.

Polymorphism is implemented and explained in detail in This Tutorial.

Why the heck I would care for OOPs in JavaScript?

It’s a genuine question. Why would one care? Let us find the answer by quickly going through the history of JavaScript.

For ages, JavaScript used to be a scripting language for browsers. It brought life to dull static HTML webpages by enabling developers to render dynamic content. With time, it became the de-facto scripting language of browsers. With the introduction of Single Page Applications and various frontend frameworks/libraries (JQuery, Backbone, Angular, React, etc) it became popular, popular and more popular. The introduction of Node.js was a game-changer for the JavaScript community. Now you can also write backend code with JavaScript. What more a JavaScript programmer could have asked for? You can write the complete web app with a single programming language and be called the cool guy “The Full Stack Developer”. Today the popularity of JavaScript is at peak. Every year it is being voted as the top programming language in Stack Overflow.

StackOverflow 2019 survey

To solve any of the real-world problems you would have to write tons of code. And this is a fast-changing world. The requirements change or your cool app becomes more popular and people start demanding new features. You must know how to write a structured and maintainable code. OOP is the way to do that. And last but not least, even if the interviewer asks you to write code to calculate the average, she checks if you can organize your code around objects.

Prerequisites

You MUST have a basic understanding of JavaScript to understand this tutorial series. If you do not know how to declare variables, write conditional & iterative(loops) statements and how to work with functions, I am afraid, this tutorial is not for you. You should get some familiarity with JavaScript and come back to this tutorial.

Quite obvious, I do not expect any prior knowledge of Object-oriented programming. I’ll explain everything about this topic in this tutorial.

Summary

  • Is JavaScript an Object-Oriented programming language?
  • What Is Object-Oriented Programming (OOP)?
  • What are the OOP principles?
  • Why should you care about JavaScript and OOP?
  • Prerequisites for this tutorial

But you told this is not going to be a theoretical class…

I do remember, buddy. Let’s start setting up the development environment in the Next Tutorial, so that we can learn by doing.

Leave a Reply