In my younger years as a developer, understanding OOP seemed impossible. However, thanks to my awesome Javascript mentor at the She Code Africa Community, I was able to finally understand the concepts of OOP. I am writing this article for every developer who has had/is having issues understanding the basic concepts of Object Oriented Programming.

• What is Object Oriented Programming?

• Constructor

• Instanceof

• Prototype

• Prototype Chaining

What is Object Oriented Programming?

Object Oriented Programming is a programming paradigm in which programs are written around objects and data.

Objects includes tangible things we can observe and interact with such as a car, a shop or a bird. Data are the properties also known as the qualities that defines what makes up an object, such as a car has wheels, a shop has items and a bird has wheels. Although similar objects share the same properties, that however may have different values for those objects. For example, all animals have legs but not all animals have same number of legs. In JavaScript, object are used to model real world objects, giving them properties. An object is created as such

let dog = {
    name: 'Gold',
    numLegs: 4
};

Values can be accessed from an object using the dot notation.

console.log(dog.name);  // Gold
console.log(dog.numLegs);  // 4

Objects can have a special type of property called Method. They are properties which are functions. Therefore, in the snippet below, sayLegs() is a method because it is a function.

let dog = {
    name: 'Gold',
    numLegs: 4,
    sayLegs: function(){
             return `This dog has ${dog.numLegs} legs`}
};

dog.sayLegs();  //This dog has 4 legs

In the above example, we accessed the value of numLegs property using the dot notation. It is necessary to note that there is a pitfall here. If the variable name changes, any references to the original name would have to updated and this could be a problem with an object with many references. A way to avoid these issues is to use the ‘this’ keyword.

sayLegs: function(){ return `This dog has ${this.numLegs} legs`}

Constructor

Constructors are function that create new objects. The below constructor defines a Dog object with name, color and numLegs properties. The ‘this’ inside the constructor refers to the objects being created. Constructor are defined with capital letters to differentiate them from other functions.

function Dog() {
    this.name = 'Gold',
    this.color = 'Brown',
    this.numLegs= 4
}

The constructor property is located on the object instance. It is a reference to the constructor function that created the instance. An advantage is that it is possible to check for this property to find out what kind of object it is.

let hound = new Dog();
console.log(hound.constructor === Dog);   //true

Instanceof

An instance of Dog called hound is created and now hound has all the properties defined inside the Dog constructor.

hound.name;  //Gold
hound.color;  //Brown

It’s properties can be easily modified.

hound.name = 'Hound';
hound.name;  //Hound

However modifying properties can take a lot of time especially objects with a large number of properties. It is much more easier to modify by adding them as arguments to the constructor.

function Dog(name,color){
    this.name = name;
    this.color = color;
    this.numLegs = 4;
}
let terrier = new Dog('Terrier' ,'Red');
console.log(terrier)  //  {name: "Terrier", color: "Red", numLegs: 4}

Objects can be easily compared to a constructor by using instanceof. This returns true or false if the the object was created with the constructor or not respectively.

terrier instanceof Dog;  //true

Prototype

Another important concept is Prototype. Just like people inherit genes from their parents, an object inherits its prototype directly from the constructor function that created it. Prototype can be described as a recipe for creating objects. All objects in JavaScript including functions have a prototype property which is reference to another object. It is a way by which JS objects inherit features from one another. For example, here the Dog constructor creates the hound object.

function Dog(name){
    this.name = name;
}
let hound = new Dog('Jack');

hound inherits its prototype from the Dog constructor function. We can use isPrototypeOf method to check the prototype of an object.

Dog.prototype.isPrototypeOf(hound); //true

Prototype Chaining

An objects prototype itself is an object. Because a prototype is an object, a prototype can have its own prototype. Therefore, the prototype of Dog.prototype is object.prototype. Using this analogy,we can understand Prototype Chaining better. In this prototype chain, Dog is the supertype while hound is the subtype. Object is a supertype for both Dog and hound. Object is a supertype for all objects in JavaScript. Properties can be added to the prototype individually.

Dog.prototype.numLegs = 4;
Dog.prototype.bark = function(){
    console.log('Woof! Woof!!');
}

However, a more efficient way to do this is to set the prototype to a new object that already contains the properties.

Dog.prototype = {
    numLegs : 4,
    bark : function(){
        console.log('Woof! Woof!!')
}

Object Oriented Programming is a concept in JavaScript that might seem so broad to comprehend but with continuous learning and practice, it can be easily understood.

If you found this article helpful, don't forget to drop your comments and your feedbacks would be highly appreciated.

Happy coding!!!

RESOURCES