There are two ways to access properties: dot notation and bracket notation.
Both notations can access object properties. But the question is often which one should I use 🤔.
const obj = {
name: 'value'
};
// Dot Notation
obj.name; // 'value'
// Bracket Notation
obj['name']; // 'value'
These both are simple! But my concern was never about the different notations. My biggest dilemma was, WHICH SHOULD I USE?? 🤯
They both do the same. So here is the simple rule. By default, just use the Dot notation.
Dot Notation 🏆
The Dot Notation approach involves using a dot or period (
.) and a key to access a property.
It's easier to read
It's faster to type
You can also use this notation to modify an existing property:
const obj = {
name: "devangi",
age: 25,
language: "react",
}
obj.age = 21
console.log(obj)
// {
// name: "devangi",
// age: 21,
// language: "react"
// }
Also, you can add a new property using this approach:
const obj = {
name: "devangi",
age: 21,
language: "react",
}
obj.city = "porbandar"
console.log(obj);
// {
// name: "devangi",
// age: 21,
// language: "react"
// city: "porbandar"
// }
But Dot notation has some limitations. we will discuss it later.
Bracket Notation 🏆
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.
You can also use this approach to modify an existing property:
const obj = {
name: "devangi",
age: 25,
language: "react",
}
obj[age] = 21
console.log(obj)
// {
// name: "devangi",
// age: 21,
// language: "react"
// }
And, you can add a new property using square brackets:
const obj = {
name: "devangi",
age: 21,
language: "react",
}
obj[city] = "porbandar"
console.log(obj);
// {
// name: "devangi",
// age: 21,
// language: "react"
// city: "porbandar"
// }
Difference between Dot notation and bracket notation!
It means some limitations of dot notation:
When we work with identifiers.
When we work with variables.
When we work with identifiers:
Working with identifiers in that limit in dot notations is that it only works with valid identifiers. First, let' me define what is an identifier.
In javascript, An identifier is a sequence of characters in the code that identifies a variable, function, or property. identifiers are made of alphanumeric characters, underscores(_), and dollar signs ($).
The identifier has the following rules:
Digits (0-9) are allowed but they may not start with a digit.
$, -, are allowed
case sensitive
can contain Unicode letters
So let's try with these examples and see what happens when we use the Dot notation.
const obj = {
123: 'digit',
123name: 'start with digit',
name123: 'does not start with digit',
$name: '$ sign',
name-123: 'hyphen',
NAME: 'upper case',
name: 'lower case'
};
Dot notation
obj.123; // ❌ SyntaxError
obj.123name; // ❌ SyntaxError
obj.name123; // ✅ 'does not start with digit'
obj.$name; // ✅ '$ sign'
obj.name-123; // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError
obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'
Bracket Notation
obj['123']; // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'
obj['name123']; // ✅ 'does not start with digit'
obj['$name']; // ✅ '$ sign'
obj['name-123']; // ✅ 'does not start with digit'
obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'
Verdict
If you think you have an invalid JavaScript identifier as your property key, use the Bracket Notation 👍
When we work with variables.
Second, the limitation of the Dot notation is working with variables. You definitely should use the Bracket Notation. Note! When you're referencing a variable in the Bracket Notation, you need to skip the quote. That's kinda how you know you're dealing with a variable instead of accessing the property key.
const variable = 'name';
const obj = {
name: 'value',
};
// Bracket Notation
obj[variable]; // ✅ 'value'
// Dot Notation
obj.variable; // undefined
Which to use?
Use the Dot Notation. But if you're dealing with invalid identifiers or variables, use the Bracket notation.