Teoría: Visualización (map)

Considera la siguiente tarea. Vamos a tomar una lista de usuarios y extraer los nombres de todos los usuarios de ella:

const users = [
  { name: 'Sergio', age: 19 },
  { name: 'José', age: 1 },
  { name: 'Ana', age: 4 },
  { name: 'Miguel', age: 16 },

];

const result = [];
for (const user of users) {
  result.push(user.name);
}

console.log(result); // => ['Sergio', 'José', 'Ana', 'Miguel']

Aquí vemos una agregación típica usando un bucle for...of. Pero ¿qué pasa si necesitamos extraer la edad? Repitamos el proceso:

const result = [];
// Agregamos desestructuración
for (const { age } of users) {
  result.push(age);
}

console.log(result); // => [19, 1, 4, 16]

En los ejemplos anteriores, podemos ver fácilmente el patrón. Se ejecuta el mismo bucle, y el resultado se recopila en el array result. Lo único que cambia es el valor que extraemos del array original.

La operación que realizamos en ambas situaciones se llama mapeo (mapping). En el código, tomamos el array original y lo mapeamos a otro array, mientras realizamos las transformaciones necesarias en cada elemento. Es importante destacar que el array resultante tiene el mismo tamaño que el array original.

Mapear datos es una tarea común en el código real. Es una operación tan importante que se ha creado una función especial de orden superior llamada map() para ello:

const names = users.map((user) => user.name);
console.log(names); // => ['Sergio', 'José', 'Ana', 'Miguel']


const ages = users.map((user) => user.age);
console.log(ages); // => [19, 1, 4, 16]

// Or the same thing
const callback = (user) => user.age;
console.log(users.map(callback)); // => [19, 1, 4, 16]

El método map() recibe una función como su primer parámetro. Dentro del método, map() itera sobre los elementos de la colección pasada y llama a la función proporcionada para cada elemento. La función recibe el elemento del array original como entrada, y su resultado se agrega a un nuevo array, que luego se devuelve.

Compara la solución de obtener una lista de nombres usando un bucle y usando el método map(). Este último tiene varias ventajas. En primer lugar, el código es mucho más corto. En segundo lugar, la lógica repetitiva de la iteración se nos oculta. Ya no necesitamos definir explícitamente un bucle y realizar manualmente todas las operaciones que se pueden evitar. El método map() nos permite centrarnos en la esencia de la operación, ocultando detalles innecesarios (iteración de bucle).

Un ejemplo típico mencionado a menudo en la documentación de la función map() en varios lenguajes de programación es aplicar alguna operación aritmética a cada elemento de una colección:

const numbers = [5, 2, 3];

const newNumbers = numbers.map((number) => number ** 2);
console.log(newNumbers); // => [25, 4, 9]

const newNumbers2 = numbers.map((number) => number + 3);
console.log(newNumbers2); // => [8, 5, 6]

El ejemplo puede parecer artificial, pero ilustra efectivamente la esencia de la operación.

Implementation

Escribamos nuestra propia función myMap() que funcione de manera similar al método map() de un array:

const myMap = (collection, callback) => {
  const result = [];
  for (const item of collection) {
    // Llamar al callback proporcionado en cada elemento de la colección
    const newItem = callback(item);
    // Agregar el valor devuelto por el callback al array resultante
    result.push(newItem);
  }

  return result;
};

const numbers = [5, 2, 3];
const newNumbers = myMap(numbers, (number) => number ** 2);
console.log(newNumbers); // => [25, 4, 9]

La diferencia principal entre el código de la función myMap() (y el método map()y la travesía manual del array es que la función myMap() no sabe qué hacer con cada elemento del array. Por lo tanto, toma una función de retorno de llamada como segundo argumento, que llama para cada elemento del array original, y el resultado de la función de retorno de llamada se agrega al array de salida. La función myMap() no sabe cuál será este resultado, y no necesita saberlo. La responsabilidad del procesamiento recae en los usuarios.