JavaScript Object Literal

Code at dyn-web.com has been constructed using object literals for several years. But until the 2008 updates, users of our code haven't had to encounter or use object literals directly.

This brief tutorial is intended as a basic introduction to the syntax, hopefully to help you address any errors you may encounter when trying to implement dyn-web code using object literals for setup purposes.

Introduction: Definition and Purpose

What is an object literal? In nontechnical terms, it is a means of containing a lot of data in one tidy package. It is a comma separated list of name value pairs wrapped in curly braces. In JavaScript an object literal is declared or defined as follows: 

var myObject = {}

An object literal with a few properties, from a Rotating Images example:

var myRotator = {
    path: 'images/', 
    speed:  4500,
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"]
}

Object literals are used as a means of encapsulating data, avoiding the use of global variables which can cause problems when combining code.

How and Why We Use Object Literals

Objects literals enable us to write code that supports lots of features yet still make it a relatively straightforward for the implementers of our code. No need to invoke constructors directly or maintain the correct order of arguments passed to functions, etc.

Object literals are also useful for unobtrusive event handling, as a way of holding data that would otherwise have been passed to functions called from HTML event handler attributes.

Basic Syntax

Object literals are formed using the following syntax rules:

  • A colon separates property name from value.
  • A comma separates each name/value pair from the next.
  • There should be no comma after the last name/value pair. Firefox won't object if you add it, but Internet Explorer will trigger an error: 'Expected identifier, string or number'.

Values can be of any data type, including array literals and object literals. Referring to the myRotator example above, the images property is an array literal. An array literal is a shortcut to create an array in JavaScript, just as the object literal is the shortcut to object creation:

var myArray = new Array();
// array literal form:
var myArray = [];

An example of an object literal with the value of the properties being object literals, from a Tooltip demo:

dw_Tooltip.content_vars = {
    link1: {
        img: 'images/dw-btn.gif',
        txt: 'dyn-web button',
        w: 100
    },
    link2: {
        img: 'images/dot-com-btn.gif',
        txt: 'dyn-web.com button',
        w: 184
    }
}

If any of the syntax rules are broken, such as a missing comma or colon or curly brace, a JavaScript error will be triggered. Both Firefox's and Internet Explorer's error messages are helpful in pointing out the general location of object literal syntax errors. They will not necessarily be completely accurate in pointing out the nature of the error though. If you are not sure where to find the error messages, see our tutorial on JavaScript Errors for more information.

Adding Properties to an Object

Once an object literal has been defined you can later add more properties to it as demonstrated below.

dw_Tooltip.content_vars = {
// May be empty at this point or already have properties, as shown above 
}
// Add more properties using the following syntax: 
dw_Tooltip.content_vars['link3'] = 'content for link 3';
dw_Tooltip.content_vars['link4'] = {
    caption: 'A Heron',
    img: 'images/heron.gif',
    txt: 'A heron image created from a character font.',
    wrapFn: dw_Tooltip.wrapTextByImage,
    w: 210
}

Be sure to observe the syntax differences when adding properties this way: i.e., an equals sign rather than a colon separates property and value, and an optional semicolon ends the assignment rather than a comma.

Note: Licensed users of dyn-web code receive assistance in handling problems they encounter in implementing the code they have purchased.

Further Resources

For more information on object literals and related issues see the following:

Back to top