Javascript & Object Oriented Programming – Objects

JavaScript is an excellent language to write object oriented web applications. It can support OOP concepts because it supports inheritance through prototyping as well as properties and methods. Many developers write off JavaSript as a suitable OOP language because they are so used to the class style of C# and Java. Many people don’t realize that JavaScript supports inheritance. When you write object-oriented code it instantly gives you power, you can write code that can be re-used and that is encapsulated.

OOPs

JavaScript has Prototype based Inheritance and not Class based.

  • All objects are instances.
  • Define and create a set of objects with constructor functions.
  • Create a single object with the new operator.
  • Construct an object hierarchy by assigning an object as the prototype associated with a constructor function.
  • Inherit properties by following the prototype chain.
  • Constructor function or prototype specifies an initial set of properties. Can add or remove properties dynamically to individual objects or to the entire set of objects.

and because of all the above mentioned properties, JavaScript supports the concept of Object Oriented Programming.

Objects

JavaScript objects are pretty much similar to real-world objects. Consider a real world object say Monitor. It has properties like height, width, thickness and so on. If you consider a horn, it has properties such as noise level, intensity and so on.

So likewise JavaScript also allows you to create any objects with properties as you want. And when the code is wrapped inside an event, then its perfectly encapsulated. You also can initialize the same object any number of times.

A JavaScript object can be created in many different ways. One such way would be to use the new operator.

Example 1 :

var school = new School();
school.principal = "Mathew";
school.location  = "Trivandrum";
school.students  = "100";

where School is the object, school the instance of the object School and pricipal, location and students will be the properties.

Second method would be to use Object.create();

Example 2 :

var school = Object.create(School,{
    principal: "Mathew",
    location : "Trivandrum",
    students : "100"
});

Another way of creating an object will be through Literals. Using Literal Notations we can create JavaScript objects in the go. You can nest any number of objects inside an object.

Example 3 :

var school = {
    principal : "Mathew",
    location  : "Trivandrum",
    students  : "100"
}

Nesting in Objects is possible here.

Example 4 :

var school = {
    principal : "Mathew",
    location : "Trivandrum",
    students : "100",
    teachers : {
              "English" : "Manju",
              "History" : "D'Costa"
           }
}

Retrieving values from a Javascript object is very simple. The example below itself is a self explanatory one.

Example 5 :

//Object
var school = {
    principal : "Mathew",
    location  : "Trivandrum",
    students  : "100"
}
//Retrieving Property Values
var Principal = school.principal;
var Location  = school.location;
var Students  = school.students;

Objects and properties

A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:

objectName.propertyName;

Like all JavaScript variables, both the object name (which could be a normal variable) and property name are case sensitive. You can define a property by assigning it a value. For example, let’s create an object named school and give it properties named principal, location and year as follows:

Example 6 :

var school = new Object();
school.principal = "Mathew";
school.location = "TVM";
school.year = 2013;

Properties of JavaScript objects can also be accessed or set using a bracket notation. Objects are sometimes called associative arrays, since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the school object as follows:

Example 7 :

school["principal"] = "Mathew";
school["location"] = "TVM";
school["year"] = 2013;

An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation. This notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). Examples are as follows:

Example 8 :

var myObj = new Object(),
    str = "myString",
    rand = Math.random(),
    obj = new Object();
myObj.type              = "Dot syntax";
myObj["date created"]   = "String with space";
myObj[str]              = "String value";
myObj[rand]             = "Random Number";
myObj[obj]              = "Object";
myObj[""]               = "Even an empty string";
console.log(myObj);

You can also access properties by using a string value that is stored in a variable:

Example 9 :

var propertyName = "principal";
school[propertyName] = "Mathew";
propertyName = "location";
school[propertyName] = "TVM";
propertyName = "year";
school[propertyName] = "2013";

Deleting Properties

You can remove a property by using the delete operator. The following code shows how to remove a property.

Example 10 :

//Creates a new property, school, with two properties, principal and year.
school = new Object;
school.principal = "Mathew";
school.year = 2013;
//Removes the a property, leaving school with only the year property.
delete school.principal;

Inheritance
All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the prototype object of the constructor.

Defining properties for an object type

You can add a property to a previously defined object type by using the prototype property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object.

The following code adds a year property to all objects of type School, and then assigns a value to the year property of the object school.

Example 11 :

School.prototype.year = null;
school.year = "2013";

In JavaScript, almost everything is an object. All primitive types except null and undefined are treated as objects. They can be assigned properties (assigned properties of some types are not persistent), and they have all characteristics of objects.

Thankyou for reading. Cheers.

Leave a Reply

Your email address will not be published. Required fields are marked *