OOP as a JavaScript Developer

Preface

I am an advocate for functional and procedural programming. However, after diving deep into web development and now developing large complex solutions as web apps with programming, I feel something amiss in my programming approach as a JS developer that is making the development of these solutions more difficult than expected.

Then I flashed back to those times I disowned Java, because of its public static void main 😊, and I had unknowingly disowned an interest to understand OOP, which is not confined to Java alone but a programming paradigm that is heavily implemented in Java, being an OOP language.

Here I am now, truly understanding OOP, and have written this course article to help be a scaling point for you too in understanding OOP as a Developer (JS especially).

Tip 1 Because JS is not a class-first based programming language doesn't make it not support Object Oriented Programming.

Introduction

You may be used to breaking down large problems into sub-problems and solving them in separate units of code. Or you may have experience with functional programming, which treats elements of code as precise mathematical functions, and prevents them from affecting other elements — that is, no side effects. Come to grips with OOP, however, and you’ll see that it offers a whole new way of solving problems.

With OOP, instead of writing a program, you create classes. A class contains both data and functions. When you want to create something in memory, you create an object, which is an instance of that class. So, for example, you can declare a Customer class, which holds data and functions related to customers. If you then want your program to create a customer in memory, you create a new object of the Customer class.

What is OOP?

OOP (Object Oriented Programming) is a computer programming model that is characterized by organizing software design around data or objects, rather than functions and logic. In OOP, an Object is defined as a data field with unique attributes and methods (functions) that are inheritable by other defined objects.

OOP model, primarily based on a mathematical discipline called "abstract data types", focuses on the Objects that a developer would want to manipulate rather than the logic required to manipulate or process them.

A brief history

OOP model has been a fundamental part of Software Engineering and Development and it is hard to actually remember what other programming approaches developers use before its introduction.

Object Oriented Programming (OOP) first appeared in the 1980s as a radical leap forward from the traditional top-down method of programming.

Major software development, these days, is performed using the Object Oriented Programming model. In fact, one cannot effectively develop software, applications, or online platforms without understanding the OOP approach, especially given the popularity of OOP languages like Python, PHP, Ruby, and Javascript.

Characteristics of an OOP Model

There are three major characteristics/features of an OOP model. These are encapsulation, inheritance, and polymorphism.

Encapsulation: Encapsulation means containing all important information inside an object and only exposing selected information to the outside world. Attributes and behaviors are defined by code inside the class template.

Then, when an object is instantiated from the class, the data and methods are encapsulated in that object. Encapsulation hides the internal software code implementation inside a class and hides internal data of inside objects.
Inheritance: This is the mechanism by which an Object acquires some or all features from one or more object(s).
Polymorphism: This refers to the method in which a programming language can access and process different objects and classes of different types through a single interface, with each of these object types providing their independent implementation of this interface. Using inheritance, objects can override shared parent behaviors, with specific child behaviors. Polymorphism allows the same method to execute different behaviors in two ways: method overriding and method overloading.

Principles of OOP

The principles of object-oriented programming are quite similar to their characteristics but with an addition, making the principles four in total. These are:

Inheritance: child classes or different objects inherit data and behaviors from the parent class or other objects.
Encapsulation: containing information in an object, exposing only selected information
Abstraction: only exposing high-level public methods for accessing an object
Polymorphism: many methods can do the same task

Is JavaScript an OOP language?

Javascript is a Prototype-based programming language, a subset of Object Oriented Programming paradigm.

Tip 2 A prototype-based programming language is a style of OOP that uses functions as constructors for classes.

According to Mozilla's documentation, a prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object.

Javascript is heavily Object-based and an excellent language to write Object Oriented applications. Javascript gives you the ability to make your Objects for your applications.

Tip 3Object-oriented Programming is not only restricted to implementation in a class-based approach, as OOP is a model of solving problems in programming by seeing things first as what they are, before discussing their actions, methods, and required data for execution.

In regards to encapsulation, a feature of OOP languages, JS objects are entities supporting data and functions; however, they have little to no advanced native support to hide internal details. In JS Objects, methods that fire events are written and called when needed, and are encapsulated within the JS Object.

In JS (JavaScript), objects can be initialized any amount of times, and properties and methods of this Object are accessible across the code's scope as JS Objects do not care about methods protections.

In regards to Polymorphism, polymorphism is being implemented, unknowingly, several times in several ways when developing in JS programming language.

While OOP languages are in support and encourage developers to focus on taxonomy and relationships, Prototype-based languages encourage to focus on behavior first and then later classify.

The benefits of introducing OOP

Personally, after introducing the OOP model to my design thinking pattern and coding process, there has been significant progress in implementing solutions to complex programming challenges.

Tip 4 JavaScript is not a class-based object-oriented language. But it still has ways of using object-oriented programming (OOP).

Let's dive deeper!

Modularity for easier troubleshooting
When working with object-oriented programming languages, you know exactly where to look when something goes wrong. “Oh, the car object broke down? The problem must be in the Car class!” You don’t have to go line-by-line through all your code.
Objects are self-contained, and each bit of functionality does its own thing while leaving the other bits alone. Also, this modularity allows an IT team to work on multiple objects simultaneously while minimizing the chance that one person might duplicate someone else’s functionality.
Reuse of code through inheritance:
Suppose that in addition to your Car object, one colleague needs a RaceCar object, and another needs a Limousine object. Everyone builds their objects separately but discovers commonalities between them. In fact, each object is just a different kind of Car. This is where the inheritance technique saves time: Create one generic class (Car), and then define the subclasses (RaceCar and Limousine) that are to inherit the generic class’s traits.

Of course, Limousine and RaceCar still have their unique attributes and functions. If the RaceCar object needs a method to fireAfterBurners and the Limousine object requires a Chauffeur. Each class could implement separate functions just for itself. However, because both classes inherit key aspects from the Car class, for example, the drive or fillUpGas methods, your inheriting classes can simply reuse existing code instead of writing these functions all over again.
What if you want to make a change to all Car objects, regardless of type? This is another advantage of the OOP approach. Make a change to your Car class, and all car objects will simply inherit the new code.
Flexibility through polymorphism:
Riffing on this example, you now need just a few drivers, or functions, like driveCar, driveRaceCarand DriveLimousine. RaceCarDrivers share some traits with LimousineDrivers, but other things, like RaceHelmets and BeverageSponsorships, are unique.

This is where object-oriented programming’s polymorphism comes into play. Because a single function can shape-shift to adapt to whichever class it’s in, you could create one function in the parent Car class called drive — not driveCaror driveRaceCar, but just drive. This one function would work with the RaceCarDriver, LimousineDriver, and so on.
Effective problem solving:
Many people avoid learning OOP because the learning curve seems steeper than that for top-down programming. But take the time to master OOP and you’ll find it’s the easier, more intuitive approach for developing big projects.

The Building blocks of OOP

Implementing OOP in JS (Coming soon)

Conclusion

Object-oriented programming is ultimately about taking a huge problem and breaking it down into solvable chunks. For each mini-problem, you write a class that does what you require. And then — best of all — you can reuse those classes, which makes it even quicker to solve the next problem.

This isn’t to say that OOP is the only way to write software. But there’s a reason that languages like C++, C#, and Java are the go-to options for serious software development.

OOP as a JS Dev

Object Oriented Programming as a Javascript Developer.

Table of contents