Alguien me preguntó recientemente, ¿las propiedades de los objetos JavaScript son necesariamente desordenadas e impredecibles?

Los desarrolladores con exposición temprana a JavaScript podrían responder que Object.keys() o for...in devuelve un orden impredecible de propiedades de objetos. ¿Pero sigue siendo así?

Como es de esperar, ahora hay reglas a seguir.

A partir de ECMAScript 2020, Object.keys, for...in, Object.getOwnPropertyNames y Reflect.ownKeys siguen el mismo orden de especificación. Ellos son:

1. Las propiedades propias son índices de matriz, en orden de índice numérico ascendente

Un índice de matriz es una clave de propiedad con valor de cadena que es una cadena numérica canónica. Y una cadena numérica canónica es una representación de cadena de un número que sería producido por ToString, o la cadena "-0". Entonces, por ejemplo, "012" es no una cadena numérica canónica, pero "12" sí lo es.

2. Otras propiedades String propias, en orden cronológico ascendente de creación de propiedades

El código anterior agrega el punto de conocimiento del bucle de eventos. Debido a que setTimeout es una tarea macro asincrónica, la propiedad c no se agregó a obj cuando se genera console.log.

3. Propiedades del símbolo propio, en orden cronológico ascendente de creación de la propiedad.

La propiedad Símbolo es la misma que la propiedad Cadena, en orden cronológico ascendente de creación de la propiedad. Pero los métodos Object.keys, for...in, Object.getOwnPropertyNames no pueden obtener las propiedades de símbolo del objeto, Reflect.ownKeys y Object.getOwnPropertySymbols sí pueden.

Conclusión

Cuando las claves de propiedad de un objeto son una combinación de los tipos anteriores, las claves enteras no negativas del objeto (enumerables y no enumerables) primero se agregan a la matriz en orden ascendente, luego las claves de cadena se agregan en orden de inserción. Finalmente, las claves de símbolos se agregan en orden de inserción.

Pero si dependes en gran medida del orden de inserción, Map te lo garantiza.

Si esto te resultó útil, considera suscribirte a mi boletín informativo para obtener más artículos y herramientas útiles sobre desarrollo web. ¡Gracias por leer!