Like arrays Javascript Objects represent a more complex data type that can be used to store multiple values. Javascript objects are also a convenient way for storing and transferring data - see this post on JSON.

Creating a new Object

To create a new Javascript object we have a number of options. Firstly we can use a constructor technique that programmers in other languages may be familiar with ie:

var myObject = new Object();

Alternatively we can just use the curly { } brackets notation ie:

var myObject = {};

Key / Value Pairs

Objects are characterized by the way they store data in key / value pairs. These are placed within the curly brackets with a colon : between the key and value.

{"Author" : "Dickens"}

Here the key is the 'author' and the value 'Dickens'. We can also have more than one key / value separated by commas ie:

{"Author" : "Dickens", "Book" : "A Tale of Two Cities"}

Adding Key / Value Pairs

We can add new key / value pairs when the object is created:

var myBooks = {"Author" : "Dickens", "Book" : "A Tale of Two Cities"};

and add and amend them in the script.

var myBooks = {"Author" : "Dickens", "Book" : "A Tale of Two Cities"};
myBooks.published = 1870;
console.dir(myBooks);

The output in the console would appear as:

Extracting Values

Values can be extracted from the object using square bracket [ ... ] or dot . notation ie:

var myBooks = {"Author" : "Dickens", "Book" : "A Tale of Two Cities"};
// this
console.info(myBooks.Author);
// is the same
console.info(myBooks['Author']);

Looping an Object

To loop around an object and extract all its value we can use a for ... in. This variant of the for loop will loop around all the values in the object extracting each variable (key) which can then be used to extract the value.

var myBooks = {"Author" : "Dickens", "Book" : "A Tale of Two Cities", "published" : 1870};
myBooks.published = 1870;
for (myKey in myBooks) {
	   document.getElementById('showObj').innerHTML += myKey + " : " + myBooks[myKey] + "<br>";
} 

Note that we have used square bracket myBooks[myKey] rather than dot myBooks.myKey notation. Dot notation is not goinig to work within the for ... in. Consider this broken example:

///////////////// this won't work //////////////
var myBooks = {"Author" : "Dickens", "Book" : "A Tale of Two Cities", "published" : 1870};
for (myKey in myBooks) {
	   document.getElementById('showObj').innerHTML += myKey + " : " + myBooks.myKey + "<br>";
} 
///////////////// this won't work //////////////

The above broken example attempts to use myBooks.myKey to access the value of the key / value pair. However, this won't work as unlike with square brackets [ ... ] the value of myKey has not been evaluated.

A fuller example would use hasOwnProperty. The hasOwnProperty is used to check for the variables existence helping to stop undefined values been extracted.

var myBooks = {"Author" : "Dickens", "Book" : "A Tale of Two Cities", "published" : 1870};
for (myKey in myBooks) {
   if (myBooks.hasOwnProperty(myKey )) {
	   document.getElementById('showObj').innerHTML += myKey + " : " + myBooks[myKey] + "<br>";
   }
} 

Here is a demo.

Objects via Functions

Javascript options can also be created using functions for example.

function car(type, model, year, colour){
   this.type=type;
   this.model=model;
   this.year=year;
   this.colour=colour;
}

The above function uses the this keyword to assign properties that arrive as parameters. We can create an object from this function by using the new keyword and pass parameters to be the properties of that particular object ie:

var myCar = new car("Ford", "Anglia", 1964, "blue");
console.dir(myCar);

The properties can be accessed using the same techniques outlined above ie myCar.colour or myCar['colour'] allowing the value to be both read and overwritten.

Find out more above creating objects and prototypes.

Leave a Comment