Object-Oriented Programming in Javascript

Object-Oriented Programming in Javascript

It is very easy to get things confused (just as I was) when learning about this aspect of Javascript: Object-Oriented Programming(OOP). So let's start from the basics as this will help a lot. The idea of OOP is that we use objects to model real-world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of. The features that make up the concepts of OOP include:

  • Object
  • Classes
  • Inheritance

Object

Objects can contain related data and code, which represent information about the thing you are trying to model, and functionality or behavior that you want it to have. They follow a key:value pair, something similar like a hash map.

let user = {
  firstName: "Jane",
  lastName: "Doe",
}
console.log(user.firstName) //Jane

The characteristics of an Object are called as Property, in Object Oriented Programming and the actions are called methods. An Object is an instance of a class.

let user = {
  firstName: "Jane",
  lastName: "Doe",
}
//method
    getFunction : function(){
        return (`The name of the person is 
          ${person.firstName} ${person.lastName}`)
console.log(person.getFunction());// The name of the person is Jane Doe

Classes

Classes are basically templates for creating objects, providing initial values, and implementing methods. In a nutshell, that is the purpose of classes. Let us now look at some real life examples of classes and their implementation.

JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.

class Human {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

Inside of this class, you will see that we have something called a constructor method. A constructor method basically initializes the values of the class. In a class, the first thing that is called is a constructor.

The “this” keyword used tells that the constructed parameter is inside of the current class. It tells the compiler that the current constructed keywords are in an instance of the class. When an object instance is created from a class, the class's constructor function is run to create it. This process of creating an object instance from a class is called instantiation — the object instance is instantiated from the class.

An object can also be made with the help of the constructor.

let car1 = new Vehicle('Toyota', '1997');
let car2 = new Vehicle('Benz', '2001');

console.log(car1.maker);    // Toyota
console.log(car2.year);   // 2001
console.log(car1.getDetails());

Inheritance

This is a concept in which some property and methods of an Object is being used by another Object. Unlike most of the OOP languages where classes inherit classes, JavaScript Object inherits Object i.e. certain features (property and methods)of one object can be reused by other Objects. Inheritance is supported by using prototype object. Some people call it "Prototypal Inheritance" and some people call it "Behavior Delegation".

function Person(firstName, lastName) {
    this.FirstName = firstName || "unknown";
    this.LastName = lastName || "unknown";
};

Person.prototype.getFullName = function () {
    return this.FirstName + " " + this.LastName;
}

In order to create a Student class that inherits from Person class so that we don't have to redefine FirstName, LastName and getFullName() method in Student class. The following is a Student class that inherits Person class.

function Student(firstName, lastName, schoolName, grade)
{
    Person.call(this, firstName, lastName);

    this.SchoolName = schoolName || "unknown";
    this.Grade = grade || 0;
}
//Student.prototype = Person.prototype;
Student.prototype = new Person();
Student.prototype.constructor = Student;

The new keyword creates an object of Person class and also assigns Person.prototype to new object's prototype object and then finally assigns newly created object to Student.prototype object.

An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on. This is often referred to as a prototype chain, and explains why different objects have properties and methods defined on other objects available to them.

To understand and learn more about object-oriented programming, visit

- MDN

- Freecodecamp

Conclusion

Learning Object oriented programming is a must for every programmer that will be working in big organizations. The subject in its entirety is not exhaustively handled in this post but I believe this will give the fundamental knowledge needed to go in fully into the world of OOP. Feel free to like, comment and share :).