Map vs Array: cuándo usar cada uno

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:15

Map vs Array: cuándo usar cada uno

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 22 de 24

Clase 22 / 24

Recursos

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.

Resumen

¿Por qué buscar en un array es tan costoso?

¿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?

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?

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.

¿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?

Si necesitas recorrer los datos para transformarlos, filtrarlos o analizarlos, tienes que convertirlo primero:

javascript const customerArray = Array.from(customerMap.values());

¿Qué pasa con el orden de los elementos?

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.

¿Cuál de las dos usas más en tus proyectos? Cuéntame en los comentarios qué operaciones dominan en tu caso.

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

Map vs Array: cuándo usar cada uno

Progreso del curso

Grabacion

Recursos

Recursos