It just seems bracket notation works 100% of the time, while dot notation only works if the property name doesn’t have any spaces. So it seems logical to just use bracket notation all the time
Your code so far
// Setup
var testObj = {
"hat": "ballcap",
"shirt": "jersey",
"shoes": "cleats"
};
// Only change code below this line
var hatValue = testObj.hat; // Change this line
var shirtValue = testObj.shirt; // Change this line
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.
Challenge: Accessing Object Properties with Dot Notation
Yes bracket notation is the safest but you can use dot notation provided the property name is a valid identifier. For example if const obj = { '1': 'Nibble}, obj['1'] is valid while obj.1 is not.
You can read more about it at MDN
Faster to type (and less typo-prone) and cleaner to read. Dot notation is widely used across many languages, so most developers are extremely comfortable with it.
Note: I don’t think I’ve ever seen property names with spaces in professional code.
For myself personally I feel that dot notation sometimes just looks a bit better and easier to understand, however, as you mentioned, unless you know for certain that your dot notation is going to work you should probably be using brackets just to be safe.
One benefit of dot notation I can think of off the top of my head is a bit faster code completion in the editor you are using. When dotting into the object the editor will give you a list of all the properties on the object which can be handy. I know VS Code does it for bracket notation as well but it happens a bit later and you have to type a bit more before you get the list.
The same can be said for methods. You can use bracket notation here as well, but that is much less commonly used unless the property is computed.
As everyone has said, you can definitely use brackets in every instance if you like, but the vast majority of professionals are going to write
obj.property
instead of
obj['property']
And they would probably look at you funny if you did the latter instead of the former. So if you don’t want to look like an amateur then use dot notation when brackets aren’t required.
I hadn’t thought about code editors, but now that you mention it - in addition to giving you code completion, in a lot of IDEs you also get the ability to do things like jump to the declaration and get some warnings when you try to access it incorrectly. With bracket notation, editors just trust that you know what you’re doing.
@konstantin.krumin – you’ll always know whether dot notation will “work” when you’re writing the code.
One case where you must use bracket notation is when your object’s key may be accessed using an event object value or id or a variable of some sort. If you try dot notation, it won’t work.
//Some content object with lots of key/values
const content = {};
$('#menu').on("change", (event) => {
menuSelection = content[event.target.value];
});