Coding with JavaScript For Dummies
Book image
Explore Book Buy On Amazon

After you create an object and define its properties in JavaScript, you’ll want to be able to retrieve and change those properties. The two ways to access object properties are by using dot notation or square brackets notation.

Dot notation

In dot notation, the name of an object is followed by a period (or dot), followed by the name of the property that you want to get or set.

To create a new property called firstName in the person object or to modify the value of an existing firstName property, you would use a statement like the following:

person.firstName = "Glenn";

If the firstName property doesn’t already exist, this statement will create it. If it does exist, it will update it with a new value.

To retrieve the value of a property using dot notation, you would use the exact same syntax, but you would move the object and property names (called the property accessor) into a different position in the statement. For example, if you want to concatenate the values of person.firstName and person.lastName and assign them to a new variable called fullName, you would do the following:

var fullname = person.firstName + person.lastName;

Or, to write out the value of a person.firstName to your html document, just use the property accessor as you would any variable; such as

document.write (person.firstName);

Dot notation is generally the faster to type and easier to read way to set and retrieve object property values.

Square bracket notation

Square bracket notation uses, you guessed it, square brackets after the object name in order to get and set property values. To set a property value with square bracket notation, put the name of the property in quotes inside square brackets, like this:

person["firstName"] = "Iggy";

Square bracket notation has a couple of capabilities that dot notation doesn’t. The main one is that you can use variables inside of square bracket notation for cases where you don’t know the name of the property that you want to retrieve when you’re writing your program.

The following example does the exact same thing as the preceding example, but with a variable inside of the square brackets rather than a literal string. Using this technique, you can make a single statement that can function in many different circumstances, such as in a loop or a function:

var personProperty = "firstName";
person[personProperty] = "Iggy";

Here’s a simple program that creates an object called chair, then loops through each of the object’s properties, and asks the user to input values for each. Once the user has entered a value for each of the properties, the writeChairReceipt function is called, which prints out each properties along with the value the user entered.

<html>
<head>
 <title>The WatzThis? Chair Configurator</title>
</head>
<body>
 <script>
 var myChair = {
  "cushionMaterial" : "",
  "numberOfLegs" : "",
  "legHeight" : ""
 };
 function configureChair() {
 var userValue;
 for (var property in myChair) {
  if (myChair.hasOwnProperty(property)) {
  userValue = prompt("Enter a value for " + property);
  myChair[property] = userValue;
  }
  }
 }
 function writeChairReceipt() {
 document.write("<h2 id="tab3" >Your chair will have the following configuration:</h2>");
 for (var property in myChair) {
  if (myChair.hasOwnProperty(property)) {
  document.write(property + ": " + myChair[property] + "<br>");
  }
  }
 }
 configureChair();
 writeChairReceipt();
 </script>
</body>
</html>

About This Article

This article is from the book:

About the book authors:

Chris Minnick is an accomplished author, trainer, and web developer who has worked on web and mobile projects for both small and major businesses. Eva Holland is an experienced writer and trainer who has designed and taught online, in-person, and video courses. They are cofounders of WatzThis?

This article can be found in the category: