Object-Oriented Programming in JavaScript

An Introduction to JavaScript OOP Concepts

Photo by Karolina Grabowska from Pexels

We use Objects in JavaScript, mainly to model real-world objects. Properties are used to define an Object. Similar objects will have the same property but they may have different property values.

// given below is a cat object
let cat = {
            name: "Peter",
            legs: 4,
            tail: 1
};  

Do you know how to access the properties of an object? It’s simple, we use the dot notation (.) to access the properties of an object. Here is how you access the name property of the object cat using the dot syntax, given in the above example and log it to the console.

console.log(cat.name);

The object can have a special type of property, called the method. A method is a function and it also can be accessed using the dot notation and with brackets.

let cat = {
            name: "Peter",
            legs: 4,
            tail: 1,
            sayLegs: function(){
            return "Cat has "+ cat.legs +" legs"; 
          }
};
cat.sayLegs();
// sayLegs() is a method in cat object

In the above example, we use the cat.legs to access the legs property inside the sayLegs method, but it is better to use this keyword like this.legs to reduce the errors.

let cat = {
            name: "Peter",
            legs: 4,
            tail: 1,
            sayLegs: function(){
            return "Cat has "+this.legs+" legs"; }
};

Now, let’s have an idea about the Constructors, which are functions used to create new objects. Constructors are defined with a capitalized name, use this keyword to set the properties of the new object and this keyword refers to the object going to be created, and instead of returning a value, it describes the properties of the new object. Let’s see an example for a constructor function.

// Dog is a constructor function
function Dog(){
            this.name = "Jonny";
            this.legs = 4;
            this.tail = 1;
}

So, with the help of the above constructor function, we can create a new object in JavaScript.

let Blackdog = new Dog();

The above code shows, that an object called Blackdog has been created newly as the instance of the Dog constructor. We should use a new keyword to call the constructor. The newly created object will have the same properties as its constructor Dog.

The newly created object Blackdog will also have the same values for its properties when just calling the constructor to create a new object, but we can create new objects with different values for the properties by having constructors with parameters and sending the needed parameters, as arguments when calling the constructor. You can understand this from the below-shown code.

function Dog(name){
            this.name = name;
            this.legs = 4;
            this.tail = 1;
}
let Blackdog = new Dog("Browny");   // Blackdog is a new object

so, the new object Blackdog will have the value for the name property as Browny.

There can be many instances for a constructor and all the instances may have some common property with the same value. So, there will be more duplicated variables, to reduce the duplicated codes, we use prototype properties. For example, the legs property and its value are common for all instances of Dog. So, it’s better to use prototype property for legs property.

Dog.prototype.legs = 4;

Prototype properties are shared among all the instances of the constructor.

An instance can have its own properties as well as prototype properties. The properties that are defined directly within the instance, are called own properties and the properties that are defined with the prototype are called prototype properties.

We, know to add a single property for a prototype, but to add many properties to the prototype, we set the prototype as an object. Creating a prototype as an object is a very efficient way to add many properties to the prototype.

// prototype as an object
Dog.prototype = {
        legs: 4,
        tail: 1 
};

When setting a prototype as a new object, we should also define constructor property within the object. Because, when setting a prototype as an object, the constructor property gets overwritten, to avoid that we define the constructor property within the object.

Dog.prototype = {
        constructor:Dog, 
        legs: 4,
        tail: 1 
};

A baby inherits genes from its parents. Likewise, an object inherits from its constructor function. You can get a clear idea about this inheritance from the example given below.

// Bird is a constructor 
function Bird(name) {
  this.name = name;
}

let parrot = new Bird("Meena");  // parrot is instance of Bird

All objects in JavaScript have a prototype. In the above example, the parrot inherits its prototype from the constructor Bird.

We can create the instance parrot as the Bird’s prototype using another alternative method.

let parrot = Object.create(Bird.prototype);

A child prototype will have all the properties and methods from its parent prototype and the child prototype can have its own method for its prototype.

function Animal() { }
// Animal is a constructor
Animal.prototype.eat = function() {
  console.log("Hi I am an animal, and i can eat.");
};

function Bird() { }
// Bird is a Constructor
Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Bird;
Bird.prototype.fly = function() {
  console.log("I also can fly!");
};

In the above-mentioned code, a Bird is an instance of an Animal. The prototype of Bird is inherited from the prototype of Animal. The animal is the parent of the Bird object. The Animal is called the supertype and the Bird is called the subtype. The bird will have the eat() method which the Animal has and other than that, the Bird will have its own method of fly().

Hope you all got something about OOP concepts used in JavaScript… Stay tuned!