NOTE : This article was written with the beginners in mind, and the examples are very easy to understand.
As most of us know, JavaScript provides two notations for accessing object properties. The first, and most common, is known as DOT NOTATION, While the alternate syntax for accessing object properties is known as BRACKET NOTATION.
Both notations can access object properties. But beginners often ask themselves which is best to use . But trust me you won't need to worry about which and why you should use any of the JS notations. Just follow this simple rule : Always use the Dot Notation. And when you want to access object property with a variable, use the Bracket Notation
below is an example of both Dot Notation and Bracket Notation :
var object = {
name: 'value'
};
// Dot Notation
object.name; // 'value'
// Bracket Notation
object['name']; // 'value'
DOT NOTATION
It was very easy for me to understand both the Dot Notation and Bracket Notation (which i am sure you will understand easily too), but the problem was always WHICH SHOULD I USE AND WHY??
The dot notation is often preferred because it is easier to read, less verbose, and works better with aggressive JavaScript minimizers. So, you should always use dot notation whenever you're dealing with properties.
Not only is it quicker to write self.foo has less characters than short['foo'] but more importantly it makes chained codes easier to understand. For example:
people.person.name.firstName;
is easier to understand than
people['person']['name']['firstName']
Dot Notation Limits
- Issue Working with Identifiers One of the major limits of using the Dot notations is that it only works with valid identifiers. An identifier is a sequence of characters in the code that identifies a variable, function, or property.
- Accessing Property with Variables Another 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 how you know you’re dealing with a variable instead of accessing the property key.
BRACKETS NOTATION
In bracket notation, the object name is followed by a set of square brackets. Inside the square brackets, the property name is specified as a string.
Bracket notation is more expressive than dot notation because it allows a variable to specify all or part of the property name. This is possible because the JavaScript interpreter automatically converts the expression within the square brackets to a string, and then retrieves the corresponding property.
Bracket notation also allows property names to contain characters that are forbidden in dot notation. For example, the following statement is completely legal in bracket notation. However, if you tried to create the same property name in dot notation, you would encounter a syntax error.
CONCLUSION
Use the Dot Notation. But if you’re dealing with invalid identifier or variables, use the Bracket notation.
REFFRENCES :