Javascript map() método: index, return break continue, async callback

En este artículo, vamos a echar un vistazo más de cerca al método map() en JavaScript. Específicamente, veremos el parámetro index, las palabras clave return, break, y continue, y un ejemplo usando la función async callback async callback.

1. Entender los fundamentos del método map()

El método map() crea un nuevo array con el resultado de aplicar una función a cada elemento del array dado. Esto facilita la conversión o el cálculo de los valores de un array. No modifica ni manipula el array existente, porque trabaja con tipos de datos inmutables, que es la base de la programación funcional.

El método map() es llamado como un método en un array, pasando una función callback como argumento. La función callback se ejecuta para cada elemento del array, y el resultado devuelto se coloca en un nuevo array.

En código, ejecutar la sentencia [1, 2, 3].map(callback) es equivalente a la sentencia [callback(1), callback(2), callback(3)].

Veamos algunos usos básicos.

const newArray = array.map(callbackFunction);

2. Comparación con los métodos forEach(), filter() y reduce()

El método map se utiliza a menudo junto con otros métodos de array, como los métodos filter(), forEach(), y reduce(). Cada método tiene una forma diferente de manejar el array para un propósito específico.

forEach(): Recorre todos los elementos del array y ejecuta la función callback dada.
reduce(): Resume los valores de la matriz en un único valor aplicando una función que combina el valor anterior con el valor actual.
filtro(): Crea un nuevo array, manteniendo sólo los elementos que cumplen la condición especificada.

Ver los artículos correspondientes para más detalles.

3. El método map() y las palabras clave return, break y continue

El método map() basado en programación funcional funciona recorriendo todos los elementos de un array y devolviendo un nuevo array de la misma longitud. Debido a esto, no soporta el uso de las palabras clave break y continue para pausar o reanudar el recorrido.

Sin embargo, si no desea hacer nada con un elemento en particular, puede utilizar la palabra clave return para devolver el valor del elemento actual. Esto es similar a la palabra clave continue.

En el ejemplo siguiente, si el valor del elemento no es 3, la palabra clave return se utiliza para devolver el propio element, de modo que se conserva el valor original del elemento.

const array = [1, 2, 3, 4, 5];
 
const mappedArray = array.map((element) => {
  if (element === 3) {
    return element * 10; // Return transformed value
  }
  return element; // Return original value
});
 
console.log(mappedArray);
 
// Output: [1, 2, 30, 4, 5]

4. Uso de los parámetros index y array dentro de la función callback

La función callback para el método map() proporciona referencias para acceder no sólo al valor actual, sino también a cualquier índice y al propio array. Esto te permite definir una función callback más flexible.

const numbers = [10, 20, 30, 40, 50];
 
numbers.map((number, index, array) => {
    return `Index: ${index}, Number: ${number}, Array: ${array}`
});
 
// Output:
// [
//   'Index: 0, Number: 1, Array: 1,2,3,4,5',
//   'Index: 1, Number: 2, Array: 1,2,3,4,5',
//   'Index: 2, Number: 3, Array: 1,2,3,4,5',
//   'Index: 3, Number: 4, Array: 1,2,3,4,5',
//   'Index: 4, Number: 5, Array: 1,2,3,4,5'
// ]

5. Ejemplos del método map() en acción

5.1. Conversión de un array numérico

El siguiente ejemplo utiliza el método map para crear un nuevo array que contiene el resultado de elevar al cuadrado cada elemento de un array numérico dado.

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
 
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

5.2. Formateo de una matriz de cadenas

Este ejemplo crea un nuevo array convirtiendo cada elemento de un array de cadenas a mayúsculas.

const words = ['hello', 'world', 'javascript'];
const uppercaseWords = words.map(word => word.toUpperCase());
 
console.log(uppercaseWords); // ['HELLO', 'WORLD', 'JAVASCRIPT']

5.3. Asignación de una matriz de objetos

Este ejemplo extrae una propiedad específica de cada elemento de un array de objetos y crea un nuevo array.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
const userNames = users.map(user => user.name);
 
console.log(userNames); // ['Alice', 'Bob', 'Charlie']

5.4. Usando el método map() en un array multidimensional

Este ejemplo utiliza el método Map anidado en un array multidimensional. Observe el método Map anidado en la línea 2.

const matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const squaredMatrix = matrix.map(row => row.map(num => num * num));
 
console.log(squaredMatrix); // [[1, 4, 9], [16, 25, 36], [49, 64, 81]]

6. Llamada de retorno asíncrona: Funciones callback asíncronas

La función callback que pases al método map() también puede definirse como asíncrona. Las funciones asíncronas se utilizan principalmente para evitar interrumpir el comportamiento del hilo principal, como las llamadas a la API, las operaciones de E/S sobre archivos y las operaciones sobre objetos Promise.

Si pasas una función asíncrona como función callback, el valor de retorno del método map() será un objeto Promise. Por lo tanto, debe utilizarse con la palabra clave async await, como se muestra a continuación.

El método fetchUserData() es una función de llamada a la API declarada arbitrariamente y definida como asíncrona. El método map, que utiliza esta función como función de mapeo, gestiona múltiples Promise, y el método all, que gestiona múltiples Promise, puede dar salida a los datos recibidos de la API. datos recibidos de la API.

const fetchUserData = async (id) => {
  // Simulated async operation, fetching user data
  const response = await fetch(`https://api.example.com/users/${id}`);
  return await response.json();
};
 
const userIds = [1, 2, 3];
 
const getUserData = async () => {
  const userData = await Promise.all(userIds.map((id) => fetchUserData(id)));
  console.log(userData);
};
 
getUserData();

7. Errores comunes al utilizar map()

7.1. Evitar que la función callback devuelva un valor

El valor devuelto por la función callback del método map se convierte en un elemento del nuevo array. Si la función callback no devuelve un valor, el elemento correspondiente en el nuevo array se establecerá como undefined. Así que es importante asegurarse de que tiene un valor de retorno al escribir el código.

const numbers = [1, 2, 3, 4, 5];
const wrongResult = numbers.map(num => { num * num });
 
console.log(wrongResult); // [undefined, undefined, undefined, undefined, undefined]

7.2. Tratamiento de elementos vacíos en un array

Si hay un elemento vacío en un array, el método map no ejecutará la función callback para ese elemento. El índice del elemento vacío también se mantiene en el array recién creado y su valor se establece en undefined. Debes entender estas características e implementar el manejo de elementos vacíos explícitamente si es necesario.

const sparseArray = [1, , , 4, 5];
const result = sparseArray.map(num => num * 2);
 
console.log(result); // [2, undefined, undefined, 8, 10]

7.3. No modifiques el array dentro de la función callback del método map

No es una buena práctica modificar el array original dentro de la función callback de un método map(). Hacerlo puede causar un comportamiento inesperado, y también afecta a la legibilidad y mantenibilidad de tu código. En su lugar, es mejor crear un nuevo array cuando sea necesario, y mantener el array original y el nuevo independientes.

6. Reflexiones finales

El método JavaScript map() es la primera herramienta en la que deberías pensar cuando necesites hacer conversiones de arrays en desarrollo web. Es un método que puedes usar todos los días. Si te has hecho una idea del método map() a partir de esta vista previa, consulta la documentación oficial MDN (opens in a new tab) para aprender más.

forEach()filter()