Getting Object Oriented with JavaScript

So in object oriented programming we can create classes ... and then create instances... and then use them.. and this and that. Yeah yeah! Everyone knows this. Especially those who have studied some C++ or java . For those who don't know this - Great! You will have a fresh and ; trust me ; an interesting start. But even then - we will understand the perception behind classes and objects before actually understanding what goes on behind the scenes. Remember - the best developer is not the one who can write code - it's the one who understands code.

So lets first understand what is the concept behind the structure of classes and objects.

Classes and Objects

Now - have you ever helped your mom in the kitchen? Have you not? Please do! That aside - imagine you go to the kitchen to take a look at what your mom is doing. And she is out there cooking food in the intense heat, Surely we can get her some refreshing lemonade. So now our task is to create a lemonade. But you are an amateur . Don't worry everyone is at first. So you ask your mom how to make a lemonade. And she tells you the recipe - add water, some lemon juice and sugar. Finally maybe add some ice cubes or mint leaves garnishing. Or you can make a mint lemonade by grinding up some mint leaves and adding their extract to it to make it even better. So you follow the recipe and you get a lemonade that makes your mother refreshed and proud.

So what's all that for? Well the above just represents classes and objects architecture in programming. The class is basically a recipe for creating an object. It is not an entity but just a simple method. One can hence relate to why is it called a 'blueprint'. And your lemonade is the object - the outcome of that recipe. Okay but how do we use it?

Creating an object from a template

The objective here is simple. First we create a template and then we create an object from that template. For that we need to learn only 2 things - how to define a template and how to instantiate an object from it.

function Lemonade(creator,quantity, ingredients , temperature)
{
  this.creator = creator;
  this.quantity = quantity;
  this.ingredients = ingredients;
  this.temperature = temperature;
  //add other arguments
 return this;
}

In the above syntax we used a function to define a template. We pass on some arguments we want to include in our object. The keyword 'this' here is used to refer to the object being created . This is because the template itself is detached from the object. It can be simply understood like this:

The lemonade recipe:

step 3: Add mint leaves extract.

step 4: Stir **this** mixture. 

You know that **this** here refers to the lemonade you are making and not the one your sister is making who is competing with you for the best lemonade . This also means that for her - the 'this' would refer to her lemonade.

Now onto creating an object.

const myLemonade = new Lemonade('Parikar',200,mysecretstuff,5);

const sisterLemonade = new Lemonade('MySis',150,herSecretStuff,3);

Here we use the new keyword to ask the computer to create a new object for us based on the Lemonade recipe we have provided and use the ingredients we described to create it. We can create as many objects we want as long as they are can be stored. For arguments we can pass on primitives, arrays , other objects and even functions and have them be a part of our object.

Are we missing something tho....

WAIT! WHAT?? But someone told us that object is just a set of key value pairs. And now you are telling us they are instances of some template. What is this dissonance. Let's clear this up . IN JAVASCRIPT - yes for JavaScript not all languages, objects are first a set of key value pairs . The templating power exists just to give us more power and control over the function being defined . As we can see we can define the object's properties even before it exists helping us maintain consistency . And the object is still not frozen. We can at any point add ,update or delete any property just like we do with a normal object.

For example:

myLemonade.serve = function serve(){
console.log('Here mum have a drink');
}

Now we have a function in our object.

But we are still forgetting something. This blog was supposed to be about classes. Where are classes? Well actually classes are just syntax sugar over what we just learnt. Why? Maybe to improve readability. Or maybe to get C++ and Java developers more comfortable. Lets have a look:

Syntax Sugar - I mean Classes

To define a class we can do this:

class Person{
constructor(name,printname){
 this.name = name;
 this.printname = printname;
}

greet(){
  return `Hi ${this.name}` ;
}
}

This creates a function same as our previous one and the greet function is added to the prototype. Lets see a rough sketch of how it actually looks through our lenses:

function Person(name,printname)
{
 this.name = name;
 this.printname = printname;
}

Person.prototype.greet = function(){
  return `Hi ${this.name}` ;
}

Now why did greet go to prototype and not as a function property. That is because sometimes we want all classes to share a common function because there is no use giving everyone a copy of this same function. It'll waste memory. Hence this method allows us to add functions to prototype. In fact we can also add default existing properties by this idea.

class Person{

avgWeight = 60;

constructor(name,printname){
 this.name = name;
 this.printname = printname;
}

greet(){
  return `Hi ${this.name}` ;
}
}

Now each object will have addWeight = 60.

Similarly there are many ways for us to create objects from classes. I suggest you check them out yourselves to get a better idea on them.

The way we use classes and objects in JavaScript depends on use cases. Understanding how they work overall gives us a better control over our code. It is highly recommended that the reader tries to implement their own classes and objects . This will help them get a better grasp on how to use them as well as the ability to learn about it from documentation. I say this because there are frequent updates that needs a developers skill in reading documentation to keep up with.