Diferencias entre Array y Map en JavaScript

En el ecosistema de JavaScript, existen múltiples estructuras de datos, cada una diseñada con propósitos específicos en mente. Entre estas estructuras, el Array y el Map destacan como herramientas poderosas y versátiles que, si bien tienen ciertas similitudes, también poseen diferencias fundamentales que determinan sus casos de uso ideales.

El Array es una de las estructuras más antiguas y ampliamente utilizadas en JavaScript. Ofrece una forma ordenada de almacenar y acceder a elementos basados en índices numéricos. Su simplicidad y flexibilidad lo hacen adecuado para una variedad de tareas, desde almacenar listas de elementos hasta servir como base para operaciones más complejas.

Por otro lado, el Map es una adición relativamente más reciente al lenguaje, introducido con ES6. A diferencia de Array, no se diseñó para ser simplemente una lista de elementos, sino una colección de pares clave-valor en la que cada clave es única. Su principal fortaleza radica en proporcionar acceso directo a valores basados en claves, en lugar de índices, y en mantener el orden de inserción de estos pares, características que no se encuentran en los objetos literales tradicionales.

Array

Como lo he mencionado, un Array es una colección ordenada de elementos. Cada elemento tiene un índice, que comienza desde 0 y se incrementa en uno por cada elemento adicional.

Por Ejemplo:

let frutas = ['manzana', 'banana', 'cereza'];
console.log(frutas[0]); // "manzana"

Map

Por otra parte, Map es una colección de pares clave-valor donde cada clave es única. A diferencia de los objetos, las claves pueden ser de cualquier tipo, no solo strings o símbolos.

Por Ejemplo:

let frutas = new Map();
frutas.set('rojo', 'manzana');
frutas.set('amarillo', 'banana');
console.log(frutas.get('rojo')); // "manzana"

¿Un Map acepta cualquier tipo e dato como clave?

A diferencia de los objetos literales que sólo permiten strings y símbolos, Map permite utilizar cualquier tipo de dato, raro cierto? te muestro que cosas pueden ser su clave, por ej.:

const map = new Map();

// Usando un tipo primitivo como clave
map.set(1, 'Número uno');

// Usando un objeto como clave
const objeto = {nombre: 'Jack'};
map.set(objeto, 'Un objeto como clave');

// Usando una función como clave
const funcion = function() { console.log('¡Hola!'); };
map.set(funcion, 'Una función como clave');

console.log(map.get(1));          // 'Número uno'
console.log(map.get(objeto));     // 'Un objeto como clave'
console.log(map.get(funcion));    // 'Una función como clave'

¿Cuándo usar Array o Map?

1. Uso basado en índices vs. claves: Si necesitas una colección basada en índices, el Array es tu mejor opción. Pero si prefieres trabajar con claves únicas para recuperar valores, el Map es más adecuado.

2. Orden de inserción: Los Arrays mantienen un orden basado en índices, mientras que los Maps conservan el orden de inserción de los elementos, lo que puede ser útil en ciertos escenarios.

Esto significa que cuando iteras sobre los elementos de un Map, los elementos se devuelven en el orden en que se agregaron. Esto puede ser útil en escenarios donde el orden de los elementos es crucial.

let orden = new Map();
orden.set('primero', 'pan');
orden.set('segundo', 'carne');
orden.set('tercero', 'lechuga');

for (let [clave, valor] of orden) {
    console.log(clave, valor);
}
// Salida:
// primero pan
// segundo carne
// tercero lechuga

3. Operaciones frecuentes: Si realizas operaciones de inserción y eliminación en el medio de la colección con frecuencia, un Map puede ser más eficiente debido a su naturaleza de acceso directo.

Y ojo con el punto de índices vs claves, porque los arreglos aunque permiten nombres en sus claves, no es recomendado por las siguientes razones:

Claridad y legibilidad: Usar un array como si fuera un objeto regular puede ser confuso para otros desarrolladores que lean el código. Los arrays generalmente se entienden como colecciones ordenadas, y la adición de propiedades con claves no numéricas rompe esa expectativa.

Métodos de Array: Los métodos estándar de array (como forEach, map, filter, etc.) operan únicamente sobre los elementos numéricos del array, ignorando las propiedades adicionales. Esto puede llevar a resultados inesperados.

   let arr = ['manzana', 'banana'];
   arr['color'] = 'rojo';
   arr.forEach(item => console.log(item)); // Solo imprimirá 'manzana' y 'banana' + un valor undefined que sería el color rojo

Propiedad length: La propiedad length de un array solo refleja el número de elementos numéricos y no tiene en cuenta las propiedades adicionales. Esto puede ser fuente de errores si se espera que length refleje todas las propiedades.

Optimización de rendimiento: Los motores de JavaScript están optimizados para tratar los arrays como colecciones ordenadas de elementos. Si comienzas a añadir propiedades no numéricas, es posible que el motor no pueda optimizar el array de la misma manera, lo que podría afectar el rendimiento, aunque esto solo es en la teoría porque sabemos que Javascript es tan versátil que seguramente podría manejarlo sin problemas, quizás debería intentarlo :)

Semántica: Si la necesidad es tener una colección de pares clave-valor, las estructuras como objetos o Map son más semánticamente apropiadas. Los arrays deberían reservarse para listas ordenadas donde el orden y el acceso por índice son cruciales.

Ventajas y desventajas de cada método

Array

• Ventajas: Es simple y directo. Posee una amplia variedad de métodos integrados (como push, pop, slice, map, reduce, find, etc.). Excelente soporte en todos los navegadores.

• Desventajas: No es eficiente para operaciones de inserción y eliminación en el medio de la lista. No es ideal para búsquedas de clave-valor a menos que se utilice un índice.

Map

• Ventajas: Acceso directo a través de claves. Mantiene el orden de inserción. Permite claves de cualquier tipo.

• Desventajas: Sintaxis ligeramente más compleja en comparación con los Arrays. Menos soporte en navegadores antiguos.

Consideraciones técnicas

1. Velocidad de procesamiento: Ambos son eficientes para sus respectivos casos de uso. Sin embargo, para operaciones intensivas en el medio de la estructura, Map tiende a superar a Array debido a su naturaleza de acceso directo, pero el procesamiento sería imperceptible, además considerando que javascript no se usa generalmente para tareas que involucran procesamiento pesado de datos.

2. Consumo de memoria: Generalmente, la diferencia en el consumo de memoria no es significativa para la mayoría de las aplicaciones. Sin embargo, un Map podría consumir más memoria debido a la necesidad de almacenar claves únicas.

3. Facilidad de uso: Los Arrays son más simples y directos, especialmente para aquellos familiarizados con JavaScript. Map, aunque poderoso, requiere un poco más de adaptación.

Diferencia entre Map y Objetos Literales

Hasta este punto, parece que hemos establecido las diferencias entre Array vs Map y sabemos como se usan y quizás es claro en que casos utilizar uno u otro, pero quizás te podrías estar preguntando que un Map es bastante similar a un Objeto, y tienes razón, ambos pueden usarse para almacenar pares clave-valor, pero tienen algunas diferencias como por ej:

1. Claves: Los objetos literales tienen claves que son strings o símbolos. Maps aceptan cualquier tipo de dato como clave, incluyendo objetos, funciones, y tipos primitivos.

2. Orden: Como mencionamos, Map mantiene el orden de inserción, mientras que los objetos no garantizan un orden específico.

3. Funcionalidad: Map tiene métodos como set, get, has, delete, etc. Los objetos no tienen estos métodos incorporados y requieren un enfoque más manual.

Comparación entre Array y Map para Operaciones Específicas

1. push

   • Array:

     let frutas = ['manzana', 'banana'];
     frutas.push('cereza');

   • Map (No tiene equivalente directo. Se usa set para agregar):

     let frutasMap = new Map();
     frutasMap.set('tercera', 'cereza');

2. pop

   • Array:

     frutas.pop();

   • Map (No hay un método directo. Se debe conocer la última clave):

     let lastKey = [...frutasMap.keys()].pop();
     frutasMap.delete(lastKey);

3. find

   • Array:

     frutas.find(fruta => fruta === 'banana');

   • Map (No hay un método directo. Se debe iterar para encontrar):

     [...frutasMap].find(([, valor]) => valor === 'banana');

4. reduce

   • Array:

     let numeros = [1, 2, 3];
     numeros.reduce((acc, num) => acc + num, 0);

   • Map (Se puede utilizar de forma similar pero requiere adaptación):

     let sumMap = new Map([['a', 1], ['b', 2], ['c', 3]]);
     [...sumMap.values()].reduce((acc, num) => acc + num, 0);

5. map

   • Array:

     numeros.map(num => num * 2);

   • Map (Requiere un enfoque diferente):

     let doubled = new Map([...sumMap].map(([clave, valor]) => [clave, valor * 2]));

Es importante entender que Map no fue diseñado como una alternativa directa a Array, sino como una estructura de datos con características y ventajas únicas. Por eso, algunas operaciones requieren enfoques adaptados o diferentes y por esta razón es esencial entender las diferencias inherentes entre estas estructuras, en lugar de verlas como alternativas directas entre sí.

Soporte en navegadores y disponibilidad

Los Arrays han estado disponibles desde las primeras versiones de JavaScript. Los Maps, por otro lado, se introdujeron en ES6 (ECMAScript 2015), por lo que tienen soporte limitado en navegadores más antiguos, pero diría que actualmente Map esta soportado por el 99% de los navegadores en sus diferentes plataformas.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Conclusión

Tanto los Arrays como los Maps son herramientas poderosas en JavaScript. La elección entre uno u otro dependerá de las necesidades específicas de tu proyecto. Si bien los Arrays son una opción versátil y ampliamente soportada, los Maps ofrecen capacidades únicas que pueden ser esenciales en ciertos escenarios. Como siempre, es fundamental entender bien cada herramienta para aprovechar al máximo sus capacidades.

Y como siempre, espero que este artículo haya ayudado a entender las diferencias entre estos poderosos y bastante comunes métodos en Javascript.

Happy coding! :D

Photo by Fausto García-Menéndez on Unsplash