¡No utilices for! Métodos de Arrays en JavaScript

Cuando empezamos a aprender un lenguaje de programación, una de las primeras cosas que nos enseñan es a recorrer bucles. Cada repetición de un bucle se denomina iteración. En JavaScript, hay diferentes formas de recorrer los bucles, y podriamos hacerlo todo con bucles for… pero suele haber formas más elegantes en función de la necesidad.

No es que utilizar for sea malo (¿alguien dice clickbait? 😂), pero sí que es cierto que no facilita la lectura. Todavía más si anidamos varios bucles, con los índices i, j, k etc. Por otro lado, javascript tiene funciones específicas que cubren gran parte de las necesidades. Además, por norma general, deberíamos evitar hacer microoptimizaciones, tanto en bucles como en general. Solo en casos muy concretos vale la pena.

// Típico bucle for
const listado = [1, 2, 3, 4, 5];
for (let i = 0; i < listado.length; i++) {
  const valor = listado[i];
  console.log(valor);
}

En este artículo vamos a repasar los métodos que considero más importantes de Array.

forEach

El sustituto directo de for es forEach. El ejemplo anterior hecho con forEach quedaría así:

const listado = [1, 2, 3, 4, 5];
listado.forEach((valor) => {
  console.log(valor);
});

map

El método map permite recorre todos los elementos de un Array y te permite transformarlos. Devolverá un Array nuevo con cada elemento transformado. Por ejemplo:

const listado = [1, 2, 3, 4, 5];

// Lo que con for hacemos así
for (let i = 0; i < listado.length; i++) {
  listado[i] *= 2;
}

// Con map lo haríamos así. Además, no modificaremos el array original
const listadoX2 = listado.map((valor) => valor * 2); // [2, 4, 6, 8, 10]

filter

Con filter, como su propio nombre indica, podemos filtrar un Array en función de las condiciones que especifiquemos. Devuelve un array nuevo con los valores que cumplan la condición.

const listado = [1, 2, 3, 4, 5];
const pares = listado.filter((valor) => valor % 2 === 0); // [2, 4]
const impares = listado.filter((valor) => valor % 2 !== 0); // [1, 3, 5]

find

Si queremos encontrar el primer elemento que cumpla una condición, podemos utilizar el método find:

const listado = [1, 2, 3, 4, 5];
const elemento = listado.find((valor) => valor >= 3); // 3

reduce

Con reduce puedes transformar todos los elementos de un array a cualquier resultado. Recorre todos los elementos ejecutando una función reductora que devuelve el resultado acumulado hasta esa iteración. Como resultado final, devuelve el resultado acumulado habiendo pasado por todos los elementos:

const listado = [1, 2, 3, 4, 5];
const suma = listado.reduce((acc, valor) => acc + valor, 0); // 15

Otro ejemplo utilizando reduce. Esta vez, contaremos cuantas veces aparece cada valor y lo devolveremos en un objeto de clave/valor:

const listado = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
const contadores = listado.reduce((acc, valor) => {
  acc[valor] = !acc[valor] ? 1 : acc[valor] + 1;
  return acc;
}, {}); // { 1:2, 2:2, 3:2, 4:2, 5:2}

every

Si quieres comprobar que todos los elementos de un Array cumplen una condición, every es tu método. Devuelve un booleano indicando si todos los elementos cumplen o no. Lo más importante de este método es que en el momento que un elemento no cumple la condición, deja de iterar el Array.

const listado = [1, 2, 3, 4, 5];
const inferior10 = listado.every((valor) => valor < 10); // true, recorre los 5 elementos
const inferior3 = listado.every((valor) => valor < 3); // false, recorre solo 3 elementos

// Con for, suele ser típico algo así (o su variante con break)
let inferior10 = true;
for (let i = 0; inferior10 && i < listado.length; i++) {
  inferior10 = listado[i] < 10;
}

some

Parecido a every pero invertido. El método some devuelve un booleano en función si existe al menos un elemento del Array que cumple la condición. Al encontrar el primer elemento que cumpla, dejará de iterar el Array.

const listado = [1, 2, 3, 4, 5];
const inferior10 = listado.some((valor) => valor < 10); // false, recorre los 5 elementos
const inferior3 = listado.some((valore) => valor < 3); // true, recorre solo 3 elementos

// Con for, suele ser típico algo así (igual se puede hacer con break)
let inferior10 = false;
for (let i = 0; !inferior10 && i < listado.length; i++) {
  inferior10 = listado[i] < 10;
}

reverse

Este método tiene poco misterio. Invierte el orden de los elementos del array.

const listado = [1, 2, 3, 4, 5];
const invertido = listado.reverse(); // [5, 4, 3, 2, 1]

pop, push, shift, unshift

Estos métodos permiten añadir o quitar elementos del array, tanto en el inicio como en el final.

const listado = [1, 2, 3, 4, 5];

listado.push(6); // [1, 2, 3, 4, 5, 6]
listado.pop(); // [1, 2, 3, 4, 5]

listado.unshift(0); // [0, 1, 2, 3, 4, 5]
listado.shift(); // [1, 2, 3, 4, 5]

includes

Determina si el array contiene el valor introducido, devolviendo un booleano.

const listado = [1, 2, 3, 4, 5];

const incluyeTres = listado.includes(3); // true
const incluyeCero = listado.includes(0); // false

join

Comúnmente utilizado con el método split de los strings, join permite unir todos los elementos de un array en un string con el separador que se le indique.

const listado = [1, 2, 3, 4, 5];

const sListado = listado.join(', '); // 1, 2, 3, 4, 5
const aListado = sListado.split(', '); // [1, 2, 3, 4, 5]

sort

Podemos ordenar un array con el método sort. Es importante tener en cuenta que devuelve la referencia al mismo array, con lo que estamos modificándolo y no creando uno nuevo.

const listado = [1, 2, 3, 4, 5];

listado.sort((a, b) => a - b); // 1, 2, 3, 4, 5

Hay mas métodos “clásicos”, como slice, splice, indexOf, concat, etc. que no he mencionado. El listado completo de métodos lo puedes encontrar en la MDN Web Docs.