Cómo filtrar elementos de un array con filter javascript

El método .filter() de javascript, permite filtrar un arreglo y crear un nuevo arreglo con los elementos que cumplan una condición específica.

Hagamos un ejemplo sencillo en este ejercicio tenemos un array compuesto por diferentes años y necesitamos crear un nuevo arreglo solo con los años que sean menores al 2000.

Copiarjs
const years = [
  1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002,
  2003,
];

const yearsUnder2000 = years.filter(year => year < 2000);

console.log(yearsUnder2000);
/*
[
  1990, 1991, 1992,
  1993, 1994, 1995,
  1996, 1997, 1998,
  1999
]
*/

Cómo filtrar array de objetos con el método filter js

El ejercicio anterior es muy útil, pero para profundizar vamos a realizar un nuevo ejemplo. Tenemos un arreglo compuesto por varios objetos de diferentes usuarios, necesitamos filtrar los elementos para obetener un nuevo arreglo solo con aquellos usuarios que sean mayores a 18 años.

Copiarjs
const users = [
  {
    name: "Karla",
    age: 15,
  },
  {
    name: "María",
    age: 21,
  },
  {
    name: "Pedro",
    age: 33,
  },
  {
    name: "carlos",
    age: 16,
  },
  {
    name: "Karen",
    age: 38,
  },
];

const userGreaterThan18 = users.filter(user => user.age > 18);

console.log(userGreaterThan18);
/*
[
  { name: 'María', age: 21 },
  { name: 'Pedro', age: 33 },
  { name: 'Karen', age: 38 }
]
*/

Como puedes apreciar filtrar los valores de un array en javascript es realmente sencillo con el método .filter() y gracias a las funciones flecha podemos lograr grandes resultados en una sola línea de código.

Buscar elementos en un arreglo usando el método .filter

Imagina que necesitas encontrar en un arreglo muy grande solo las palabras que terminen en una letra específica Lo que vamos a hacer para resolver este problema es crear una función que reciba una letra y un arreglo con dichas palabras, luego usando el método .filter() encontraremos los elementos que cumplan esa condición.

Copiarjs
const arrWords = [
  "hola",
  "estamos",
  "filtrando",
  "valores",
  "en",
  "js",
  "para",
  "mejorar",
  "nuestra",
  "habilidad",
];

function filterForLastLetter(letter, words) {
  return words.filter(word => word[word.length - 1] === letter);
}

console.log(filterForLastLetter("a", arrWords));

// [ 'hola', 'para', 'nuestra' ]

Y con esto damos por terminado este tutorial puedes ver todo el código en el siguiente enlace. Muchas gracias por leerme y espero haberte ayudado.

Bonus filtrar un objeto con doble condición

Este ejercicio lo encontre en el adventjs 2022 de midudev y me parecio interesante agregarlo a este artículo para para entender mejor a filtrar array de objetos javascript, el enunciado es el siguiente:

Copiarjs
// ####### Array de obejtos con lista de ovejas a filtrar ########

const ovejas = [
  { name: "Noa", color: "azul" },
  { name: "Ovejita", color: "azul" },
  { name: "Eugenia", color: "rojo" },
  { name: "Navidad", color: "rojo" },
  { name: "Ki Na Ma", color: "rojo" },
  { name: "Ki N M", color: "rojo" },
];

Copiarjs
function contarOvejas(ovejas) {
  // 1. filtramos solo las ovejas de color rojo
  const ovejasRojas = ovejas.filter(oveja => oveja.color === "rojo");

  // 2. filtar solo las ovejas que contengan las letras n y a en su nombre .
  const ovejasConNyA = ovejasRojas.filter(
    oveja =>
      oveja.name.toLowerCase().includes("n") &&
      oveja.name.toLowerCase().includes("a")
  );

  // aplicamos a cada nombre el método toLower case para transformar todas las letra en minúsculas.
  // gracias al  método .includes encontramos solo los elementos que contengan la letras n y a.

  return ovejasConNyA;

  // Por último retornamos el arreglo con los nuevos valores ya filtrados
}

console.log(contarOvejas(ovejas));

/* 

## Para este ejemplo el resultado sería el siguiente:

[
  { name: "Eugenia", color: "rojo" },
  { name: "Navidad", color: "rojo" },
  { name: "Ki Na Ma", color: "rojo" },
];

*/