Blog
Property Access Expressions in JavaScript
By Martin Schaeferle | July 25, 2012
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
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.
- 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.
- If the value is not an object or array, JavaScript converts the value.
- 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.
- 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!
