Objects Concept in Just 5 Simple Steps

Magazine 22 Mar , 2013  


1urlHello Friends, My last post  was Are you Confuse with Datatypes in Javascript Yet? where we found Object is a Datatype, Objects is something which can make our code very useful and less of redundancy and also it gives some standard to our code which can be very easy and error free for us and also for other programmers who may work on it in future, So lets go for the ride with objects, You will find it very interesting…

Step 1: Basics of Objects

JavaScript Objects represent self contained entities consisting of variables (called properties in object terminology) and functions (called methods) that can be used to perform tasks and store complex data.

urlJavaScript objects fall into three categories:

1. Built-in Objects,

2. Custom Objects and

3. Document Object Model (DOM) Objects.

The simplest way to create an object is either through the Object constructor or the shorthand syntax known as object literal. These simple objects are unordered key/value pairs.

Step 2: Simple Usage of JavaScript Objects

The key is formally known as a property and the value can be any valid JavaScript type, even another object. To create or access a property on an object, we use what is known as “dot notation” or “bracket notation.”

// Creating an object with the constructor:
var person1 = new Object;
person1.firstName = "Ankita";
alert( person1.firstName );

// Creating an object with the object literal syntax:
var person2 = {
    firstName: "Ankita",
    lastName: "Gupta"
alert( person2.firstName + " " + person2.lastName );
// As mentioned, objects can also have objects as a property.
var people = {};

people[ "person1" ] = person1;
alert( people[ "person1" ].firstName );

If we try to access a property which has not been ever defined so in result it will return a type of undefined.

// Properties that have not been created are undefined.
var person = { name: "Ankita Gupta" };
alert( person.email ); // => undefined

Step 3: Creating a Custom JavaScript Object

Creating a custom JavaScript object is quite similar to constructing a function. The syntax is as follows:

function object(''parameter1, parameter2,...''){
     this.property1 = parameter1;
     this.property2 = parameter2;

     this.method1 = function1;
     this.method2 = function2;

u2rlIn the above outline object refers to the name of the object – this can be any valid (and hopefully descriptive) name you choose to use. The parameters define the values that you will pass into the object when you instantiate it later.

Step 4: Creating and Using Object Instances

In the following script we will create a new instance of the car object with the name myCar:

websiteObject = new website ("Ford", "Focus", "Red");

We have also passed through parameters to initialize the properties of the object (make, model and color).
To access a property:

//To access a property we use objectInstance.propertyName and 
//To call a method of an object we use objectInstance.methodName()

//We can also access a property, for example the color as follows:
document.write ("The make property of myCar is " + myCar.make );

//Finally, we can also change one of the properties of an object instance:
myCar.make = "BMW";

Step 5: Lets Bring All Together

<title>A Simple JavaScript Function Example</title>
<script language="JavaScript" type="text/javascript">

function car (make, model, color)
  this.make = make;
  this.model = model;
  this.color = color
  this.displayCar = displayCar;
function displayCar()
     document.writeln("Make = " + this.make)


<script language="JavaScript" type="text/javascript">
myCar = new car ("Ford", "Focus", "Red");
myCar.make = "BMW";


That’s all , Now you may Enjoy the Objects in your code too 🙂


, , ,