¿Cuál es la diferencia entre claves de objeto con comillas y sin comillas?

209

¿Hay alguna diferencia entre

obj = {'foo': 'bar'}

y

obj = {foo: 'bar'}

He notado que no puedes usar -la clave cuando no uso las comillas. ¿Pero realmente hace la diferencia? En caso afirmativo, ¿cuál?

javascript meo
fuente

Respuestas:

136

No, las comillas no marcan la diferencia (a menos que, como ha señalado, desee utilizar una clave que no sea un identificador de JavaScript válido).

Como nota al margen, el formato de intercambio de datos JSON hace requerir dobles comillas identificadores (y no , no permita que las comillas simples).

bdukes
fuente
88
En realidad, las comillas pueden marcar la diferencia si usa un literal numérico como nombre de propiedad. Por ejemplo, obj = { 12e34: true };no es lo mismo que obj = { '12e34': true };. El primero requeriría que acceda a la propiedad a través obj['1.2e+35'], mientras que para el segundo lo usaría obj['12e34']. Vea mi respuesta para más detalles.
Mathias Bynens
1
Es cierto, pero sería brillante si las comillas dobles fueran opcionales dado un primer carácter + alfanumérico y ¿pueden algunos fanáticos del espacio en blanco también conocidos como espacios invisibles o pestañas? ideal para datos no profundamente anidados.
Jason Sebring el
124

De los nombres de propiedad sin comillas / claves de objeto en JavaScript , mi escrito sobre el tema:

Las comillas solo se pueden omitir si el nombre de la propiedad es un literal numérico o un nombre de identificador válido .

[...]

La notación de corchetes se puede usar de manera segura para todos los nombres de propiedades.

[...]

La notación de puntos solo se puede usar cuando el nombre de la propiedad es un nombre de identificador válido.

Tenga en cuenta que las palabras reservadas pueden usarse como nombres de propiedad sin comillas en ES5. Sin embargo, para la compatibilidad con ES3, sugiero citarlos de todos modos.

También creé una herramienta que le dirá si algún nombre de propiedad puede usarse sin comillas y / o con notación de puntos. Pruébelo en mothereff.in/js-properties .

Captura de pantalla

Mathias Bynens
fuente
Esta herramienta fue un salvavidas. Gracias por publicar esto.
Chris Christensen el
Estaba saliendo de un acantilado, a punto de caer por una pendiente muy empinada, golpeándome hacia una muerte segura, absoluta y sangrienta; pero, por desgracia, hice clic en un enlace en su respuesta, que tenía una herramienta JS muy simple, que me impidió caerme de ese acantilado. Esta herramienta fue un salvavidas.
Andrew
8

No hay diferencia aquí. Solo es cuestión de estilo. Una de las razones para hacer esto es poder usar 'super' o 'clase' como clave, ya que esas son palabras clave reservadas.

Algunas personas podrían verse tentadas a pasar una cadena con espacios en blanco y luego llamar o ['Puedo tener espacios en blanco'] Pero yo llamaría a eso una mala práctica.

Raynos
fuente
3

No, no a javascript. Sin embargo, algunos analizadores JSON fallarán cuando las comillas alrededor de las claves no estén presentes.

01001111
fuente
35
Las claves sin comillas no son válidas en JSON.
Ned Batchelder
1

Hay algunas situaciones en las que son diferentes. Por ejemplo, si está usando jQuery, y está haciendo una lista de parámetros para pasar al llamar al comando jQuery $ () para crear un elemento, las palabras entre comillas se convierten en parámetros y las palabras no entre comillas se convierten en funciones. Por ejemplo, "tamaño" establecerá el atributo de tamaño del objeto, y tamaño (sin comillas), llamará a la función size () en el objeto. Ver jQuery () , cerca de la parte inferior:

Si bien el segundo argumento es conveniente, su flexibilidad puede conducir a consecuencias no deseadas (por ejemplo, $ (" <input>", {size: "4"}) llamando al método .size () en lugar de establecer el atributo de tamaño). Por lo tanto, el bloque de código anterior podría escribirse como:

Spekary
fuente
No creo que ese ejemplo diga lo que tú piensas que dice. El problema que ha citado es porque jQuery tiene un método llamado tamaño, y el conflicto entre el tamaño del método y el tamaño del atributo se resuelve seleccionando el método. Hay casos en jQuery donde pasar un valor como una cadena u otro tipo causa un cambio en el comportamiento, pero nunca al definir una propiedad con un nombre de propiedad válido entre comillas y no entre comillas.
Alex Weitzer