Understanding Javascript for Java Programmers

OOPS Javascript 

Yes, Javascript is Object Oriented  but has no class. Yikes!!!

What do you mean Javascript has no Class?

In Java we have templates to define an Object 

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

public static class Student     {         //properties         private String name;         private int[] marks = new int[3];                   //Constructor         public Student(String name,int[] marks)         {             this.name =name;             this.marks = marks;         }                   //Method         private int sum(){             return marks[0]+marks[1]+marks[2];         }     }             public static void main(String args[])     {         int[] s1Marks = {75,84,90};           // Object instance s1 is created from Student class // s1 is the object         Student s1 = new Student("Ravi" ,s1Marks);                    int s1Total = s1.sum();     }

    public static class Student
    {
        //properties
        private String name;
        private int[] marks = new int[3];
        
        //Constructor
        public Student(String name,int[] marks)
        {
            this.name =name;
            this.marks = marks;
        }
        
        //Method
        private int sum(){
            return marks[0]+marks[1]+marks[2];
        }
    }   
    
    public static void main(String args[]) 
    {
        int[] s1Marks = {75,84,90};
        
// Object instance s1 is created from Student class
// s1 is the object
        Student s1 = new Student("Ravi" ,s1Marks);  
        
        int s1Total = s1.sum();
    }

In above Java program, Student class is the template for the object.
s1, s2 are the real objects.

But for Javascript, theres is no class, after creating a object, its properties and methods can be dynamically added.

?

01 02 03 04 05 06 07 08 09 10 11 12 13	//Object created var Student = new Object(); //Object properties added later Student.name = "Ravi"; Student.marks = [75,84,90]; //Object methods added later Student.sum = function(){                 return this.marks[0]+this.marks[1]+this.marks[2];             } s1Total.innerHTML = Student.sum();

//Object created
var Student = new Object();

//Object properties added later
Student.name = "Ravi";
Student.marks = [75,84,90];

//Object methods added later
Student.sum = function(){
                return this.marks[0]+this.marks[1]+this.marks[2];
            }

s1Total.innerHTML = Student.sum();

Other ways to create Javascript Objects

?

01 02 03 04 05 06 07 08 09 10 11 12 13	//Object created var Student = {     //properties     name  : "Ravi",     marks : [75,84,90],           //methods     sum   : function(){                     return this.marks[0]+this.marks[1]+this.marks[2];             } } s1Total.innerHTML = Student.sum();

//Object created
var Student = {

    //properties
    name  : "Ravi",
    marks : [75,84,90],
    
    //methods
    sum   : function(){
                    return this.marks[0]+this.marks[1]+this.marks[2];
            }
}
s1Total.innerHTML = Student.sum();

Function is an Object too. What did u just say 'function' ?
Yes, Javascript is so much object oriented that even the methods or functions are Objects too.
In Javascript, Function can be

• assigned to Variables
• stored inside Arrays
• passed as Parameters

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

//Function Object  var sum   = function(marks){                     return marks[0]+marks[1]+marks[2];             }               var s1 = {     //properties     name    : "Ravi",     marks   : [75,84,90],           //function object as argument     print   : function(msg,func)             {                 return this.name + msg + func(this.marks);             } } //sum function is passed as parameter s1Total.innerHTML = s1.print("'s Total marks =",sum);

//Function Object created
var sum   = function(marks){
                    return marks[0]+marks[1]+marks[2];
            }
            
var s1 = {
    //properties
    name    : "Ravi",
    marks   : [75,84,90],
    
    //function object as argument
    print   : function(msg,func)
            {
                return this.name + msg + func(this.marks);
            }
}
//sum function is passed as parameter
s1Total.innerHTML = s1.print("'s Total marks =",sum);

In above example, function Object is 1st created and assigned to a variable sum
The sum function Object is passed as parameter to the s1 Object's print method

We can get some feel of Class like templating of Java by using Constructor Function & new operator. Constructor function is just like a normal function where its properties are initialised by the passed parameters.
new operator is used to create a new Object.

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14	//Constructor Function  created function Student(name,marks) {     this.name   = name;     this.marks  = marks;     this.sum    = function(){                     return this.marks[0]+this.marks[1]+this.marks[2];                 } } // new Object created & initialized         var s1 = new Student("Ravi", [75,84,90]); var s2 = new Student("Anwar",[70,83,97]); s1Total.innerHTML = s1.sum();

//Constructor Function  
function Student(name,marks)
{
    this.name   = name;
    this.marks  = marks;
    this.sum    = function(){
                    return this.marks[0]+this.marks[1]+this.marks[2];
                } 
}
// new Object created & initialized         
var s1 = new Student("Ravi", [75,84,90]);
var s2 = new Student("Anwar",[70,83,97]);

s1Total.innerHTML = s1.sum();

Now with Student constructor function we can initiliase every Object we want to use as a Student Object.

Now the simialr code if we try by adding sum method outside of the Student Constructor Function, the code fails.

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14

//Constructor Function function Student(name,marks) {     this.name   = name;     this.marks  = marks; } //Appending sum method to Student Object from outside of the Constructor function Student.sum = function(){                 return this.name+ " got " +this.marks[0]+this.marks[1]+this.marks[2];             } // new Object created & initialized         var s1 = new Student("Ravi", [75,84,90]); s1Total.innerHTML = s1.sum(); // TypeError: s1.sum is not a function

//Constructor Function 
function Student(name,marks)
{
    this.name   = name;
    this.marks  = marks;
}
//Appending sum method to Student Object from outside of the Constructor function
Student.sum = function(){
                return this.name+ " got " +this.marks[0]+this.marks[1]+this.marks[2];
            } 
// new Object created & initialized         
var s1 = new Student("Ravi", [75,84,90]);

s1Total.innerHTML = s1.sum(); // TypeError: s1.sum is not a function

This where the similar code can be achieved by a prototype property that is present in all Javascript Objects.

Prototype Object
In Javascript, every object has a prototype property that reference its prototype Object. Any properties & methods that are part of an Object's prototype will appear as properties & methods of that Object itself.

?

1 2 3 4 5	//Appending sum method to prototype property of the Student Object // Now sum becomes the method of Student Object Student.prototype.sum = function(){                 return this.name+ " got " + (this.marks[0]+this.marks[1]+this.marks[2] );             }

//Appending sum method to prototype property of the Student Object
// Now sum becomes the method of Student Object
Student.prototype.sum = function(){
                return this.name+ " got " + (this.marks[0]+this.marks[1]+this.marks[2] );
            } 

Now using prototype property the sum appears as the method of Student Object.


Private members
This is done by using Douglas Crockford technique. The local variables and parameters can both become private member by using Closure. Closure is just inner function has access to variables and parameters of outer function.

For more understanding of Closure and its private members technique, lets take that to next post.