Método Javascript filter(): índice, condiciones múltiples, eliminar duplicados, mapa

La función JavaScript filter() es un método esencial que te permite obtener un nuevo array a partir de un array existente, filtrado sólo por los elementos que cumplan ciertas condiciones. En este artículo, te mostraré cómo utilizar la función filter(), incluyendo el parámetro index, el uso de múltiples condiciones y la eliminación de duplicados, Aprenderemos a usar el método includes() y en qué se diferencia de los métodos map() y find().

1. Conceptos básicos de la función `filter()` y parámetro de índice

En JavaScript, el método filter() es un método que extrae sólo los elementos de un array que satisfacen ciertas condiciones y crea un nuevo array.

La sintaxis básica se muestra a continuación.

array.filter(callback(element[, index[, array]])[, thisArg])

El método filter() toma como parámetro una función de devolución de llamada, que se ejecuta para cada elemento de la matriz y devuelve un valor de true o false. En este punto, la función callback devuelve un nuevo array formado sólo por elementos que devuelven un valor de true.

Veamos cómo utilizar esta función con un ejemplo sencillo.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
console.log(evenNumbers); // Output: [2, 4]

En nuestro ejemplo, recibimos la función de flecha number => number % 2 === 0 como función callback. Y cuando la aplicamos, podemos ver que devuelve un nuevo array que contiene sólo 2, 4, que devuelve el valor true.

Al igual que las funciones forEach() y map(), la función callback puede tomar dos parámetros opcionales. En el ejemplo siguiente, estos son el segundo y tercer parámetro, llamados index y array respectivamente, para acceder al índice del elemento actual y al array en sí. Puedes nombrar los parámetros como quieras.

const numbers = [10, 20, 30, 40, 50];
 
numbers.filter((number, index, array) => {
    return index % 2 === 0
});
 
// Output: [10, 30, 50]

La función filter() del ejemplo utiliza el índice del elemento actual como parámetro index y define una condición para que sólo se devuelvan elementos en las posiciones 0, 2 y 4. son devueltos.

2. Uso de condiciones múltiples

Hay dos formas de utilizar condiciones múltiples.

La primera es utilizar el operador relacional && para establecer condiciones múltiples. A continuación, buscaremos dos condiciones: un número que sea múltiplo de 3 y mayor que 5.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(number => number % 3 === 0 && number > 5);
 
console.log(filteredNumbers); // Output: [6, 9]

La segunda es utilizar varias funciones filter en una cadena, como ésta

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(number => number % 3 === 0).filter(number => number > 5);
 
console.log(filteredNumbers); // Output: [6, 9]

3. Eliminar duplicados con filter()

Usar la función filter() es una forma sencilla de eliminar elementos duplicados de un array.

Empecemos con el código de ejemplo.

const array = [1, 2, 3, 2, 4, 3, 5, 1];
 
const uniqueArray = array.filter((element, index, array) => {
  return array.indexOf(element) === index;
});
 
console.log(uniqueArray);
// Output: [1, 2, 3, 4, 5]

La función callback del ejemplo anterior utiliza los parámetros index y array que vimos en la Sección 1 para construir el algoritmo.

El método Array.indexOf(element) devuelve el índice más pequeño de la matriz que coincide con el valor element. (Si no existe, devuelve -1).

Si el elemento actual es el único valor de la matriz, el valor de retorno del método array.indexOf() es igual al valor index del elemento actual. Por el contrario, si el valor de retorno de la función callback es false, significa que hay más de un valor, que será filtrado por la función callback.

4. Definiendo una función callback con includes()

El método String.includes(string) devuelve si el valor string está incluido en la cadena. Usado junto con el método filter(), es una buena forma de seleccionar sólo aquellos elementos de un array de cadenas que contengan una determinada subcadena.

Veamos un ejemplo sencillo.

const materias = ["Inglés básico", "Chino básico", "Japonés intermedio", "Francés intermedio", "Química básica"]
 
const basics = materias.filter(subject => subject.includes("básic"))
 
console.log(basics)
// Salida: [ 'Inglés Básico', 'Chino Básico', 'Química Básica' ]

En el ejemplo anterior, el método includes devuelve un valor de true sólo para las asignaturas que contienen la cadena "básic". Como resultado, de las cinco asignaturas, sólo pudimos filtrar las que contenían la cadena "básic".

Como se puede ver, los dos métodos se pueden utilizar juntos para lograr sinergia en muchos casos.

5. diferencia con map()

La función filter(), junto con forEach(), map(), y reduce(), son métodos de array que pueden usarse con Estos son los métodos de array que puedes utilizar. Cada método tiene su propia funcionalidad, por lo que es importante conocer la diferencia y utilizarlos bien.

Para una explicación más detallada de cada método, consulta sus respectivos posts.

forEach(): Recorre todos los elementos del array y ejecuta la función callback dada.
map(): Aplica la función callback a cada elemento y devuelve un nuevo array con el valor de retorno de la función callback.
reduce(): Aplica una función que combina el valor anterior con el valor actual, sumando los valores del array en un único valor.

La principal diferencia con la función map() es la función callback y el array que devuelve.

La función callback de la función map() devuelve un nuevo elemento, y estos valores forman el nuevo array, por lo que la longitud del array es siempre la misma. La función callback de la función filter() devuelve una referencia que determina qué elementos se incluirán en la nueva matriz. La longitud del nuevo array siempre será menor o igual que la del array antiguo, y los valores de los elementos no cambiarán.

6. diferencia con find()

El método Array.find(condition) busca un elemento en el array que coincida con la condición definida en la función callback condition y devuelve el valor. Si hay varios elementos, devuelve sólo el elemento con el índice más bajo, o undefined si no se encuentra.

La función callback tiene la misma forma que la función filter().

const result = array.find(callback((element, index, array) => {
  // Condition logic
  // Return true or false
}))

Veamos un ejemplo de uso.

const numbers = [1, 2, 3, 4, 5, 6];
 
const firstEvenNumber = numbers.find((number) => {
  return number % 2 === 0;
});
 
console.log(firstEvenNumber);
// Output: 2

Devuelve el valor 2, que es el valor del índice más pequeño que coincide con la condición.

Como puedes ver, el método find() es igual que el método filter() en el sentido de que encuentra un valor que coincide con la condición, pero a diferencia del método filter(), sólo devuelve un valor.

7. Conclusión

Hemos visto cómo la función filter puede utilizarse para filtrar sólo aquellos elementos de un array dado que cumplan una condición. Aunque este método es potente cuando se utiliza solo, hay muchas más posibilidades cuando se utiliza junto con otros métodos de array, Merece la pena explorar formas de utilizarlo junto con otras funciones y métodos.

map()reduce()