Object-Oriented Programming in JavaScript — Beginner’s Guide.
By: Fatimat Olanrewaju
Tags: Oop, Beginner, Programming, JavaScript

According to Wikipedia, Object-oriented programming (OOP) is a programming paradigm based on the concept of “objects”, which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

To properly understand OOP, we can break it down to simply asking what an object is. An object is a material thing e.g. book, car. In JavaScript, objects can have properties and methods. Properties are things that describe an object, in the case of a book, examples are title, price, author, year of publication etc. Methods are things we can do to or with an object e.g. buy, read, review.

Object — Book

Properties — Title, Price, Author, Year of Publication

Methods — Buy, Read, Review

The concepts of OOP can be broken down into the following:

Object Literals Constructor (ES5) Prototype Inheritance Object Create Method Classes (ES6) Subclasses

Object Literals

We create a new object in JavaScript by calling its properties inside curly braces. Object literals property values can be any data types from function literals, arrays, strings, numbers, to boolean.

We can call an individual property by using the dot or bracket notation.

Constructor

Creating a large number of objects with the same properties and methods using the object literals would be a pain, time-consuming and cumbersome task. Hence, constructors come in. Constructor is basically just a function.

Using constructor, it would be written as:

Instantiate an object simply means creating bookOne and bookTwo as an instance of object Book.

Prototype

Prototypes allow you to easily define methods to all instances of a particular object. For example, to get the age of the book, we can define getAge method as below:

We can also change or revise the year of publication by:

Inheritance

JavaScript inheritance is a mechanism allows us to create a new class using the existing class. It means the child class inherits all the properties and behaviors of the parent class.

Lets create a magazine that inherits the properties of a book.

Object Create Method

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object, just as seen in the prototype example above.

Another simple example:

Classes

Class is not an object — it is the blueprint of an object i.e. a template for creating objects. Classes are special functions. Classes are declared with the keyword class.

Class syntax is a nice and simpler way to use object-oriented programming and managing prototypes. They were introduced in ES6.

To add method to the class, we can simply it in the class curly braces without typing ‘Book.prototype.getAge’ i.e.:

We also have what is called static methods. Static methods is where we can actually have a method in class that we can use without instantiating an object.

Subclasses

Let’s say we want to have a subclass called ‘Magazine’ to have everything a book has but also has a month. It would be written as:

N.B: In order to call the parent constructor, we used the function called super.