Standardista

CSS3, JavaScript and HTML5 explained

JavaScript Object Literals Simplified

Instantiating Objects

You are likely familiar with instantiating strings and arrays in javascript:

var myString = new String();
var myArray = new Array();

Array and String are both objects, extended from the Object object. String and Array are objects inheriting all the properties of the Object object, and adding new properties and methods that are specific to the Array and String objects respectively. In these cases, the new keyword creates a new instance of the String and Array objects respectively.

There are several ways to declare an object in Javascript, including:

var myObject = new Object();

var myObject = {};

JavaScript Dot Notation

If you are on this site, you have likely used javascript dot notation for properties and methods of objects. The following hopefully looks familiar to you:

var myFirstLink = document.getElementById('myDiv').getElementsByTagName('a')[0]; 
//returns the first link in the parent element with ID of "myDiv"

myFirstLink.className = "myClass" 
// or, not as good, but still valid, myFirstLink.style.color = "#ff0000"

and if you have used any javascript libraries, or have coded more advanced javascript, you have likely used javascript dot notation in creating new methods, such as

myObject.somemethod = function(){
    // code here
}

Declaring methods and properties with Dot notation

Using dot notation your code may look something like this:

var myObject = new Object();
	myObject.myProperty = value;
	myObject.yourProperty = value;
	myObject.myMethod = function(){
	  //code here
	}
	myObject.yourMethod = function(){
	  //more code
	}

Note: remember that undefined properties of objects return undefined. Unlike undeclared variables, they do “exist”, so they don’t throw an error. If we us the examples above, (myString.typoed_property == undefined) returns true.

Declaring methods and properties using Object Literal syntax

You could declare the properties and methods listed above using cleaner Object Literal syntax:

var myObject ={
	myProperty : value,
	yourProperty : value,
	myMethod : function(){
	  //code here
	},
	yourMethod : function(){
	  //more code
	}
}

A few things to note:

  1. The Object literal notation is basically an array of key:value pairs, with a colon separating the keys and values, and a comma after every key:value pair, except for the last, just like a regular array. Values created with anonymous functions are methods of your object. Simple values are properties.
  2. if you are mixing code sources, using libraries or sharing code, you want to use static methods and properties rather than public methods and properties, to safeguard against overwriting functions or variables / methods or properties declared outside your current javascript file.
  3. Unlike public functions, which can appear anywhere in your code, including after lines using your function, methods declared using object literal notation do not exist until execution of that section of the script.
  4. This method instantiates a new object, so don’t try to create a instance using the new keyword

One Response to “JavaScript Object Literals Simplified”

  1. bird says:

    nice work!

Leave a Reply