Quoting property names in JavaScript

JavaScript is relatively lax when it comes to valid object syntax. Property names can be quoted or unquoted in most circumstances. These two examples are identical.

I’ve noticed recently that I’ve developed my own quoting style at some point that seems to be rather uncommon so I decided to finally share it and why I’ve come to use it. I’m sure I’m not the first, nor will I be the last to come up with this system but it’s probably worth a blogpost anyway.
A lot of the time in my job I find myself having to work with JavaScript objects derived from JSON (or JSON Schema). Functions consume them, or construct them, and output a modified version of them based on user input. These objects have very strict rules over what properties they can have, but certain property keys are user configurable (In JSON Schema, these are ‘additional properties’.
NB: By user input here I mean any input into your function. It could be user input, or it could be input from an external component that interfaces with your functions in some manner.
Consider the following example JSON Schema where quoted property names are never used.

The same example, but this time with every property name is quoted

Now tell me. At a glance is it obvious which property names are open to manipulation by the user, rather than being a schema-defined name from the schema (in this case JSON Schema)? At a glance, what is the type of the somethingElse property under filed?
Contrast that with the following example, where I quote fields as I would under my system.

To me it makes it much clearer which properties the user chose, and also makes it easier to visually navigate eg if this is in a test file and I need to update a particular fields type to reflect new behavior, because syntax highlighting now colors them differently.
This example happened to be an instance of JSON Schema, but I feel this technique works equally well for any object where the user can control the structure of the object, as opposed to just the content. Every object your code is working with will have some structure to it.
More generally I guess I’d phrase this as quoting significant property names, or ‘Significant Quoting’ as opposed to always quoting or never quoting.
Obviously there’s a couple of drawbacks in representing objects this way in test files. JavaScript quoting rules are somewhat complex, and so mandating a property name be quoted or not sometimes has to depend on the name itself rather than the source of the property name. The other drawback is that there is no linting rule I’m aware of to enforce this. Which, as an advocate of automated rule enforcement and correction, bugs me. A linting system to enforce this could probably be devised with enough investment and time defining typescript style rules or annotations for the objects you work with.
Despite those drawbacks though, I really do feel that in code and especially in test files, this quoting system can make it much easier and quicker to comprehend the structure and navigate down a complex object.

Leave a Reply

Your email address will not be published. Required fields are marked *