3

I have been going through several questions such as this to see if there is a standard practice/ best practice for whether to put quotes on keys in JavaScript or JSX or TSX. I, however, haven't found anything and would like to know (before building a huge project on bad practices) which is best between:

obj = {'foo': 'bar'}

and

obj = {foo: 'bar'}

Or better yet, is there some document I can refer to for this?

Tine S Tsengwa
  • 134
  • 9
  • 2
    You only need quotes if you're working with keys that are invalid JS identifiers. Keys *are* valid identifiers in the vast majority of cases. You can require quotes throughout the project if you want to, but it will increase the project size by a little bit and will be little more effort to type, especially if you are have many objects. – FZs Feb 06 '22 at 17:51
  • 2
    The usual practice is to only use quotes on keys when they are required (because the key contains a character that requires the quotes such as a dash). – jfriend00 Feb 06 '22 at 17:51
  • Thanks all. Seems like it's unanimous. – Tine S Tsengwa Feb 06 '22 at 18:05

3 Answers3

7

checkout the Airbnb JavaScript Style Guide. It has a standard set of guidelines and best practices.

  • 3.6 Only quote properties that are invalid identifiers. eslint: quote-props

Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines.

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};
cmgchess
  • 7,996
  • 37
  • 44
  • 62
1

ESLint docs have some input on this:

In many cases, it doesn't matter if you choose to use an identifier instead of a string or vice-versa. Even so, you might decide to enforce a consistent style in your code.

There are, however, some occasions when you must use quotes:

  • If you are using an ECMAScript 3 JavaScript engine (such as IE8) and you want to use a keyword (such as if) as a property name. This restriction was removed in ECMAScript 5.
  • You want to use a non-identifier character in your property name, such as having a property with a space like "one two".

Another example where quotes do matter is when using numeric literals as property keys:

var object = { 1e2: 1, 100: 2 };

IMO it's good to use quotes when needed.

Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
  • 1
    Thanks for the response. Yeah I'll go ahead and leave out the quotes. Would probably be better for other devs in the future as well. – Tine S Tsengwa Feb 06 '22 at 18:09
1

Both work and it's up to you what you want to do but my university teacher did tell us not to use quotations so as to make it a bit different from string value hence our whole class adopted as standard practice

obj = {foo: 'bar'}
Ahmed Ali
  • 257
  • 1
  • 7