Understanding Object-Oriented Programming in JavaScript

What is Object-Oriented Programming ?(OOPS)

OOP is way of structuring the code with the help of of object which helps to store the data and behaviour so that code become easier to maintain ,reuse and scale .

When application grows larger its hard to maintain many variable and function so let's take a example to understand the problem and solution gradually ----->

//student 1
let student1 ="Uvesh"
let section1 ="A"

//student 2
let student1 ="Rahul"
let section2 ="B"
.
.
.
.
.
//student 100
let student100 ="harshit"
let section100 ="D"

In the example we have to write that much line of code for every different student as number of student increase code start to becoming messy .

and we can't reuse the code here and there , lets take one more example to understand one more problem ----->

//we have to change the name of student 1 
//student 1
let student1 ="Uvesh"
let section1 ="A"

//now we have to rewrite
 student1 ="HARSH"
 section1 ="B"

So now we have a idea what's the problem ,so let's take a look whats the solution?

WITH OBJECT{}.

SO object {} is a data type in which can save data and behaviour( for ex, any method and complex things) belong to the students.

//student 1 with more detailed way in one record 
let student1={
name:"uvesh",
section:"A",
quality()={`${this.name} is a very good student`}

}

//student 2 with more detailed way in one record 
let student2={
name:"harshit",
section:"A",
quality()={`${this.name} is a very good in public speaking`}

}

So here In the example you can see we have more efficient way than previous one to store the data and methods,but do you don't think its also not efficient because as we required more student we have to write more student object, umm so lets explore more .

function() and new keyword.

function() helps us to make a blueprint and new help to make a instances (means real object from the function)

function Student(name, age) {
  this.name = name
  this.age = age

  this.quality = function () {
    return `${this.name} is a well-mannered student of age ${this.age}`
  }
}
//apply new keyword

let student1= new student("uvesh",20)
let student2= new student("uvesh",20)



//you can acess the  data and method .
student1.name
student2.name
student1.quality()
student2.quality()

In the example now its easy to manage and reuse the code just a student blueprint and we can insert our data accordingly no need to write manually object so how the object is created this is new keyword magic . lets see what new did behind the scene .

• first create a empty object {}

• then link with the function prototype(it is a shared method for all we will talk about it later)

• then call() the function with this empty object{} student1.call(obj,"uvesh",20) so what call did here ,call change the ref of this===obj and inside function we know that this.name=name and here name ="uv" and this ===obj so obj.name="uvesh"

• At last it return empty obj to the function so here to the student1 and student2 who's calling at that point.

Take a look on image you got the idea its not need to know that much you can skip just a look on the diagram.----->

So function and new keyword help but not totally because for every student with the help of new its take their own quality() method which is not memory efficient, its look like this

Umm ,🤔 what to do now ? so now the dev community have headache how to solve it then .

a saviour come in the picture name "prototype"

PROTOTYPE (A saviour for the JS)

Lets not make a rabbit hole now just take a minimum idea what is prototype?

Prototype is basically a property every Constructor function have which is used to for shared property during making instances with help of new keyword.

now let's take previous example .

function Student(name, age) {
  this.name = name
  this.age = age

 Student.prototype.quality = function () {
  return `${this.name} is a well-mannered student of age ${this.age}`
}
}
//apply new keyword

let student1= new student("uvesh",20)
let student2= new student("uvesh",20)



//you can acess the  data and method .
student1.name
student2.name
student1.quality()
student2.quality()

umm how? 🧐 its a saviour ,just 2 word how its saviour man ?

So prototype make a shared storage for every object.

oh man its really a saviour of memory thanks proto🙏.

But its still not end now ES6 come in the picture ,its make more syntax sugar to function let's take a look.

CLASSES AND CONSTRUCTOR

ES6 introduce the new way of writing the OOP (which is nothing just use of prototype a saviour)

Do you know how we do sugar coating on the code now lets take a look.

class Student {
  constructor(name, role) {
    this.name = name
    this.role = role
  }

  introduce() {
    return `${this.name}, the ${this.role}, is one of the best students`
  }
}

let student1 = new Student("Uv", "Monitor")
let student2 = new Student("Harshit", "Headboy")
//now same way you can access 

student1.name 
student1.introduce()
student2.name
student2.introduce()

In the example what we notice student class is blueprint and student1 and student2 is the real object(instances) thats its not different its same as the previous method ,i can show you internal of this but then i have habit to make rabbit hole you guys not able to take that, so just understand this is just a prototype in which we have shared memory with object created from the CLASS()

Reader: ok boss so all done?

me: nope i am sending a digram always remember class is a blueprint (something like that Engineer give us a prototype to make the car) and we eventually makes THAR ,SCORPIO-N)we make real car (object) same as we make the student.

Hey listen i forget to tell you what is Encapsulation? hmm fancy name yeah its dev

dna to make things fancy .

WHAT IS ENCAPSULATION ?

This is nothing more just bundle the property and method() inside a single unit Class or object.

Its got clear just take a example

class student{
constructor (name,role){
this.name=name;
this.role=role:

}
introduce() {
     return `${this.name} the ${this.role} is one of the best student`;
  }

}

In the example student property name ,role and introduce() method bundle together and this is Encapsulation.

feeling overwhelming? take a breathe try do some example yourself and its become clear like "chamak jayega"

Key takeways:

1. OOP is just way of writing code in structure way so its can be maintain ,reuse and scale

2. Object not work in efficient way so we use function and new keyword but there also problem of memory wastage.

3. Then a saviour come prototype which is basically shared storage for obejct which makes by function and new keyword.

4. Class and Constructor nothing just syntax sugar coating on prototyope

5. Encapsulation just bundle the property and method() in class