There are two ways of setting, altering, and accessing the properties of an object: dot notation and bracket notation.
Dot notation
As seen in some previous examples, dot notation uses a period (.
) between an
object and the property key being accessed:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
You can use dot notation to access, change, or create new properties using assignment operators:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Chaining property keys using dot notation lets you access the properties of objects that are themselves properties of an object:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
However, using this syntax when a key specified in the chain might not be
defined can cause errors. In the following example, myMissingProp
isn't a
property of the myObj
object, so trying to access myObj.myMissingProp
results in undefined
. Trying to then access a property on undefined
, as if
it were an object, causes an error:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
To address this issue, ES2020 introduced an "optional chaining operator" (?.
)
to safely access nested properties of objects.
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
Keys accessed using dot notation aren't enclosed in quotation marks like string literals are. This means you can use dot notation to access only property keys that are valid identifiers:
const myObj = {
"1": true,
"key with spaces": true
};
myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal
myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'
Because of this, it's best practice to follow identifier rules when specifying property keys whenever possible. If this isn't possible for a given key, an alternate bracket notation syntax lets you set and access string-based object keys that don't follow identifier rules.
Bracket notation
Bracket notation uses a set of brackets ([]
) containing a value that evaluates
a string (or a Symbol) representing the
property key.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
This syntax is considerably more permissive, and potentially permissive enough
to be confusing, because the value in brackets is evaluated as a string literal
regardless of its data type. For example, here the boolean value false
and the
number value 10
are used to access properties associated with the string
literal keys "false"
and "10"
:
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
The strength of this syntax is in its flexibility, allowing the use of dynamically-created strings to access properties. The following example uses a random number to select one of an object's three properties:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
As with dot notation, you can use bracket notation to both access and create new properties, using assignment operators:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }