264

Is there any difference between

obj = {'foo': 'bar'}

and

obj = {foo: 'bar'}

I have noticed that you can't use - in the key when I don't use the quotes. But does it actually make a difference? If yes, which?

meo
  • 30,872
  • 17
  • 87
  • 123

5 Answers5

176

No, the quotes do not make a difference (unless, as you noted, you want to use a key that’s not a valid JavaScript identifier).

As a side note, the JSON data exchange format does require double quotes around identifiers (and does not allow single quotes).

bdukes
  • 152,002
  • 23
  • 148
  • 175
  • 110
    Actually, the quotes _can_ make a difference if you use a numeric literal as a property name. For example, `obj = { 12e34: true };` is not the same as `obj = { '12e34': true };`. The former would require you to access the property through `obj['1.2e+35']`, while for the latter you’d use `obj['12e34']`. [See my answer for more details.](http://stackoverflow.com/a/9568622/96656) – Mathias Bynens Mar 06 '12 at 12:18
  • 1
    True but it would be brilliant if double quotes were optional given a-z first character + alpha-numeric and may quite some whitespace fans aka invisible spaces or tabs? great for data not deeply nested. – King Friday Jan 23 '16 at 02:01
  • 3
    @MathiasBynens says that it can make a difference for numeric literal, but I would say that the best way to think about this is that the property that you define/access is always converted to a string. So this is not only about numeric literals, but any property that isn't a string and when converted to a string, produces a different "text value". e.g. `obj[{}]` will try to access the property `'[object Object]'` instead of a property `'{}'` because `({}).toString()` is `'[object Object]'` and not just `{}` with quotes around. – Vencovsky Jun 04 '22 at 15:48
146

From Unquoted property names / object keys in JavaScript, my write-up on the subject:

Quotes can only be omitted if the property name is a numeric literal or a valid identifier name.

[…]

Bracket notation can safely be used for all property names.

[…]

Dot notation can only be used when the property name is a valid identifier name.

Note that reserved words are allowed to be used as unquoted property names in ES5. However, for backwards compatibility with ES3, I’d suggest quoting them anyway.

I also made a tool that will tell you if any given property name can be used without quotes and/or with dot notation. Try it at mothereff.in/js-properties.

Screenshot

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
9

There is no difference here. Just a matter of style. One of the reasons for doing this is being able to use 'super' or 'class' as a key since those are reserved keywords.

Some people might be tempted to pass in a string with whitespace then call o['I can have whitespace'] But I would call that bad practice.

Raynos
  • 166,823
  • 56
  • 351
  • 396
3

No, not to javascript. However, some JSON parsers will fail when the quotes around the keys are not present.

01001111
  • 838
  • 5
  • 5
1

There are some situations where they are different. For example, if you are using jQuery, and you are making a list of parameters to pass when calling the jQuery $() command to create an element, quoted words are turned into parameters, and non-quoted words are turned into functions. For example, "size" will set the size attribute of the object, and size (no quotes), will call the size() function on the object. See jQuery(), near the bottom:

While the second argument is convenient, its flexibility can lead to unintended consequences (e.g. $( "<input>", {size: "4"} ) calling the .size() method instead of setting the size attribute). The previous code block could thus be written instead as:

spekary
  • 408
  • 5
  • 10
  • 1
    I don't think that example says what you think it says. The issue you've quoted is because jQuery has a method called size, and the conflict between the method size and the attribute size is resolved by selecting the method. There are cases in jQuery where passing a _Value_ as a string or another type causes a change in behavior, but never from defining a property with a valid property name in quotes vs not in quotes. – Alex Weitzer May 18 '15 at 22:53