Métodos de un Arreglo en Javascript: Filter, ForEach, Map y Find

En Javascript existen muchos métodos para arreglos muy importantes al momento de desarrollar lógica en alguna de nuestras aplicaciones, a continuación explico de forma breve el uso de Filter, ForEach, Map y Find.

Estos métodos poseen en común que reciben una función callback que permite 3 atributos, los cuales son elemento, indice y arreglo. Por lo general utilizamos el atributo elemento pero es bueno que conozcamos que podemos utilizar los otros atributos para algunas funciones mas específicas.

Filter

El método Filter crea un nuevo arreglo, el cual no busca modificar el valor de los elementos para el nuevo arreglo, únicamente retorna aquellos elementos que cumplan con las condiciones del filtro, los cuales serán almacenados en otro arreglo.

const array = [
  { id: 1, username: "Mapper"},
  { id: 2, username: "Finder"},
  { id: 3, username: "Eaching"}
];

const filtered = array.filter(function(element){
  return element.id > 2;
});

//Output: [{ id: "3", username: "Eaching"}]

Map

El método Map tambien se encarga de crear un nuevo arreglo al igual que el metodo Filter. Cada elemento es multiplicado por 1000 y a su vez se almacenan en un nuevo arreglo llamado miles.

constarray = [1, 2, 3, 4];

const miles = array.map(function(element){
  return element * 1000;
});

//Output: [1000, 2000, 3000, 4000]

Find

Con la ayuda del método Find podemos encontrar el primer valor que cumpla con función que definimos, en el siguiente ejemplo podemos observar que el arreglo posee 5 elementos numéricos, posteriormente en la variable myVal ejecutamos el método find y retornamos el elemento que sea mayor a 100 obteniendo como resultado el primer valor del arreglo que cumple con la condicion.

constarray = [14, 123, 50, 20, 312];

const myVal = array.find(function(element){
  return element > 100;
});

//Output: 123

ForEach

El método ForEach únicamente ejecuta la función callback que definimos, en el siguiente ejemplo únicamente muestra como salida cada elemento del arreglo. Cabe destacar, que no retorna ningún valor ni tampoco un arreglo como los métodos anteriores.

constarray = [10, 20, 30, 40, 50];

array.forEach(function(element){
  console.log(element);
});

//Output: 10, 20, 30, 40, 50

Podemos observar que estos métodos son bastante simples y similares, solo necesitamos conocer el caso de uso para aplicar el más adecuado.