Introduction to JavaScript Objects


JavaScript is not an old torn off language for web anymore, HTML 5 has accepted it and that too as a standard, JavaScript has been evolving since its beginning and no matter what anyone say, it has ruled the client side scripting world. Here we introduce and explain a lot more about its OOP feature and its Object notation.

Object orientation is more or less a part of programming world, somehow every popular programming language is moving towards Object orientation. Thus JavaScript is not and exception. However its OOP patterns are not really complicated like some other languages, but its really easy and handy.

In this part of text we will describe the Objects in JavaScript. Objects in JavaScript can be defined as an entity with defined properties. This could be a Car, a Bike, a Computer or anything else you could imagine that you could define in terms of its properties. Thus JavaScript Objects define the elements with its properties.

Objects in JavaScript are as easy as to define any other variable. In this tutorial we will take example of Person. We can define the properties of a Person as Name, Age, Gender and Occupation. Well there could be many more but we will keep it short. So here is how we define the object person.


var person = {
  name:"James",
  age:24,
  gender:"male",
  occupation:"Manager"
};

Now in this declaration "person" is an object and name, age, gender and occupation defines the person. Not only this we can also create methods(which we commonly know as functions in JavaScript) in objects. For example we can modify person object to say, "Hello".


var person = {
  name:"James",
  age:24,
  gender:"male",
  occupation:"Manager",
  says:function(){
   console.log("Hello");
  }
};

see this person defines a callback function that says hello on invocation. Now that we have defined the person object let us now see how to access its properties. For this task JavaScript provide the '.' notation. We access the property of an object using '.'(dot) operator. as


var person = {
  name:"James",
  age:24,
  gender:"male",
  occupation:"Manager",
  says:function(){
   return "Hello";
  }
};

console.log(person.name+" is a "+person.age+" years old "+person.gender+" who works as a "+person.occupation+". He says "+person.says()+" to you all!");

Output:
James is a 24 years old male who works as a Manager. He says Hello to you all!

As you can see in the output of the program the access made to the properties of the object has been replaced by the values assigned to them and of course we did some modification to the callback function to return a value instead of printing it to console.So we get the final outcome. Yes, it is as simple as that.

Not only this but you can also add more properties on the go, for example for our last instance of person, we can add the weight property as,


person.weight = 65;

and without redefining the whole object the property will be added to the object, similar could be the case for deletion, you can use delete keyword as shown in example below.


delete person.occupation;
console.log(person.occupation); //undefined

after using the delete keyword on the object if you try to access it this will result in "undefined". undefined is a special type of property in JavaScript, on the several occasion you can use undefined to compare the result in order to avoid a result in NaN or some JavaScript error.

Note: It is important to know that Objects in JavaScript are really very valuable to learn, as HTML5 has accepted JavaScript as default scripting language, and Rather JSON which is JavaScript Object Notation is now days a very popular mean of transmitting the data over Internet(over ajax or restful web services).