Property Access Expressions in JavaScript

By Martin Schaeferle | July 25, 2012

Thumbnail for 684

Expressions are the building blocks of JavaScript code, the mechanism you can use to manipulate data and change the state of an application. They are snippets of code that the JavaScript interpreter can evaluate to produce a value, and can be as simple as a literal value or as complex as a complicated arithmetic process that combines multiple values using a variety of operators to perform various operations on the data. JavaScript provides a rich set of expressions that you can use to build an application with, and a robust set of operators you can use in many kinds of expressions. In this article we'll take a look at Property Access Expressions.

Property Access Expressions

A property access expression provides access to the value of an object property or the value of an array element. JavaScript has two syntaxes for these expressions, as shown in the following code. You can use either syntax to access the value of an object property and just the second, using square brackets, to access an element of an array.
expression.identifier expression[expression]

Using either type of access expression, JavaScript follows a general process for evaluating the overall property access expression. Keep in mind that an object in JavaScript is essentially a collection of name/value pairs.

  1. It first evaluates the expression before the . or [. If the value is null or undefined, it throws a type error because those values don't have properties.
  2. If the value is not an object or array, JavaScript converts the value.
  3. If the expression uses the . notation with an identifier, JavaScript retrieves the value of that property from the object, which becomes the value of the overall expression. If the property doesn't exist, the value is undefined.
  4. If the expression uses the [] notation, JavaScript evaluates the expression within the brackets and converts the value to a string, then reads that property from the object or element from the array. It again returns undefined if the property or array doesn't exist.

The following code demonstrates a few variations of these property access expressions. It starts by defining an object with top, left, bottom, and right properties, then an array with numeric elements and the obj object. The first two console.log statements access the left property of the object using both types of access expression syntaxes. The third line emphasizes that what is contained between the square brackets is an expression, so JavaScript has to evaluate the expression and concatenate the letters of "left" before it can access the property. The next line accesses array element 2 (the third element in the zero-based array index) of the array.

The final statement makes JavaScript evaluate the expression in the square brackets to determine which array element to access, which is the obj object, then accesses its left property. This last statement shows that you can mix the two syntaxes in a single expression. Figure 15 shows the results.

var obj = { top:3, left: 4, bottom: 5, right: 6 }; var arr = [1, 2, 3, obj]; console.log("obj.left = " + obj.left); console.log("obj['left'] = " + obj['left']); console.log("obj['l' + 'e' + 'f' + 't'] = " + obj['l' + 'e' + 'f' + 't']); console.log("arr[2] = " + arr[2]); console.log("arr[1+1+1].left = " + arr[1+1+1].left); 

Figure 15. The results of property access expressions.


Get more JavaScript training Today!


Martin Schaeferle

Martin Schaeferle has taught IT professionals nationwide to develop applications using Visual Basic, Microsoft SQL Server, ASP, and XML. He has been a featured speaker at Microsoft Tech-Ed and the Microsoft NCD Channel Summit, and he specializes in developing Visual Basic database applications, COM-based components, and ASP-based Web sites. In addition to writing and presenting technical training content, Martin is also LearnNowOnline's vice president of technology.

This blog entry was originally posted July 25, 2012 by Martin Schaeferle