Object Oriented JavaScript : Classes, Methods and Properties

Here is Previous Part of this series:

• Object Oriented JavaScript Part 1: Introduction to OOP in JS

This is second part of Object Oriented Programming in JavaScript. I would recommend to see previous article on Object Oriented JavaScript before continuing this.

JavaScript is classless, there is no class keyword in JavaScript but you can achieve same via objects.

In first part we see, how interesting JavaScript is. It allow us to work on familiar Object Oriented way of programming like we use in other programming languages. In first part we learn about namespaces, core classes, custom classes and class instances in JavaScript and there is complete article on Inheritance in JavaScript through prototyping.

In last article we see that in JavaScript class in nothing but a function. So writing a class in JavaScript is as easy as writing a function.

Public Methods & Properties

Here is a Student class with some public properties and function.

var Student = function () {
this.first_name;
this.last_name;
this.courses = [];

this.fullName = function () {
return this.first_name + ' ' + this.last_name;
};
};

var student = new Student();

student.first_name = "Ali";
student.last_name = "Raza";
student.courses = ["JavaScript", "Object Orient Programming", "Functional Programming"];
var full_name = student.fullName()
console.log(full_name);
console.log('No. of Courses : ' + student.courses.length);

Here is JsFiddle Demo

Here in this example we used this keyword with function and properties to make it public. One thing which make JavaScript more powerful from any other OOP language is run-time changes in class structure. You can add new properties and function for any particular instance of function. So lets say in above example we add some more properties and function to an object:

var Student = function () {
this.first_name;
this.last_name;
this.courses = [];

this.fullName = function () {
return this.first_name + ' ' + this.last_name;
};
};

var student = new Student();

student.first_name = "Ali";
//runtime added property not present in class
student.middle_name = "H.";
student.last_name = "Raza";
student.courses = ["JavaScript", "Object Orient Programming", "Functional Programming"];
student.skills = function () {
return "Expert in JavaScript";
}

console.log(student.skills());

Here is JsFiddle Demo

One thing to notice in above example is that we have instantiate an object of Student class using statement var student = new Student() ; so the properties and function we adding to student object is only available to current object only. So if we created another object i.e, var student2 =new Student(); and try to call the skills() function with this it will throw an error.

 

Public Methods using Prototype

You can add public methods to a class using Prototype property then it will be available to all the instances of the class.

var Student = function () {
this.first_name;
this.last_name;
this.courses = [];
};

Student.prototype.fullName = function () {
return this.first_name + ' ' + this.last_name;
};

Here is JsFiddle Demo

 

Private Method & Properties

 

In class methods and properties we remove this keyword and introduce var keyword (recommended by strict mode of ECMAScript) then it will be a private function and properties.

var Student = function () {
    var private_property = "It is private property";

    var private_function = function () {
        console.log("This is private function");
    };
};

var student = new Student();
//will print undefine
console.log(student.private_property);
//this will throw an error private_function is not a function
console.log(student.private_function());

Here is JsFiddle Demo

Note here as we discussed above you can add new properties within object after creating an instance of class so here if you assign value to private_property it will create a new property in instance and assign value to it. JavaScript will not throw error on property creation.

var student = new Student();

//will print undefine
console.log(student.private_property);

//add new property same name of private property
student.private_property="set public content";

console.log(student.private_property);

Another point here to note is that you have created a public property of same name to the private property but class still maintain the private property with same value. So I was right in saying JavaScript is a race car you only need to know how to handle it.

var Student = function () {
    var private_property = "It is private property";

    var private_function = function () {
        console.log("This is private function");
    };

    this.checkPrivatePropertyValue = function () {
        console.log(private_property);
    }
};

var student = new Student();
//will print undefine
console.log(student.private_property);

//add new property same name of private property
student.private_property = "set public content";

console.log(student.private_property);
student.checkPrivatePropertyValue();

Here is JsFiddle Demo

Static Functions

To create a Static method for the class, you can add it with the class name.

var Student = function () {
    this.first_name;
    this.last_name;
    this.courses = [];
};

Student.StaticMethod = function () {
    return "Here is static content";
};

Here is JsFiddle Demo

Now you can call it anywhere directly with the class name.

So in this article we explore to declare the different type of methods and properties. If you have any feedback please do write comments.

Here is Next Part of this series:

• Object Oriented JavaScript : Inheritance, Polymorphism and Encapsulation