Start a personal dev blog on your domain for free with Hashnode and grow your readership.
Get Started

DOT NOTATION OR BRACKET NOTATION?

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 :

DailyJS

StackOverflow

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Comments (3)

Luiz Filipe da Silva's photo

Straight to the point. Good explanation!

PS: In your example,

people[person[name[firstName]]]

should be

people['person']['name']['firstName']
Adeyemi Misturah's photo

thank you so much for the correction