8 Métodos de Array de JavaScript que Debes Conocer

1. Método filter()

El método filter permite crear un nuevo array que incluya elementos que pasen una determinada condición.

Supongamos que tenemos un array de empleados y queremos obtener todos los empleados cuya edad sea menor o igual a 30 años. Así es como podemos hacerlo:

const empleados = [
    { nombre: "Carl", edad: 35 },
    { nombre: "John", edad: 27 },
    { nombre: "Sara", edad: 25 },
    { nombre: "Diana", edad: 31 },
    { nombre: "Peter", edad: 32 },
    { nombre: "Charles", edad: 26 },
];

const filtroEmpleados = empleados.filter(empleado => empleado.edad <= 30);
console.log(filtroEmpleados);

Este método filter emplea una función con un parámetro denominado «empleado», que representa cada elemento dentro del array. Esta función debe devolver un valor booleano basado en una comprobación condicional, dictando si el elemento se incluirá en la nueva matriz. La lógica para este caso se realiza mediante la condición «empleado.edad <= 30«, lo que significa que todos los empleados con un valor de edad igual o inferior a 30 se incluirán en la nueva matriz filtroEmpleados.

La simplicidad y facilidad de uso del método filter lo convierten en una herramienta esencial en la programación JavaScript. Funciona devolviendo ‘true’ o ‘false’ para cada elemento; los elementos que devuelven ‘true’ encuentran un lugar en la nueva matriz, mientras que los que devuelven ‘false’ no.

El método filterr no altera el array original. Si usamos console.log con el array empleados original, verás que permanece intacto, mientras que filtroEmpleados incluye sólo aquellos elementos que cumplen nuestra condición especificada.

2. Método map()

El método map crea una nueva matriz aplicando una función a todos los elementos de la matriz original.

Digamos que queremos crear un nuevo array que contenga sólo los nombres de nuestros empleados:

const empleados = [
    { nombre: "Carl", edad: 35 },
    { nombre: "John", edad: 27 },
    { nombre: "Sara", edad: 25 },
    { nombre: "Diana", edad: 31 },
    { nombre: "Peter", edad: 32 },
    { nombre: "Charles", edad: 26 },
];

const nombresEmpleados = empleados.map(empleado => empleado.nombre);
console.log(nombresEmpleados);

Aquí, tenemos un parámetro llamado «empleado». Para cada elemento de la matriz «empleados», devolvemos la propiedad nombre de cada empleado.

Si quisiéramos las edades en lugar de los nombres, simplemente sustituiríamos empleado.nombre por empleado.edad.

El método map es una herramienta increíblemente útil, sobre todo cuando necesitas extraer un atributo específico, como nombres, de un objeto o transformar un array en otro. A medida que profundices en la programación, a menudo te encontrarás optando por el método map en lugar de técnicas alternativas debido a su eficiencia y simplicidad.

3. Método find()

El método find devuelve el primer elemento de una matriz que satisface una determinada condición. Esta condición se formula típicamente como una declaración verdadera o falsa

Supongamos que queremos encontrar a un empleado llamado ‘John’:

const empleados = [
    { nombre: "Carl", edad: 35 },
    { nombre: "John", edad: 27 },
    { nombre: "Sara", edad: 25 },
    { nombre: "Diana", edad: 31 },
    { nombre: "Peter", edad: 32 },
    { nombre: "Charles", edad: 26 },
];

const empleadoEncontrado = empleados.find(empleado => empleado.nombre === 'John');
console.log(empleadoEncontrado); //logs { nombre: "John", edad: 27 }

Como queríamos obtener un empleado llamado ‘John’ del array empleados , utilizamos la condición empleado.nombre == ‘John'. Al ejecutarse, el método devolverá el elemento de la matriz que contenga la propiedad nombre: "Juan".

El mismo procedimiento puede aplicarse a cualquier atributo. Si sustituimos «John» por «Sara», obtendremos el primer elemento llamado «Sara» de la matriz. Hay que tener en cuenta que el método find sólo devolverá el primer elemento que cumpla la condición dada.

4. Método forEach()

El método forEach ejecuta una función proporcionada una vez por cada elemento del array. A diferencia de los métodos anteriores, no devuelve nada más.

Si queremos imprimir el nombre de cada elemento de un array, haríamos lo siguiente:

const empleados = [
    { nombre: "Carl", edad: 35 },
    { nombre: "John", edad: 27 },
    { nombre: "Sara", edad: 25 },
];

empleados.forEach(empleado => console.log(empleado.nombre));

Vamos a imprimir en la consola el nombre de cada empleado de la matriz. La función se ejecutará para cada elemento del array, resultando en la impresión de los nombres de todos los empleados. Podríamos imprimir otros atributos, o ejecutar cualquier operación requerida para cada elemento del array.

El método forEach funciona de forma muy parecida a un bucle for tradicional, pero con un cambio funcional. Acepta una función como argumento, que se ejecuta para cada elemento de la matriz.

La belleza del método forEach reside en su simplicidad y elegancia a la hora de trabajar con arrays. Elimina la necesidad de escribir la tradicionalmente larga sintaxis de un bucle for. Esto lo convierte en la opción preferida para escenarios en los que se necesita hacer un bucle y realizar operaciones sobre cada elemento de un array.

5. Método some()

El método some comprueba si al menos un elemento de una matriz cumple una determinada condición, y devuelve verdadero en caso afirmativo. Se desvía un poco de los otros métodos que hemos discutido anteriormente, ya que no produce una nueva matriz, sino que devuelve un valor booleano basado en una condición especificada.

Para comprobar si hay empleados con una edad igual o inferior a 27 años:

const empleados = [
    { nombre: "Carl", edad: 35 },
    { nombre: "John", edad: 27 },
    { nombre: "Sara", edad: 25 },
    { nombre: "Diana", edad: 31 },
    { nombre: "Peter", edad: 32 },
    { nombre: "Charles", edad: 26 },
];

let hayEmpleadosJovenes = empleados.some(emmpleado => emmpleado.edad <= 27);
console.log(hayEmpleadosJovenes); //devuelve true

En nuestro ejemplo, al registrar en la consola ‘hayEmpleadosJovenes‘, veremos que devuelve ‘true’, ya que la matriz contiene empleados con edades inferiores a 27 años. Sin embargo, si modificamos nuestra condición a «empleado.edad <= 20«, la función devolvería «false».

La sintaxis de la función some es similar a la de otros métodos de matrices, pero su función es evaluar la condición proporcionada para cada elemento de la matriz. Si al menos un elemento cumple la condición, la función some devolverá «true» para toda la matriz.

Este potente método permite comprobar rápidamente si alguno de los elementos de una matriz cumple una condición específica.

6. Método every()

El método every comprueba si todos los elementos de una matriz cumplen una determinada condición, y devuelve verdadero en caso afirmativo.

Comprobar si todos los empleados tienen una propiedad de edad inferior a 40 años:

const empleados = [
    { nombre: "Carl", edad: 35 },
    { nombre: "John", edad: 27 },
    { nombre: "Sara", edad: 25 },
    { nombre: "Diana", edad: 31 },
    { nombre: "Peter", edad: 32 },
    { nombre: "Charles", edad: 26 },
];

const todosJovenes = empleados.every(empleado => empleado.edad <= 40);
console.log(todosJovenes); //resulta true

Utilizando la función every para comprobar si todos los empleados de la matriz son menores de 40 años, devolverá ‘true’ sólo si todos los empleados cumplen este criterio. Sin embargo, si hay empleados mayores de 40 años, la función devolverá ‘false’.

Este método se parece al método some, con una diferencia clave en su funcionamiento. Mientras que el método some comprueba si al menos un elemento de la matriz cumple la condición, el método every verifica que todos los elementos de la matriz cumplan la condición especificada.

Este método es especialmente útil cuando necesitamos verificar que cada elemento de una matriz cumple una determinada condición.

7. Método reduce()

El método reduce() se utiliza para ejecutar una función determinada en cada elemento de una matriz y reducir la matriz a un único valor.

El método reduce utiliza una sintaxis diferente. En lugar de recibir sólo un elemento, acepta un elemento y una propiedad que representa el resultado acumulado. Llamémosle totalActual, que representa el total en cada iteración. También acepta un segundo argumento, que sirve como punto inicial. En este caso, queremos empezar desde cero.

Hallar la suma de las edades de todos los empleados:

const empleados = [
    { nombre: "Carl", edad: 35 },
    { nombre: "John", edad: 27 },
    { nombre: "Sara", edad: 25 },
    { nombre: "Diana", edad: 31 },
    { nombre: "Peter", edad: 32 },
    { nombre: "Charles", edad: 26 },
];

const edadTotal = empleados.reduce((totalActual, empleado) => {totalActual + empleado.edad}, 0);
console.log(edadTotal); // logs 176

La función totalActual + empleado.edad devuelve la suma del total actual y la edad del empleado. Para cada elemento de la matriz, se ejecuta la función reduce, que toma el total acumulado de la iteración anterior como totalActual.

En la primera iteración, el totalActual comienza en cero (nuestro segundo argumento). Así, por ejemplo, cuando se encuentra con el primer empleado, ‘Carl’, suma la edad de ‘Carl’ a cero, devolviendo 35. En la segunda iteración, el ‘total actual’ es 35, y el nuevo empleado es ‘John’ (con una edad de 27). La función ahora suma 27 a 35, haciendo que el ‘totalActual‘ sea 62.

Este proceso continúa para todos los empleados, añadiendo cada edad a la variable ‘totalActual‘, hasta llegar al último empleado. La edad total de todos los empleados se almacena entonces en nuestra variable edadTotal, que puede utilizarse posteriormente.

Aunque «reducir» puede parecer confuso al principio, es increíblemente útil cuando necesitas realizar operaciones acumulativas en una matriz, como calcular un total.

8. Método includes()

El método includes comprueba si una matriz incluye un determinado valor, devolviendo verdadero o falso. Este método es único, ya que no toma una función como argumento. En su lugar, acepta un único valor.

Para comprobar si una matriz incluye el número 3:

const numeros = [1, 2, 3, 4, 5];
const incluyeTres = numeros.includes(3);
console.log(incluyeTres); //resulta true

Aquí, estamos comprobando si esta matriz incluye el número 3, por lo que estamos utilizando el método includes, especificando 3 como argumento.

Al hacer esto, includes verificará si el valor proporcionado (en nuestro caso, el número 3) existe dentro de la matriz. En consecuencia, devolverá ‘true‘ ya que nuestra matriz incluye el número 3. Sin embargo, si cambiáramos el argumento por un número no presente en la matriz, como el 7, el método devolvería false, lo que significaría que la matriz no incluye el 7.

El método ‘includes‘ es muy beneficioso cuando se necesita determinar si un array contiene un valor específico, particularmente cuando se trata de arrays simples como uno formado por números. Evita la necesidad de realizar una compleja operación find y simplifica la tarea.