3

Últimamente estuve hilando fino en un proyecto sobre tiempos de respuestas, y me surgió la duda de saber cual es la forma mas rápida de acceder a los atributos de un Objeto en javascript, de momento solo conosco 2:

Definido un objeto simple:

let obj = { nombre: 'juan pirulo' };

Hay 2 formas de acceder a un atributo del mismo ya sea para leer o modificar:

obj.nombre

ó

obj['nombre']

La duda es cual de estas 2 formas es la mas rápida en grandes números de llamadas o la diferencia es despreciable.

1
  • La diferencia es practicamente nada como te respondieron, solo lo complemento con el siguiente artículo Efficient JS ahí mensiona lo siguiente: "For most browsers, there is virtually no difference between using dot notation for object property access (data.count) and bracket notation (data["count"]). The one exception is Safari, where bracket notation is significantly slower than dot notation. This holds true even for Safari 4 and later using the Nitro JavaScript engine"
    – Lato
    Commented el 10 ago. 2017 a las 18:06

2 respuestas 2

3

Las dos sintaxis tienen exactamente igual rendimiento pues a nivel de ejecución son idénticas: Acceden al miembro del objeto correspondiente.

En JavaScript no existen miembros estáticos, todos los miembros de un objeto son dimámicos, por lo que en ambos casos se trata de acceder al miembro correspondiente dentro del conjunto de propiedades del objeto.

La diferencia real es que la sintaxis de corchetes permite usar cualquier string como key mientras que la notación de . solo permite identificadores válidos

Ejemplo:

let o = {};
o["hola mundo"] = 1;  // Esto no es posible con la notación de .

Como recomendación te diría que siempre uses la notación . mientras sea posible, y deja la notación de corchetes para cuando el nombre del miembro a acceder sea conocido en tiempo de ejecución (sea dinámico)

Ejemplo

let nombre = o.nombre;
let valor = o[nombreDeLaPropiedad]; // donde nombreDeLaPropiedad es un variable de tipo string
1
  • Coincido bastante. Sin embargo, no dejaría de lado que la notación de corchetes a parte de los strings, también permite usar los símbolos. let simbolo = Symbol(); obj[simbolo] = 'existo'; y luego obj[simbolo]; // "existo".
    – Francute
    Commented el 10 ago. 2017 a las 14:57
1

Haz la prueba:

// Común
let obj = { nombre: 'juan pirulo' };
let a;
let b;
let cantidadDeIteraciones = 1000000000;

// Pruebas
console.time("Tiempo como propiedad");
for (let i = 0; i < cantidadDeIteraciones; i++) { 
  a = obj.nombre; 
}
console.timeEnd("Tiempo como propiedad");

console.time("Tiempo como Array");
for (let j = 0; j < cantidadDeIteraciones; j++) { 
  b = obj['nombre']; 
}
console.timeEnd("Tiempo como Array");

Notarás que la diferencia de tiempo varía y que es bastante sutil. A veces uno es más rápido que el otro y viceversa.

Si armas bloques de 10 iteraciones por cada uno; notarás que el resultado es el mismo:

for (var q = 0; q < 10; q++) {
console.time("Tiempo como propiedad");
    for (let i = 0; i < cantidadDeIteraciones; i++) { 
      a = obj.nombre; 
    }
    console.timeEnd("Tiempo como propiedad");
}

for (var w = 0; w < 10; w++) {
console.time("Tiempo como Array");
    for (let j = 0; j < cantidadDeIteraciones; j++) { 
      b = obj['nombre']; 
    }
    console.timeEnd("Tiempo como Array");
}

Notarás que para cada caso, los 2 primeros intentos son considerablemente más lentos. Luego, los demás valores se mantienen relativamente constantes (Ya se encuentran en caché). Si consideras los valores constantes para ambos casos, el resultado será el mismo. A veces uno es más rápido que el otro y a veces no.


Mi consejo, no prestes atención al rendimiento para este tipo de casos. Las 2 formas son bastante rápidas como para afectar al rendimiento de alguna forma notoria.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.