DEV Community

Dot notation vs Bracket notation

Samantha Ming on June 17, 2019

Both notations can access object properties. But the question is often which one should I use 🤔. Wonder no more, just follow Airbnb's style guide...
Collapse
 
clovis1122 profile image
José Clovis Ramírez de la Rosa • Edited

Great post, Samantha!

Another case where I would personally use bracket notation is when the property name is odd - that alerts the reader that the properties in the object are non-standard!

user.firstName;      // camelCase notation as usual.
user['first_name'];  // underscore notation, using brackets to remark that the name is different!
Collapse
 
samanthaming profile image
Samantha Ming

Good example! Thanks for sharing that 👍

Collapse
 
marcellonicoletti profile image
Marcello Nicoletti

Another place bracket notation is useful is when you use a minifier. Minifiers can be configured to replace dot notation identifiers. This isn't an issue for most cases, but it is when you reference a DOM element's attributes. The value in the HTML will not get changed by minification so your references shouldn't either. Minifiers won't change strings so bracket notation using a string is how you can ensure DOM references work after minification.

Collapse
 
sameerchandra profile image
Sameer Chandra Nimushakavi

So, dot is preferred just for ease of use and nothing else?

Collapse
 
marcellonicoletti profile image
Marcello Nicoletti • Edited

It also looks like object usage in other C-like languages. It will be easier to read and write for people coming from C, C#, and Java.

EDIT: I guess that's still ease of use, but in a different way than mentioned in the post. As far as I know there is no time difference when the code is actually running so there is only really differences in ease.

Collapse
 
samanthaming profile image
Samantha Ming

Woo! Definitely an advantage 👍 will add that to my notes 😊

Collapse
 
samanthaming profile image
Samantha Ming

Yup! But isn’t that enough of a selling point 😝

Collapse
 
baso53 profile image
Sebastijan Grabar

While I agree with you on the part which one you should use, I don't like how you said 3 times in the article - "Always use the dot notation". It wasn't explained why, just that you should "follow a popular style guide". That could lead to a wrong path down the road, doing something just because it's popular.

Collapse
 
samanthaming profile image
Samantha Ming

Fair point! I definitely could have dive more into it. Thanks for the feedback 👍

Collapse
 
laurieontech profile image
Laurie

Such a great idea for a post! I remember how much I struggled with guessing which one to use when I first started. Now it seems so natural, but I have no idea when it transitioned.

Collapse
 
samanthaming profile image
Samantha Ming

Me too!!! Getting the concept was the easy part. But the confusion is when to use which. I remember getting very frustrated with that 😅. Glad this article was helpful! And I’m always taking content suggestion, if there any topics you want me to cover, just let me know 😊👍

Collapse
 
christopherkade profile image
Christopher Kade

Loving these frequent code snippets Samantha ! 😄

Collapse
 
samanthaming profile image
Samantha Ming

Yay! Glad to hear that! It also helps sharpen my JS skills, so win win 😊 if there are topics you want me to cover, just let me know! 👍

Collapse
 
fellipegpbotelho profile image
Fellipe Geraldo Pereira Botelho

Great post Samantha!

Collapse
 
samanthaming profile image
Samantha Ming

Thanks! Glad you find it helpful 😃👍