OOP in JavaScript to Create Objects.

What is object?

Object is set of “Key” and “Value” Pairs

-Functions and Arrays are also different types of objects in JS

ex:- let obj={name: “onkar”};

obj={“displayName”:function (){console.log(“hello”)}};

Why OOP?

• Every application in the world is made up of main 2 things:- a)data,b) function and methods
• for creating any application we need data and functions or methods to work on that data.
• as the number of functions and overall data increases in our project it gets very hard to add new functions and gets really messy.
• this problem is solved by OOP. OOP helps us to bundle data and functions together which makes code “easy to read” and “easy to add new features”

Different ways of creating objects in JS.

Ways to create objects:-

• Object Literal.
• Object Constructor.
• Object.create

Object creation patterns.

• there are 4 main ways to create objects with methods in dunder proto

1. using function.
2. Prototypal Pattern.
3. PsuedoClassical Pattern.
4. Class Pattern.

1) using the function to create an object. ( — — — — — — — — — — — — )

• once you create a function using the above method. which creates a new user and returns it.
• one more important thing while writing function:- “don't forget to return user which we have created inside function”(which I forgot to do ).
• Later we can create new users using this function and store them into variables.

testing our function.

2. Prototypal Pattern ( — — — — — — — — — — — )

• In this method, we have to create a function with just data inside .after that we have to create a new object which will contain all methods that are needed for that function.

creating an object which will contain methods

• But inside a function, while creating a new object we have to use the “object.create” method. refer image below:-

creating function

• here while creating a new object user we have to pass new object userMethods which we created previously.
• now the methods inside the userMethods will be added to the dunder proto of the newly created object.

Tip:- dunder proto is special area of object which contains all methods which are common to all objects which are created using same function.

• now we can test it by using the function to create a new object. as shown in the image below.

checking prototypal pattern

3. Pseudoclassical Pattern ( — — — — — — — — — — — — — — — )

• In the pseudo-classical pattern, we use the “new” keyword while creating a new object using the function to create an object.
• “new” keyword does 3 things:-

1)creates new object.

2)adds the methods inside the “function.prototype” object into the dunder proto(proto) of newly created object.

3)returns the newly created object.

• the function and its prototype is created as shown below:-

creating function

creating function.prototype

the thing to note :- “this” inside the function will point to a new object which is created by “new” keyword .

• now we can test our function as below:-

4. Class Pattern ( — — — — — — — — — — — — -)

• while using a class pattern to create objects we have to write one class with a name containing the first letter capital.
• first, inside class, we have to write a constructor function that accepts parameters which we are going to need.
• inside that constructor function, we have to initialize all parameters with “this” keyword.

we know “this” points to object which is newly created by “new” keuwrod

• after initializing all properties of the object, we have to write all methods that we need inside dunder proto of the object. for reference see image:-

creating class

• after writing all methods inside class now we have to create new objects using this class. ex:-

testing class pattern