How to create classes and objects in javascript

by

Here i am going to talk about some OOPS concept in javascript, That how to create custom classes and objects in javascript.
If you are going to work on some javascript based application then you must use classes and objects to make methods reusable.

There is two recommended method to create classes and objects in javascript.
1. Literal Notation Method
2. Construct Method

Ok Lets first talk about the Literal Method

Literal Notation Method

Most of the time you use literal method in your javascript programming but may be you are not aware about the name called literal
Literals are shorter way to define objects in JavaScript. To create an empty object using you can do:

var USER = {};

Where USER is blank object.
Now assign some variable

var USER = {
                name : "Rohit",
                email : "[email protected]" 
};

You can also put some custom method in your newly created object.

var USER = {
                name : "Rohit",
                email : "[email protected]",
                profile : function() {
                   return "Full Name: " + this.name + ", Email Id: " + this.email;
                } 
};




Now your basic custom object has been created successfully and time to access this object.
You can simply access the object value and method by using ObjectName.variableName and ObjectName.methodName()

// call single vaiable
console.log(USER.name);
// OUTPUT: Rohit
console.log(USER.email);
// OUTPUT: [email protected]
 
// call method
console.log(USER.profile());
//OUTPUT: Full Name: Rohit, Email Id: [email protected]

So above is the simplest method to create custom object in javascript

Now lets about about the second type Construct Method.

Construct Method

This method just like to create normal javascript function you can call it to your custom javascript class this time.

 function USER() {
 }

above is this blank USER class.
Now put some private and public variables.

function USER() {
 this.name = "Rohit";  // Public variable
 this.email = "[email protected]"; // Public variable
 var age = "27"; // Private variable
}

In the above example you can see that, If you use this.variableName it means you assigned public variable you can access this to any where, But if you assign private variable var variableName like this, then you can access it with in class.

Now create method under your custom class.
Like variable you can create two types of the method public and private as per your requirement

function USER() {
 this.name = "Rohit";  // Public variable
 this.email = "[email protected]"; // Public variable
 var age = "27"; // Private variable
 this.profile = function () {  // Public Method
      return "Full Name: " + this.name + ", Email Id: " + this.email;
 }; 
 var ageInfo = function () { //Private Method
      return "My Age "+this.age;
  };
}

Using new keyword you can create object of the class and call it’s variable and methods.

var pObj = new USER();
// call single vaiable
console.log(pObj.name);
// OUTPUT: Rohit
console.log(pObj.email);
// OUTPUT: [email protected]
 
// call method
console.log(pObj.profile());
//OUTPUT: Full Name: Rohit, Email Id: [email protected]

What is prototype in javascript

you create a new variable and object at any time by using prototype function in javascript below are the some example to adding variable and objects in USER Construct class.

// Adding variable 
USER.prototype.location = 'Kanpur';
 
// Adding method
USER.prototype.getLocation = function () {
    return "Location of "+ this.name + " is " + this.location;
}

Calling newly created variables and function

var pObj = new USER();
 
console.log(pObj.location);
// OUTPUT : Kanpur
 
console.log(pObj.getLocation());
// OUTPUT : Location of Rohit is Kanpur

Hope this javascript OOPs tutorial will help you to create custom classes and objects in javascript.

If you like this post please don’t forget to subscribe my public note book for more useful stuff

Published by Rohit