Write JavaScript in Object Oriented way

Most of the developers write their JavaScript code in plain structural way by using code that includes only variables and functions. Nowadays, many of the developers use jQuery as well, which doesn't really require you to make very big effort in order to keep most of your code organized, because most of the features that jQuery includes/has are already wrapped into reusable objects, therefore it's used very straight forward.

Although we have jQuery in our hands, if you have a lot of logic in the front-end side of your application, you will definitely come in a situation when you will need to write plain JavaScript code to implement algorithm and achieve something. If you really think about maintainability, re-usability and extensibility, then you should probably start thinking more of writing your JavaScript code on object oriented manner.

If you ask yourself "Who is writing JavaScript in Object-oriented way?", I would say that everyone who is writing plugins (especially for jQuery) is writing it on OOP way.

Let's make some initial comparisons:

Standard way

var name = "Hajan";
var surname = "Selmani";
var age = 26;
function GetNameSurname(name, surname)
{
    return name + " " + surname + " (" + age + ")";
}
        
alert(GetNameSurname("Hajan", "Selmani"));

This will give Alert with result Hajan Selmani (26).

Now, if we rewrite the above code in Object Oriented way:

var Person = function(name, surname) 
{
    this.Name = name;
    this.Surname = surname;
    var _age = 26;
    
    this.GetNameSurname = function()
    {
        return this.Name + " " + this.Surname + " (" + _age + ")";
    }
}

        
var personObj = new Person("Hajan", "Selmani");
alert(personObj.GetNameSurname());
alert(personObj.Name);

Results: Hajan Selmani (26) and Hajan, in the second alert.

With function(name, surname) {} we create object constructor so that now when we create object instance personObj, the way new object is instantiated is using new keyword and the object name with the constructor parameters. This is exactly the same way as we do it in C#, for example.

Using this.ObjectMemberName (e.g. this.Name, this.Surname or this.GetNameSurname), we create public properties and methods of that object.

After we have created personObj, you can see that we are able to freely access public members of that objects using objectName.MemberName.

If you want to create private properties and members, just declare them privately using var memberName, e.g. var _age = 26;. This will be accessible only inside the object private local scope, but not outside it.

If you observe the object in client debuggers:

In JavaScript, there is also a nice way to extend object functionality by using prototype keyword. With prototype, you can add new public member to the object.

Here is an example:

Person.prototype.GetFirstName = function()
{
    return this.Name;
}

alert(personObj.GetFirstName());

Now if we take a look at the object again, we will see the GetFirstName function is there:

Hope this was helpful.

Regards,
Hajan