Introduction
We begin our untangling of OOP in JavaScript in this first article. This is a high-level introduction to OOP in JavaScript and lays the groundwork for an in-depth discussion in the following parts. This series focuses on OOP in JavaScript alone. OOP in JavaScript is controversial so we will be diving deep into that rabbit hole to truly understand JavaScript’s OOP mechanism.
Prerequisite
This is a topic of intermediate level and requires some knowledge of JavaScript
What exactly is object-oriented programming
Object-Oriented Programming is a programming paradigm. This is a way to organize and structure our complicated code.
The concept of object-oriented programming has been around for many years, but it is still as relevant and powerful as ever because it has many benefits such as code reusability, modularity, reduced code complexity, and enables us to adhere to the DRY principle.
Object Oriented programming is a programming paradigm in which programs are designed around objects as opposed to procedural programming where a program is a series of instructions.
The infamous four principles of the OOP mechanism
OOP’s four core principles include encapsulation, inheritance, abstraction, and polymorphism. Initially, this may seem like confusing jargon, but we will enlighten every concept after this part. Definition of an object in JavaScript:
An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your objects. — MDN Web Docs
The layman’s definition of an object could be defined as a collection of key-value pairs with the keys being strings and the values being strings, numbers, functions, objects, basically anything. Functions inside of objects are called methods. In a nutshell, Objects are containers that have state and behavior.
Encapsulation
When we run a JavaScript code, we save data and some functionality operating on that data, for instance, we change the data or render it or modify it. OOP paradigm provides a framework for bundling up related data and appropriate functions that would otherwise be performed separately.
This is a revolution. As relevant data and appropriate functions are combined neatly into objects, the complexity of the program is reduced to a degree that would be impossible with procedural programming.
The ability of objects to store data as properties and their associated functionality as methods in one unit is called Encapsulation and it is one of the core tenants of the paradigm. Voilà, we’ve untangled encapsulation in object-oriented programming.
Different ways of generating objects
1. Creating objects using object literal syntax
By using the object literal syntax, we can create objects in the simplest possible manner. We are creating an object called student (namespace) which has relevant data and a method called describe that operates on that data.
We can access the properties using dot notation or square brackets. We can also create an empty object and then assign properties to it using object dot notation in JavaScript. Take a look at the example below.
2.Object.create() can also be used to create objects
Object.create(proto)
Object.create(proto, propertiesObject)Parameters
proto
The object should be the prototype of the newly-created object.
propertiesObject Optional
If specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype chain) specify property descriptors to be added to the newly-created object, with the corresponding property names. These properties correspond to the second argument of Object.defineProperties().
Return value
A new object with the specified prototype object and properties.
Exceptions
The proto the parameter has to be either
nullor- an
Objectexcluding primitive wrapper objects.
If proto is neither of these a TypeError is thrown.
— MDN Web docs
JS is an object-oriented prototype-based language instead of a class-based language like Java or C++, which uses classes to create objects, whereas JavaScript uses constructed objects as prototypes to create similar objects. We will unravel the prototypal design of JS in-depth in the upcoming articles.
While these ways are available for us to create objects, it breaks our DRY principle. We can’t manually assign properties and methods to thousands and thousands of students . This is when creating objects with factory functions comes into play.
3. Creating objects using factory functions
This approach uses functions to return objects into student1, student2, etc. This method eliminates the need to assign properties manually. This student function could be considered as a factory for producing multiple student objects.
This is great but inefficient when it comes to memory efficiency. We are using up computer memory to save copies of similar functions on every object. This is a major con and it is the reason why this approach can’t be considered an industry standard.
Pros :
This method eliminates the need to assign properties manually to every object. Simple and serves the purpose.
Cons :
This method quickly becomes complex and unmaintainable when we have multiple functionalities. Having multiple copies of the same function on multiple different objects breaks our DRY principle.
Conclusion
I hope you enjoyed this mellow introduction to OOP in JavaScript. In the next few articles, we will continue to untangle complex topics and come to grips with the concepts as well as get ready to adopt OOP style programming. If you think this article is comprehensive enough and want further updates please consider clicking the follow button, that would mean a lot. You’ve come a long way, happy coding!
