How to Use JavaScript Object Literals for HTML Integration

By John Paul Mueller

In JavaScript, an object literal is a special kind of data collection. It contains named values that you use to make accessing a particular value easier. The idea is to create a package that you can send to somewhere with all the values required to perform a task. Because the values are named, you don’t have to provide them in any specific order.

In addition, the recipient doesn’t have to work with the content in any specific way. This is a kind of object that lacks any sort of constructor and has no need for methods. The entire purpose of this technique is to make transferring data simpler and less error prone. Check out a real world example of how object literals are used.

How to create the name/value pairs in JavaScript

Object literals rely on name and value pairs to store information. You provide a name (also called a label) and a data value to go with it. The recipient can then retrieve the data by name. The following example shows a simple use of an object literal.

<!DOCTYPE html>
  <title>Working with Object Literals</title>
  <h1>Create and Use Object Literals</h1>
  <script language="JavaScript">
   // Create the object literal.
   var customerData =
     Name: 'Sally Jones',
     Age: 32,
     Birthday: new Date("01/15/1981")
   // Display the object literal data onscreen.
     "<p>The customer's name is: " +
     customerData.Name +
     " age is: " + customerData.Age +
     " and date of birth is: " +
     customerData.Birthday.toDateString() + "</p>");

In this case, customerData contains three values: Name, Age, and Birthday. Each of these labels has an associated value. Notice that you needn’t worry about mixing data type — the object literal doesn’t care. The important elements are to enclose the data within curly brackets, to provide a name for each value, to separate the value from the name by a colon, and to separate values with commas.

At this point, customerData is a package that you could send anywhere. The example uses the information directly after the object literal is created. Notice that you use standard dot syntax to access each of the values. The order of access doesn’t matter because you access the values by name.


How to add new name/value pairs in JavaScript

JavaScript supports a number of methods for adding new name and value pairs to an object literal. The easiest method of accomplishing this task is to simply type the name of a new property and assign a value to it.

For example, if you wanted to add a property named HairColor to the customerData example and give the customer a hair color of brown, you’d simply type customerData.HairColor = “Brown”;. The new property would appear as part of customerData as if you had provided it as part of the original object literal.