Learn Object Oriented JavaScript

Many times, variables or arrays are not sufficient to simulate real life situations. JavaScript allows you to create objects that act like real life objects. A student or a home can be an object that have many unique characteristics of their own. You can create properties and methods to your objects to make programming easier. If your object is a student, it will have properties like first name, last name, id etc and methods like calculateRank, changeAddress etc. If your object is a home, it will have properties like number of rooms, paint color, location etc and methods like calculateArea, changeOwner etc.
Create an Object
You can create an object like this:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
varobjName = new Object();
 
objName.property1 = value1;
 
objName.property2 = value2;
 
objName.method1 = function()
 
{
 
line of code
 
}
OR
?
1
2
3
varobjName= {property1:value1, property2:value2, method1: function()
 
{ lines of code} };
Access Object Properties and Methods
You can access properties of an object like this:
objectname.propertyname;
You can access methods of an object like this:
objectname.methodname();
Try this yourself:
This code is editable. Click Run to Execute
1
​
2
    <html>
3
​
4
    <head>
5
​
6
    <title>Objects!!!</title>
7
​
8
    <script type="text/javascript">
9
​
10
    var student = new Object();
11
​
12
    student.fName = "John";
13
​
14
    student.lName = "Smith";
15
​
16
    student.id = 5;
17
​
18
    student.markE = 76;
19
​
20
    student.markM = 99;
21
​
22
    student.markS = 87;
23
​
24
    student.calculateAverage = function()
25
​
26
    {
27
​
28
    return (student.markE + student.markM + student.markS)/3;
29
​
30
    };
31
​
32
    student.displayDetails = function()
33
​
34
    {
35
​
36
    document.write("Student Id: " + student.id + "<br />");
37
​
38
    document.write("Name: " + student.fName + " " + student.lName + "<br />");
39
​
40
    varavg = student.calculateAverage();
41
​
42
    document.write("Average Marks: " + avg);
43
​
44
    };
45
​
46
    student.displayDetails();
47
​
48
    </script>
49
​
50
    </head>
51
​
52
    <body>
53
​
54
    </body>
55
​
56
    </html>
57
​
But creating objects of this kind is not that useful because here also, you will have to create different objects for different students. Here comes object constructor into picture. Object constructor helps you create an object type which can be reused to meet the need of individual instance.
Try this yourself:
This code is editable. Click Run to Execute
1
​
2
    <html>
3
​
4
    <head>
5
​
6
    <script type="text/javascript">
7
​
8
    function Student(first, last, id, english, maths, science)
9
​
10
    {
11
​
12
    this.fName = first;
13
​
14
    this.lName = last;
15
​
16
    this.id = id;
17
​
18
    this.markE = english;
19
​
20
    this.markM = maths;
21
​
22
    this.markS = science;
23
​
24
    this.calculateAverage = function()
25
​
26
    {
27
​
28
    return (this.markE + this.markM + this.markS)/3;
29
​
30
    }
31
​
32
​
33
    this.displayDetails = function()
34
​
35
    {
36
​
37
    document.write("Student Id: " + this.id + "<br />");
38
​
39
    document.write("Name: " + this.fName + " " + this.lName + "<br />");
40
​
41
    var avg = this.calculateAverage();
42
​
43
    document.write("Average Marks: " + avg + "<br /><br />");
44
​
45
    }
46
​
47
    }
48
​
49
    var st1 = new Student("John", "Smith", 15, 85, 79, 90);
50
​
51
    var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
52
​
53
    var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
54
​
55
    var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
56
​
57
​
58
    st1.displayDetails();
59
​
60
    st2.displayDetails();
61
​
62
    st3.displayDetails();
63
​
64
    st4.displayDetails();
65
​
66
    </script>
67
​
68
    </head>
69
​
70
    <body>
71
​
72
    </body>
73
​
74
    </html>
75
​

for/in loop

Syntax:
?
1
2
3
4
5
6
7
for (variablename in objectname)
 
{
 
lines of code to be executed
 
}
The for/in loop is usually used to loop through the properties of an object. You can give any name for the variable, but the name of the object should be same as that of an already existing object which you need to loop through.
Try this yourself:
This code is editable. Click Run to Execute
1
​
2
    <html>
3
​
4
    <head>
5
​
6
    <script type="text/javascript">
7
​
8
    var employee={first:"John", last:"Doe", department:"Accounts"};
9
​
10
    var details = "";
11
​
12
    document.write("<b>Using for/in loops </b><br />");
13
​
14
    for (var x in employee)
15
​
16
    {
17
​
18
     details = x + ": " + employee[x];
19
​
20
     document.write(details + "<br />");
21
​
22
    }
23
​
24
    </script>
25
​
26
    </head>
27
​
28
    <body>
29
​
30
    </body>
31
​
32
    </html>
33
​
at