JSLint and JSHint will throw the "['{a}'] is better written in dot notation" error when they encounter an attempt to access a property using a string literal and square bracket notation, when that property name is not a reserved word. In the following example we attempt to access the prop property of the x object:
This error is raised to highlight an unnecessarily verbose and potentially confusing piece of code. It is very common in many programming languages to use dot notation when referring to properties of an object. There is no problem with either syntax, and both will work in all environments. However, by using dot notation where possible, you can save three characters every time. Here's the above snippet, this time with dot notation:
However, it's important to remember that you have to use the square bracket notation if you want to access a property whose identifier is a reserved word. JSLint and JSHint will not raise this error in that situation. In the following example, x has a property with the identifier class. Notice that JSLint does not throw an error, even though we are using square bracket notation:
If you're using JSHint it's also possible to suppress this error by setting the sub option to true:
In JSHint 1.0.0 and above you have the ability to ignore any warning with a special option syntax. The identifier of this warning is W069. This means you can tell JSHint to not issue this warning with the /*jshint -W069 */ directive.
This article was written by James Allardice, an enthusiastic young JavaScript developer at Global Personals (we're looking for front-end developers so please apply). He is passionate about writing clean, maintainable JavaScript and uses JSHint every day to help achieve this.
You can follow him on Twitter, fork him on GitHub and find him on Google+.