Hello! 👋, In this article we'll look into OOP in JavaScript.

OOP is simply used for writing clean and maintainable code. OOP works on the concept of classes and Object.

Let me Elaborate classes and Object, classes is the blueprint/template of the Object. and Object is the instance of the class.

consider an analogy, putting a modelling clay into it's shape utensil to get the shape.

In JavaScript, there is no classes defined. classes are function in JS. To understand classes in JS we need to understand functions and how we can link object to another object.

const StudentPrototype =  {

   setName(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
   },

    fullName(){
       console.log(this.firstName, this.lastName);
   }

};

const student1 = Object.create(StudentPrototype);

Object.create() links the student1 object to prototype object.

In the above figure, student1 object is linked to StudentPrototype Object using Object.create(). Once the object is linked, the property and function inside the object can be accessed by the child object.

merge the above code with below code.

student1.setNames('yourName', 'yourLastName');
student1.fullName();   //output : yourName yourLastName

Now, we know how to access the property and method from linked object.

let's now move to two important sections

1. Replicating class using function.
2. ES6 Classes

1. Replicating class using function.

Creating Student function (constructor of class). there is prototype property associated with Student function.

const Student  = function (firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Student.prototype.fullName = function () {
    console.log(this.firstName, this.lastName);
}

const student = new Student('yourName', 'yourLastName');
student.fullName();  //output: yourName yourLastName

Why to add functions on prototype ? Why not in individual object? if stored same function in individual object, it is memory wastage. so we store the function or property in prototype of constructor function.

In above code, the student object is linked to prototype of Student() using new keyword, it also create empty object and fill some data, link the student object with Student prototype and return the object without any return keyword.

2. ES6 Classes.

ES6 Classes are slightly more organised and it looks similar to those class in other programming languages.

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

  fullName () {
      console.log(this.firstName, this.lastName);
  }
}

const student = new Student('yourName', 'yourLastName');
student.fullName();  //output: yourName yourLastName

Now the class Student related to property and functions are inside one block and it looks more organized.

class is combination of constructor and prototype. and things are easy to look here in class.

Okay! that's all. Thanks for reading.