Cuando trabajas con listas grandes en JavaScript, elegir entre un array y un map puede marcar la diferencia entre una app fluida y una que se arrastra. Aquí verás cómo funciona cada estructura, cuándo conviene cada una y qué operaciones se vuelven instantáneas al indexar tus datos por identificador.
¿Por qué buscar en un array es tan costoso?
Un array guarda los elementos en posiciones consecutivas, así que cuando le pides un elemento por su ID, no tiene forma de saltar directo hacia él. Recorre uno por uno preguntando: “¿eres tú?, ¿eres tú?”, hasta encontrarlo.
Con tres elementos no notas nada. Con 1000, 2000 o 10 000 registros, cada búsqueda con find se vuelve pesada porque el motor debe descartar casi toda la lista antes de dar con el elemento correcto [3:00].
¿Qué hace lento a un find en arrays grandes? Que recorre elemento por elemento en orden secuencial. Si el ID buscado está en la posición 1900, tiene que descartar 1899 elementos antes de encontrarlo.
¿Cómo se ve la diferencia de rendimiento en la práctica?
Al emular un array de 1000 elementos y compararlo contra un objeto indexado por ID, el contraste es evidente: buscar el elemento 900 con find toma tiempo notable, mientras que acceder al mismo índice en un objeto es instantáneo porque ya está indexado por su llave [4:30].
Esa es la lógica detrás de usar diccionarios: la llave (key) es el ID y el valor (value) es el objeto completo. No hay recorrido, hay acceso directo.
¿Qué es un Map en JavaScript y en qué se diferencia de un objeto?
Un Map es una estructura nativa de JavaScript pensada específicamente para guardar pares llave-valor. Aunque un objeto plano ya te da esa ventaja de indexación, Map viene con métodos diseñados para trabajar con este patrón de manera más segura y expresiva.
En lugar de acceder con corchetes, usas métodos nativos como:
get(id) para obtener un valor por su identificador.set(id, value) para agregar o actualizar un elemento.has(id) para verificar si existe una llave.delete(id) para eliminar un par llave-valor.
El rendimiento entre un objeto indexado y un Map es muy similar, pero Map gana en claridad de intención y en la cantidad de utilidades disponibles [5:45].
¿Cómo actualizas o agregas elementos con Map?
En un array, actualizar implica primero un findIndex para localizar la posición y luego mutar ese índice con spread operator. Son dos pasos y uno de ellos vuelve a recorrer toda la lista.
En un Map, basta con customerMap.set(id, nuevoValor). Y aquí viene lo interesante: set sirve tanto para agregar como para modificar. Si la llave ya existe, actualiza; si no existe, la crea. Nada de push extra, nada de búsquedas previas [7:30].
¿set reemplaza a push en un Map? Sí. Si el ID no existe, set lo crea con el valor indicado. Si ya existe, sobrescribe el valor anterior. Una sola operación cubre ambos casos.
¿Cuándo NO conviene usar Map?
El Map no soluciona todo. Su gran desventaja es que no es un array, así que pierdes acceso directo a métodos como filter, map, reduce o forEach. Justamente porque un Map evita recorridos, no está pensado para iterar.
Si necesitas recorrer los datos para transformarlos, filtrarlos o analizarlos, tienes que convertirlo primero:
javascript
const customerArray = Array.from(customerMap.values());
Una vez convertido, ya puedes aplicar filter, map o reduce con normalidad. La contradicción es clara: Map es eficiente para buscar, agregar y modificar por ID, pero ineficiente para operaciones que requieren recorrer todo el conjunto [9:20].
¿Qué pasa con el orden de los elementos?
Otro punto a tener en cuenta: un Map no guarda posiciones como un array. No existe “el elemento en la posición 2”, solo llaves indexadas. Eso complica funcionalidades como drag and drop, donde necesitas reordenar elementos moviéndolos entre posiciones específicas [11:00].
Si tu interfaz depende de manipular el orden visual de una lista, un array sigue siendo el aliado natural.
¿Cómo eliges entre Map y Array según tu caso de uso?
La decisión depende de qué operaciones domina tu aplicación. Piensa en el patrón real de uso antes de elegir la estructura:
- Muchas búsquedas por ID: usa
Map. El acceso es instantáneo.
- Muchas actualizaciones por ID: usa
Map. Un solo set resuelve todo.
- Muchos recorridos, filtros o análisis: usa
Array. Tienes map, filter y reduce disponibles sin conversiones.
- Necesitas mantener orden o hacer drag and drop: usa
Array. Las posiciones importan.
¿Puedo mezclar ambas estructuras? Sí. Puedes mantener un Map como fuente indexada para búsquedas rápidas y convertirlo a array cuando necesites iterar o renderizar en orden.
Al final, no hay una estructura ganadora universal. Hay una estructura correcta para cada patrón de acceso a datos. Si tu app renderiza y filtra mucho, quédate con arrays. Si tu app consulta y actualiza por ID constantemente, Map te va a dar el rendimiento que un find nunca te dará.
¿Cuál de las dos usas más en tus proyectos? Cuéntame en los comentarios qué operaciones dominan en tu caso.
