Add, Modify, or Access Object Literal Properties

Earlier, we introduced JavaScript Object Literals and the syntax used to define them. On this page we show you:

  • How to add a property to a previously defined object literal,
  • How to change the value of an existing property, and
  • How to read the current value of a property.

Whether you want to add a property, change the value of a property, or read the value of a property, you have a choice of syntax: dot syntax or square bracket notation. Dot syntax is simpler and is generally sufficient. We will demonstrate that first. Square bracket notation and its uses are described below.

Add a Property to an Existing Object Literal

Consider the following example object literal:

var myObject = {
    sProp: 'some string value',
    numProp: 2,
    bProp: false

You can use dot syntax to add a new property to it as follows:

myObject.prop2 = 'data here';

To add a new property to an object, specify the object name followed by: a dot, the name of the new property, an equals sign, and the value for the new property (enclosed in quotes if it is a string).

Modify a Property of an Object Literal

The process for modifying a property is essentially the same. Here we will assign a new value to the sProp property shown in the original myObject definition above:

myObject.sProp = 'A new string value for our original string property';

To change the value of an existing property of an object, specify the object name followed by: a dot, the name of the property you wish to change, an equals sign, and the new value you wish to assign.

Read Current Value of Object Property

The following demonstrates how to access a property of an object literal:

alert(myObject.sProp) // display myObject.sProp value in alert
var val = myObject.sProp; // assign myObject.sProp to variable

An expression with an object name, a dot, and a property name (myObject.sProp) will evaluate to the current value of that property. Our example first displays the value in an alert, then assigns the value to the variable val.

Dot Syntax or Square Brackets?

As mentioned above, you can add, modify, or access an object property using either dot syntax or square bracket syntax. When using dot syntax, the value after the dot needs to be a valid identifier,[1] When using square brackets, the value in brackets must be a string or evaluate to a string.

Square bracket syntax is necessary if a property name contains spaces or other special characters, or if it consists of a keyword reserved in JavaScript. Otherwise, JavaScript errors will result.

The following demonstrates square bracket syntax:

myObject['first name'] = 'John'; // property name with a space

Square bracket syntax is also necessary when the property name is variable; for example, if it is passed as an argument to a function, is accessed in a for/in loop, or is an expression to be evaluated, such as the following:

for (var i=0; i<=4; i++) {
    myObject['prop' + i] = i;
alert( myObject.prop3 ); // 3

A Function to Add Properties

If you have more than a few properties to add to an object, and if that object name is long, it can be rather tedious to add new properties using the usual approach:

dw_Tooltip.content_vars.link20 = 'content for link 20';
dw_Tooltip.content_vars.link21 = 'content for another tooltip ...';
// etc.

It can be useful to have a function to perform this task. Read on for more information.

  1. A valid identifier can include letters, underscores, dollar signs, and digits. An identifier cannot begin with a digit. ^