There are multiple ways to access object properties in JavaScript. But two common ones are dot notation and bracket notation.
I'll explain the difference between these two approaches in this article.
With dot and bracket notation, you can:
- access the value of a property by its key
- modify the value of an existing property by its key and
- add a new property to an object
But these two ways access properties differently, and there are different scenarios when one is better than the other.
Dot Notation Property Accessor
The Dot Notation approach involves using a dot or period (.
) and a key to access a property. Here's the syntax:
object.key
You have the dot then the key of the property you want to access. This expression will return the value of the property. Let's see an example:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
const target = obj.name
// deeecode
By using dot and the name key, .name
, we get "deeecode" which is the value of the name property.
You can also use this notation to modify an existing property:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
obj.age = 100
console.log(obj)
// {
// name: "deeecode",
// age: 100,
// language: "javascript"
// }
Here, we modify the age
property.
Also, you can add a new property using this approach:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
obj.location = "Mercury"
console.log(obj)
// {
// name: "deeecode",
// age: 80,
// language: "javascript",
// location: "Mercury"
// }
Here, we add the location
property.
But this approach has limitations which we'll look at soon. Next, let's understand how the bracket notation approach works.
Here's a video version for this topic if you're interested.
Bracket Notation Property Accessor
The Bracket Notation approach involves using square brackets, in which you have an expression that evaluates to a value. That value serves as a key for accessing the property. Here's the syntax:
object[expression]
The expression within the brackets evaluates to a key for the property you want to access, and this expression will return the value of the property. Let's see an example:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
const target = obj["name"]
// deeecode
By using square brackets and a "name" string expression, ["name"]
, we get "deeecode" which is the value of the name property.
You can also use this approach to modify an existing property:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
obj["age"] = 100
console.log(obj)
// {
// name: "deeecode",
// age: 100,
// language: "javascript"
// }
Here, we modify the age
property using an "age"
string expression.
And, you can add a new property using square brackets:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
obj["location"] = "Mercury"
console.log(obj)
// {
// name: "deeecode",
// age: 80,
// language: "javascript",
// location: "Mercury"
// }
Here, we add a new location
property using a "location"
string expression.
The bracket notation has more capabilities than the dot notation. I'll explain.
Differences between Dot Notation and Bracket Notation Property Accessor
Dot Notation only allows static keys while Bracket Notation accepts dynamic keys. Static key here means that the key is typed directly, while Dynamic key here means that the key is evaluated from an expression.
Let's look at some examples.
Using both approaches for accessing properties
Starting with dot notation:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
const myKey = "language"
const target = obj.myKey
// undefined
Here, I assigned the value "language" to a myKey
variable. What I would expect here is that when I use the dot notation, like obj.myKey
, "myKey", should be replaced with "language". So it would read as obj.language
and that would return "javascript".
But that's not what happens. Instead, the result is undefined
.
The reason for this is that Dot Notation only accepts static keys. So when you do obj.myKey
, JavaScript looks for the property with the key myKey
in obj
. But that property does not exist, so we get undefined
.
The Bracket Notation, on the other hand, allows dynamic keys. Because this notation accepts expressions, you can use any expression that evaluates to a value. It could be:
hello + Hi
which evaluates tohelloHi
as a keyreturnKey()
which evaluates to value as a keyisTrue ? "trueKey" : "falseKey"
which evaluates to "trueKey" or "falseKey" as a keyvariable
which evaluates to the value of the variable as a key
Therefore, using the previous example, we can have this:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
const myKey = "language"
const target = obj[myKey]
// javascript
The expression we passed to the square brackets is myKey
which is a variable. This expression evaluates to "language" which is the value of the variable. Using this value, the square brackets can get the value of the property, which is "javascript".
But if you pass a string expression like "myKey"
, you get undefined
:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
const myKey = "language"
const target = obj["myKey"]
// undefined
This is because the string expression "myKey"
evaluates to the value "myKey"
which serves as the key for accessing the property. Since there's no myKey
key on obj
, the returned value is undefined
.
Using both approaches for modifying properties
Starting with dot notation:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
const myKey = "age"
obj.myKey = 100
console.log(obj)
// {
// name: "deeecode",
// age: 80,
// language: "javascript",
// myKey: 100
// }
Here, we have myKey
with the "age" value. By attempting to do obj.myKey = 100
to modify the age
property, it will not work. This is because the dot notation accepts a static key. So obj.myKey
takes myKey
as a key. Since mykey
does not exist in obj
, this statement adds the key. Then, obj
has a new key, myKey
with the value 100
.
The behavior is different with the bracket notation:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
const myKey = "age"
obj[myKey] = 100
console.log(obj)
// {
// name: "deeecode",
// age: 100,
// language: "javascript"
// }
Instead of adding a new myKey
property to obj
, the brackets approach modifies the age
property. The reason is, we pass myKey
as an expression to the square brackets. This expression, as a variable, evaluates to "age"
which is the value of the variable. Using "age" as a key, this approach modifies the value of the age
property to 100
.
And if we wanted to add a new property using square brackets, then we can pass an expression that returns a new key that does not exist. For example:
const obj = {
name: "deeecode",
age: 80,
language: "javascript",
}
const myKey = "location"
obj[myKey] = "Mercury"
console.log(obj)
// {
// name: "deeecode",
// age: 100,
// language: "javascript",
// location: "Mercury"
// }
Here, the myKey
variable holds a new value: "location"
. By passing this to square brackets, and assigning a value of "Mercury", we now have a new property with key-value pair of location
and "Mercury".
Should You Use Dot or Bracket Notation?
So far, we've looked at how each notation works, using different examples for accessing/modifying existing properties and for adding new properties. So which should you use when writing JavaScript code?
The main factor that will help you make your decision is the key of the property you want to access. If it is a static key, use Dot Notation. But if it is a dynamic key (evaluated from an expression during runtime), use Bracket Notation.
Dot Notation is useful when you know the property ahead of time. You simply do object.key
to read/modify an existing property or to add a new property.
Bracket Notation is useful when you want to dynamically access a property. The key of this property could come from expressions like getKey()
, "my" + "key"
, or keyVariable
.
I hope you learnt something from the piece. Please share if you found it helpful :)