What is Object-Oriented Programming?
Object-Oriented Programming is a popular programming paradigm. It's a style of programming that is centered around objects rather than functions.
Object-Oriented Programming in Javascript
Javascript is a Prototype-based Language so it has a very distinct implementation of Object-Oriented Programming.
What you can expect from this Article?
How does Prototyping Works in Javascript?
Meaning behind Class and New keywords
Now let's write some code 💻
As I said before
Object-Oriented Programming is a concept of Wrapping data and the relevant functionality together inside the object.
Let's take an example here.
Suppose you want to build an online game for multiple users. Now you can add many functionalities in your game login signup increment the score and decrement the score.
Example:
Now think what would be the possible way to store the different types of data and functionalities
You are right!. It's using objects.
Let's see how it will look like when we bundle it in objects
Visual Representation of data in an object.
Now it's easy for me to take the data and call the functionality on it.
Like this
Now let's see how we can achieve it
What are the different ways to create objects in javascript?
- We can make use of object literals. Just define the empty object and populate it with desired data.
Let's create an object for user1
Example 1:
We can also use an inbuilt method Object. create() to create objects.
Creating object for user2
Let's see this in action
Wait..... Don't you think We are repeating ourselves Here we are breaking the DRY principle.
Suppose we have 1000 users then we can't hand create the objects for all the users. right?
What do we do when we want to repeat the same code again and again? yes. We put it inside a Function.
Solution 1 =>
Let's create a function user creator it will take the name, score, email as an argument and will return the newly created object.
The above solution looks good we can create 1000 users just by using my user creator function.
But there is a problem with the user creator function.
If you take a close look our usercreator function returns the object each of which has a brand new increment function.
It puts the copy of the increment function inside each object we are creating from usercreator function.
In development, we could have 100 functions in our application. Functions are the same for every user so why create extra space for the function in the Memory for every user. Make sense?
Well, To solve this issue we can create a separate object to store our functions.
Let's call it Function store.
Now when we do
The link which we going to use is known as a Prototype chain. It's a default mechanism of javascript.
I'll explain it more later.
The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.
Now We can Modify our solution 1
Solution 2 =>
Now here is the Prototype that comes into the Picture.
When the Javascript executes the Line
The Object.create() return the empty object. But it's not exactly the empty object. a new user has some hidden properties. among them, there is one property name —proto— which points towards the function store object.
so when we do
Javascript tries to find out the increment function on a user1 object but if it fails to find it out it goes to the —proto— to find the function. Where it will find increment function inside the functionstore.
That's known as a prototype chain.
"this" comes into the Picture
when we do
When we call the increment method on user1 this keyword will point towards the user1 object.
Problem with the Solution 2
well, our solution 2 looks perfect we are able to create users with help of our usercreator function but there are some issues with it.
Here we are doing everything Manually.
Problem 1 =>
We are creating the objects inside the user creator function manually and returning using the return keyword.
In the other programming language, we don't have to create the object manually it will do everything on its own.
Problem 2 =>
We are Making a Separate object to store the functions then Making the bond to the function store manually.
We also have to automate this process.
Let's see How we can tackle this problem.
To automate the creation of the objects inside the function we can make use of javascript's built-in feature that is New keyword.
The New Keyword does a few important things
Automate the Creation of the object inside functions.
It binds this variable to the newly created object
It sets the internal prototype property to be the prototype of the constructing function
Return the created object.
that solves the problem 1.
For problem 2 We have to go into the details of the functions.
In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object.
Now we could use the fact that all the functions have the default property on the object version that's the "Prototype" which is itself the object. So We can replace our function store with that property.
Instead of storing the function in a separate object, we will make use of the function's prototype property to store the functions.
that solves problem two. Now let's create an optimized solution by referring to solution 1 and solution 2
Solution 3 =>
That's How Prototyping works in javascript
Now there is class-based syntax as well to perform the exact same operation as solution 3.
Class-based syntax has a good readability and is easy to use for other developers who are coming from pure OOP languages like Java and Python.
Example =>
Class-based Syntax
