En este artículo aprenderás:

1. El método map()
2. El método forEach()
3. El método filter()

El método map()

map() es un método de iteración nativo de Javascript dentro del prototipo de Arrays que devuelve un arreglo nuevo modificado. Este método toma como argumento una función callback que se encarga de transformar cada uno de los elementos contenidos dentro del arreglo. Normalmente esta función se expresa cómo una función flecha por simplicidad.

En resumen: map() va a iterar sobre cada uno de los elementos contenidos en un arreglo y la función callback se encargará de transformar cada uno de ellos. Al final devolverá un arreglo con los elementos transformados.

La función callback en map(): es una función que toma 3 argumentos de los cuales 2 son opcionales.

1. El elemento actual de la iteración
   
2. El índice del elemento (opcional)
   
3. El arreglo original que está iterando (opcional)
   

La función callback tiene que devolver un valor y ese es el que va a reemplazar al elemento original en el nuevo arreglo.

Ejemplo genérico:

const arreglo = [0, 1, 2, 3, 4, 5];
const arregloTransformado = arreglo.map((elemento, indice, arr) => {
  console.log(elemento); // elemento actual
  console.log(indice); // indice actual
  console.log(arr); // [0, 1, 2, 3, 4, 5]
  return elemento * 2;
});
console.log(arregloTransformado); // [0, 2, 4, 6, 8, 10]

Comparación entre foor loop y el método (caso de uso): Crear un arreglo a partir de otro arreglo en el que elevemos al cuadrado cada uno de los elementos del arreglo original.

El método forEach()

forEach() es otro método de iteración nativo de Javascript dentro del prototipo de Arrays que no devuelve nada. Este método también toma como argumento una función callback que tiene acceso a cada elemento de la iteración, su índice y tambien al arreglo original. forEach() hace lo mismo que un for loop tradicional pero con diferente sintaxis. Una ventaja es que debido a los argumentos que toma la callback por defecto, es menos probable cometer errores a la hora de hacer la iteración. Una desventaja es que dentro de una iteración con forEach() no es posible salir del loop al menos que arrojes un error.

En resumen: forEach() va a iterar sobre cada uno de los elementos contenidos en un arreglo y la función callback tendrá acceso al elemento y el indice actual de cada iteración y tambien al arreglo original.

La función callback en forEach(): tambien es una función que toma los mismos 3 argumentos que map() de los cuales 2 son opcionales.

1. El elemento actual de la iteración
   
2. El índice del elemento (opcional)
   
3. El arreglo original que está iterando (opcional)
   

Ejemplo genérico:

const arreglo = [0, 1, 2, 3, 4, 5];
arreglo.forEach((elemento, indice, arr) => {
  console.log(elemento); // elemento actual
  console.log(indice); // indice actual
  console.log(arr); // [0, 1, 2, 3, 4, 5]
});

Comparación entre foor loop y el método (caso de uso): Simplemente iterar sobre un arreglo

El método filter()

filter() es otro método de iteración nativo de Javascript dentro del prototipo de Arrays que devuelve un arreglo nuevo modificado. Este método también toma como argumento una función callback que se encarga de filtrar cada uno de los elementos contenidos dentro del arreglo contra una condición booleana. Si el elemento actual cumple con la condición determinada entonces formará parte del nuevo arreglo, de lo contrario no será tomado en cuenta.

En resumen: filter() va a iterar sobre cada uno de los elementos contenidos en un arreglo y la función callback se encargará de filtrar a los elementos que cumplan con la condición booleana elegida. Al final devolverá un arreglo con los elementos que hayan cumplido con la condición.

La función callback en filter(): tambien es una función que toma los mismos 3 argumentos que map() de los cuales 2 son opcionales.

1. El elemento actual de la iteración
   
2. El índice del elemento (opcional)
   
3. El arreglo original que está iterando (opcional)
   

Ejemplo genérico:

const numeros = [0, 1, 2, 3, 4, 5];
const numerosPares = numeros.filter((elemento, indice, arr) => {
  console.log(indice); // indice actual
  console.log(arr); // [0, 1, 2, 3, 4, 5]
  return elemento % 2 == 0; // condición para devolver el elemento
});
console.log(numerosPares); // [0, 2, 4]

Comparación entre foor loop y el método (caso de uso): Filtrar a las personas mayores de edad desde un arreglo de personas de todas las edades.