Recorremos, ordenamos, filtramos y hacemos de todo con los arreglos (arrays).

Este artículo es para desarrolladores front-end principiantes que están aprendiendo JavaScript y han pasado a los métodos de arreglos. Analizaremos los más importantes.

El material se divide en tres partes. En la primera parte, configuraremos un entorno de trabajo para que puedas repetir los ejemplos y experimentar con los arreglos. Si ya tienes todo configurado, omite esta sección.

En la segunda parte, analizaremos los principales métodos de trabajo con los arreglos, agrupándolos. Explicaremos con lenguaje sencillo, comenzando con los métodos más fáciles.

En la tercera parte del artículo, habrá una selección de ejercicios para afianzar el tema. Intenta resolverlos por tu cuenta y luego compara los resultados.

Configurando el Entorno de Trabajo

El intérprete de JavaScript está integrado en cualquier navegador, por lo que no necesitas instalar nada adicional para trabajar con él. Solo abre el navegador, ve a la consola del desarrollador y ya puedes empezar a escribir código.

Si tienes Google Chrome instalado, primero abre alguna página. Luego, haz clic derecho en la página y selecciona «Inspeccionar» o «Ver código» en el menú contextual. Aparecerá una ventana con las herramientas del desarrollador, donde debes seleccionar la pestaña «Consola».

Pestaña Consola en las herramientas del desarrollador de Google Chrome
Pestaña Consola en las herramientas del desarrollador de Google Chrome. Introduce cualquier cadena o número y asegúrate de que el intérprete de JavaScript funciona.

Puedes permanecer en la consola del desarrollador, pero te recomendamos que dediques unos minutos a la configuración y ejecutes JavaScript en el editor VS Code.

Primero, abre la terminal en tu computadora y ejecuta el comando:

node --version

Si aparece un mensaje de error, significa que no tienes instalada Node.js, una plataforma para ejecutar código JS fuera del navegador.

Node.js se puede descargar del sitio web oficial e instalar como cualquier programa. Después de la instalación, reinicia la terminal y asegúrate de que en lugar del mensaje de error aparezca el número de versión en la pantalla.

Página principal del sitio web oficial de Node.js.
Página principal del sitio web oficial de Node.js.

Cierra la terminal, ya no la necesitamos. Ahora vamos a trabajar en el editor VS Code, descárgalo e instálalo si es necesario. También puedes probar estos IDE para trabajar con JavaScript.

En VS Code, ve al mercado de extensiones e instala «Code Runner«, tendrás un botón de ejecución de código en la esquina superior derecha de la ventana del editor.

Extensión Code Runner en VS Code
Extensión Code Runner en VS Code

Casi terminamos. Crea una carpeta en el editor, coloca en ella un archivo con cualquier nombre y extensión .js. Escribe un comando de prueba, ejecuta «Code Runner» y asegúrate de que el código JS se ejecute en el editor:

console.log('¡Hola, arreglo!');
Ejemplo de ejecución de código JS en el editor VS Code
Ejemplo de ejecución de código JS en el editor VS Code

Ahora tienes todo lo necesario para estudiar los métodos de arreglos. Última recomendación y comenzamos: en VS Code, se recomienda crear un archivo separado para cada grupo de métodos. Así será más cómodo.

Métodos para Agregar y Extraer Elementos

Primero, declararemos una variable y agregaremos un arreglo de frutas:

const fruits = ['🍋', '🍎', '🍌', '🍇', '🍉'];

Ahora agregaremos la primera entrada al arreglo de frutas.

unshift(): agrega elementos al principio del arreglo

Accederemos a la variable con nuestro arreglo, a través de la notación de punto, obtendremos acceso al método unshift() y enumeraremos los elementos necesarios:

array.unshift(element1, ..., elementN)

Los nuevos elementos aparecerán al principio del arreglo y la longitud del arreglo cambiará:

const fruits = ['🍋', '🍎', '🍌', '🍇', '🍉'];
fruits.unshift('Lista de compras:');

console.log(fruits);
// '[ Lista de compras:', '🍋', '🍎', '🍌', '🍇', <'🍉' ]

push(): agrega elementos al final del arreglo

Utilizaremos el método push() y agregaremos elementos al final del arreglo:

array.push(element1, ..., elementN)
const fruits = ['Lista de compras:', '🍋', '🍎', '🍌', '🍇', '🍉'];
fruits.push('Total: 3000 soles');

console.log(fruits);
// ['Lista de compras:', '🍋', '🍎', '🍌', '🍇', '🍉', 'Total: 3000 soles']

shift(): extrae elementos del principio del arreglo

Hemos cambiado de opinión sobre agregar una entrada al principio del arreglo, pero no queremos perderla. En estos casos, el método shift() ayuda: extrae el primer elemento y, si es necesario, permite colocarlo en una nueva variable:

array.shift()
const fruits = ['Lista de compras:', '🍋', '🍎', '🍌', '🍇', '🍉', 'Total: 3000 soles'];
const firstElement = fruits.shift();

// Arreglo sin el primer elemento
console.log(fruits); 
// [ '🍋', '🍎', '🍌', '🍇', '🍉', 'Total: 3000 soles' ]

// El primer elemento, guardado en una variable separada
console.log(firstElement); // Lista de compras:

pop(): extrae elementos del final del arreglo

Con el método pop(), eliminaremos el último elemento del final del arreglo, pero esta vez no guardaremos la entrada en una variable separada:

array.pop()
const fruits = ['🍋', '🍎', '🍌', '🍇', '🍉', 'Total: 3000 soles'];
fruits.pop();

// Arreglo después de extraer el último elemento
console.log(fruits); // [ '🍋', '🍎', '🍌', '🍇', '🍉' ]

splice(): agrega, elimina o reemplaza elementos de cualquier parte del arreglo

El método splice() modifica el contenido del arreglo y puede parecer complicado:

array.splice(start, [deleteCount, item1, item2, ...])

Pero si analizamos la sintaxis por partes, no es tan difícil:

  • start: es el índice inicial del elemento del arreglo desde donde queremos comenzar los cambios. Este parámetro puede aceptar índices negativos, que indican la posición del elemento desde el final del arreglo.
  • deleteCount: es la cantidad de elementos que queremos eliminar del arreglo. Si se especifica 0, todos los elementos permanecerán. Y si no se especifica ningún valor, el método eliminará todos los elementos a partir del índice inicial (el que se escribió en el parámetro start).
  • item1, item2, …: es una lista de nuevos elementos que se deben agregar después del índice inicial. Estos elementos no son obligatorios.

Ahora veamos algunos ejemplos de cómo utilizar el método splice().

Primero, eliminaremos algunos elementos de la mitad del arreglo:

const fruits = ['🍋', '🍎', '🍌', '🍇', '🍉'];

// Eliminamos dos elementos comenzando desde el índice 1
fruits.splice(1, 2);

console.log(fruits); // [ '🍋', '🍇', '🍉' ]

Rellenaremos el arreglo con nuevos elementos en lugar de los eliminados:

const fruits = ['🍋', '🍇', '🍉'];

// Agregamos dos nuevos elementos comenzando desde el índice 1
fruits.splice(1, 0, '🍓', '🍒');

console.log(fruits); // [ '🍋', '🍓', '🍒', '🍇', '🍉' ]

Reemplazaremos algunos elementos antiguos por nuevos:

const fruits = ['🍋', '🍓', '🍒', '🍇', '🍉'];

// Cambiamos dos elementos comenzando desde el índice 3
fruits.splice(3, 2, '🍍', '🍑');

console.log(fruits); // [ '🍋', '🍓', '🍒', '🍍', '🍑' ]

Dejaremos solo dos frutas en el arreglo y eliminaremos las demás:

const fruits = ['🍋', '🍓', '🍒', '🍍', '🍑'];

// Eliminamos todos los elementos comenzando desde el índice 2
fruits.splice(2);

console.log(fruits); // [ '🍋', '🍓' ]

Métodos para Formar Nuevos Arreglos Basados en los Existentes

Todos los métodos de este grupo devuelven un nuevo arreglo, dejando intactos los datos originales. Crearemos un arreglo de origen para practicar:

const animals = ['🐶', '🐱', '🦁', '🐯', '🐷'];

slice(): copia elementos de un arreglo

El método slice() permite copiar una parte de los elementos en un nuevo arreglo:

array.slice([start, end]);

Análisis de la sintaxis:

  • start: es el índice inicial desde donde comienza la copia de los elementos. Si no se especifica, todo comenzará desde el índice cero.
  • end: es el índice final hasta donde se copiarán los elementos. Si no se especifica, se copiarán todos los elementos desde el índice inicial hasta el final del arreglo seleccionado.

El índice inicial y final pueden aceptar argumentos negativos. Esto significará que se debe contar los elementos desde el final del arreglo.

const animals = ['🐶', '🐱', '🦁', '🐯', '🐷'];

// Formamos un nuevo arreglo con animales salvajes
const wildAnimals = animals.slice(2, 4);

console.log(wildAnimals); // ['🦁', '🐯']

concat(): copia elementos de varios arreglos

El método concat() combina varios arreglos en uno y, si es necesario, permite agregar cualquier valor adicional:

array.concat (arg1, arg2, ..., argN)
const animals = ['🐶', '🐱', '🦁', '🐯', '🐷'];
const birds = ['🦅', '🦆', '🦉']; // Arreglo con aves
const fish = ['🐠', '🐟', '🐡']; // Arreglo con peces

// Nuevo arreglo combinado con dos entradas
const combinedArray = animals.concat('añadir aves =>', birds, 'no olvidar los peces =>', fish);

console.log(combinedArray);
// ['🐶', '🐱', '🦁', '🐯', '🐷', 'añadir aves =>', '🦅', '🦆', '🦉', 'no olvidar los peces =>', '🐠', '🐟', '🐡']

filter(): devuelve un arreglo según una condición

El método filter() recorre un arreglo y selecciona los elementos que pasan una verificación según una condición determinada. Esta condición se escribe en una función de devolución de Devolución de llamada (función Callback). Si ningún elemento cumple con la condición, el método filter() creará un nuevo arreglo vacío:

array.filter(callback)
const animals = ['🐶', '🐱', '🦁', '🐯', '🐷'];

// Seleccionamos de los animales solo a los depredadores
const predators = animals.filter(animal => animal === '🦁' || animal === '🐯');

console.log(predators); // ['🦁', '🐯']

Aquí hay un ejemplo de cómo formar un arreglo vacío:

const animals = ['🐶', '🐱', '🦁', '🐯', '🐷'];

// Seleccionamos de los animales solo a los elefantes
const elephants = animals.filter(animal => animal === '🐘');

// No había elefantes en el arreglo original
console.log(elephants); // []

map(): devuelve un arreglo basado en el original

El método map() se refiere a cada elemento del arreglo original, lo cambia mediante una función de devolución de llamada y escribe el resultado en un nuevo arreglo:

array.map(callback)
const animals = ['🐶', '🐱', '🦁', '🐯', '🐷'];

// Vacunamos a nuestros animales
const vaccinatedAnimals = animals.map(animal => `${animal}💉`);

console.log(vaccinatedAnimals);
// ['🐶💉', '🐱💉', '🦁💉', '🐯💉', '🐷💉']

Métodos para Verificaciones e Iteraciones sobre un Arreglo

Los métodos de este grupo no crean ni modifican el arreglo original. Solo realizan ciertas acciones con el arreglo pasado y devuelven el resultado solicitado. Practicaremos con vehículos:

const vehicles = ['🚗', '🚕', '🚙', '🚌', '🚎', '🏍️', '🚲', '🚜', '✈️', '🚢'];

forEach(): itera sobre un arreglo y no devuelve nada

El método forEach() recorre cada elemento del arreglo mediante una función de devolución de llamada. Sin embargo, a diferencia de map(), el método forEach() no devuelve un nuevo arreglo ni modifica el actual. Es decir, puedes hacer algo con cada elemento, ver el resultado y no escribirlo en un nuevo arreglo. Es un análogo conveniente del ciclo for en JavaScript para trabajar con arreglos.

array.forEach(callback)

Supongamos que queremos ver la lista de vehículos en el arreglo. No planeamos hacer nada más por ahora, y para esto es adecuado forEach():

const vehicles = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜", "✈️", "🚢"];

vehicles.forEach((vehicle) => console.log(vehicle));
/*
 * 🚗
 * 🚕
 * 🚙
 * 🚌
 * 🚎
 * 🏍️
 * 🚲
 * 🚜
 * ✈️
 * 🚢
 */

Si reescribimos el código usando el ciclo for, resultará más engorroso. Otra diferencia: forEach() siempre llega al final y recorre todos los elementos del arreglo. Pero el ciclo for se puede detener con la instrucción break. Por lo tanto, en los arreglos, es una buena práctica usar forEach() en lugar de for.

const vehicles = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜", "✈️", "🚢"];

for (let i = 0; i < vehicles.length; i++) {
  console.log(vehicles[i]);
}
/*
 * 🚗
 * 🚕
 * 🚙
 * 🚌
 * 🚎
 * 🏍️
 * 🚲
 * 🚜
 * ✈️
 * 🚢
 */

every(): verifica si todos los elementos del arreglo cumplen con una condición dada

El método every() recorre todo el arreglo con una función de devolución de llamada y devuelve el valor booleano true si cada elemento cumple con la condición. Si hay al menos una discrepancia, el método every() devolverá false:

array.every(callback)
// Lista general de vehículos
const vehicles = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜", "✈️", "🚢"];

// Creamos una función de devolución de llamada para el método every. Verifica si el vehículo pasado (vehicle) es terrestre
const isLandTransport = (vehicle) => {
  // Lista de vehículos terrestres
  const landTransports = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜"];

  // Ciclo para recorrer todos los vehículos terrestres en el arreglo landTransports
  for (let i = 0; i < landTransports.length; i++) {
    // Si el vehículo actual (vehicle) coincide con un elemento de landTransports, se devuelve el valor true
    if (vehicle === landTransports[i]) {
      return true;
    }
  }
  // Si ninguno de los vehículos terrestres coincide con vehicle, se devuelve el valor false
  return false;
};

// Usamos el método every para verificar todos los elementos del arreglo vehicles
const allLandTransport = vehicles.every(isLandTransport);
console.log(allLandTransport); // El resultado es false, porque en el arreglo hay ✈️ avión y 🚢 barco

some(): verifica si se cumple la condición al menos para un elemento del arreglo

El método some() después de recorrer el arreglo devuelve true si al menos un elemento cumple con la condición. Si no hay coincidencias, el método devolverá false. También es importante saber que el método some() se detiene en la primera coincidencia y no recorre todos los elementos, busca al menos un elemento adecuado:

array.some(callback)
const vehicles = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜", "✈️", "🚢"];

// Creamos una función de devolución de llamada para el método some(). Verifica si el vehículo pasado (vehicle) es aéreo
const isAirTransport = (vehicle) => {
  const airTransports = ["✈️", "🚁", "🛸"];
  return airTransports.some((transport) => transport === vehicle);
};

// Usamos el método some() para verificar la presencia de al menos un vehículo aéreo en el arreglo vehicles
const hasAirTransport = vehicles.some(isAirTransport);
console.log(hasAirTransport); // true, porque en el arreglo hay ✈️ avión

Métodos para Buscar Elementos e Índices en un Arreglo

Este grupo de métodos permite encontrar un elemento específico, su índice o asegurarse de que está en el arreglo. Practicaremos buscando equipo deportivo:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

indexOf(): devuelve el índice del elemento buscado

El método indexOf acepta dos argumentos: el elemento buscado y el índice desde donde debe comenzar la búsqueda. Si en el arreglo hay varios elementos iguales, indexOf devolverá solo el primer índice. Si no se encuentra el elemento deseado, el método devolverá un índice negativo con el valor -1:

array.indexOf(searchElement, [fromIndex])

Explicación de la sintaxis:

  • searchElement: el elemento que queremos encontrar en el arreglo.
  • fromIndex: el número de índice desde donde debe comenzar la búsqueda. Si no se especifica este parámetro, la búsqueda comenzará desde el principio del arreglo.

Encontraremos el índice del primer balón de baloncesto:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

// No especificamos el segundo argumento para que la búsqueda comience desde el principio
const basketballIndex = sportsEquipment.indexOf("🏀");
console.log(basketballIndex); // 1

Buscaremos el índice del segundo balón de baloncesto:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

// Especificamos el segundo argumento para que la búsqueda comience desde el tercer índice
const nextBasketballIndex = sportsEquipment.indexOf("🏀", 3);
console.log(nextBasketballIndex); // 4

Ahora intentemos encontrar un elemento que no está en el arreglo:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

const tennisBallIndex = sportsEquipment.indexOf("🥎");
console.log(tennisBallIndex); // -1

lastIndexOf(): devuelve el índice del elemento buscado, pero comienza la búsqueda desde el final del arreglo

El método lastIndexOf() funciona casi igual que el método indexOf(). La única diferencia es que lastIndexOf() comienza a buscar el elemento desde el final y devuelve el índice de la última aparición del elemento especificado en el arreglo:

array.lastIndexOf(searchElement, [fromIndex])

Buscaremos el índice del último balón de baloncesto en el arreglo:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

const lastBasketballIndex = sportsEquipment.lastIndexOf("🏀");
console.log(lastBasketballIndex); // 8

Añadiremos al método lastIndexOf() un segundo argumento y veremos el resultado:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

// Encontraremos el índice de la última aparición de la raqueta de tenis (🎾), comenzando desde el índice 2
const lastTennisRacketIndex = sportsEquipment.lastIndexOf("🎾", 2);

console.log(lastTennisRacketIndex); // -1, no hay "🎾" hasta el índice 2
// El método verificó el índice cero, el primero y el segundo: "⚽", "🏀", "🏈"

Cambiaremos un poco el segundo argumento para que el elemento se incluya en la selección:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

// Encontraremos el índice de la última aparición de la raqueta de tenis (🎾) comenzando desde el índice 3
const lastTennisRacketIndex = sportsEquipment.lastIndexOf("🎾", 3);

console.log(lastTennisRacketIndex); // 3

includes(): verifica la presencia de un elemento en el arreglo

El método includes() devuelve un valor booleano true o false. El resultado depende de si el elemento deseado está presente en el arreglo o no. Opcionalmente, se puede especificar el índice desde donde el método comenzará la verificación:

array.includes(searchElement, [fromIndex])
const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

// Verificamos si en el arreglo hay un balón de baloncesto (🏀)
const hasBasketball = sportsEquipment.includes("🏀");
console.log(hasBasketball); // true

// Verificamos si en el arreglo hay un balón de tenis (🥎)
const hasTennisBall = sportsEquipment.includes("🥎");
console.log(hasTennisBall); // false

// Verificamos si en el arreglo hay un balón de baloncesto (🏀), comenzando desde el 4to índice
const hasBasketballFromIndex = sportsEquipment.includes("🏀", 4);
console.log(hasBasketballFromIndex); // true

find(): devuelve el primer elemento del arreglo que cumple con la condición de búsqueda

El método find() toma como argumento una función de devolución de llamada que define las condiciones para buscar un elemento. Si se encuentra el elemento deseado, find() lo devolverá. Sin embargo, si ningún elemento cumple con la condición, devolverá undefined (valor no definido):

array.find(callback)

Buscaremos un balón de voleibol:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

const firstVolleyball = sportsEquipment.find((equipment) => equipment === "🏐");
console.log(firstVolleyball); // 🏐

Complicaremos la condición y buscaremos algo que no sea un balón:

const sportsEquipment = ["⚽", "🏀", "🏈", "🎾", "🏀", "🏐", "🏈", "🎾", "🏀"];

const firstNonBall = sportsEquipment.find((equipment) => !["⚽", "🏀", "🏈", "🏐"].includes(equipment));
console.log(firstNonBall); // 🎾

Métodos para Transformar Arreglos

Estos métodos permiten ordenar, invertir y obtener un único valor basado en un arreglo. Experimentaremos con comida rápida dañina:

const foods = ["🍕", "🍔", "🌭", "🍟", "🥗", "🍣", "🍝", "🌮", "🥪", "🍰"];

sort(): devuelve un arreglo ordenado

El método sort() toma el arreglo original, lo ordena de cierta manera y lo devuelve. Es decir, después de aplicar el método, el arreglo original cambiará.

De forma predeterminada, los elementos se ordenan en orden lexicográfico, como cadenas. Si en el arreglo hay números, el método sort() los convertirá a cadenas y luego los ordenará por códigos de caracteres Unicode. Esto también ocurrirá con los emojis.

En nuestro arreglo hay hamburguesa y pizza:

  • U+1F354 – unicode de la hamburguesa 🍔
  • U+1F355 – unicode de la pizza 🍕

El símbolo de la hamburguesa tiene un unicode más pequeño, por lo que en el orden lexicográfico de clasificación estará antes de la pizza. Lo mismo ocurrirá con el resto de los emojis:

const foods = ["🍕", "🍔", "🌭", "🍟", "🥗", "🍣", "🍝", "🌮", "🥪", "🍰"];

// Ordenamos el arreglo foods en orden lexicográfico
foods.sort();
console.log(foods); // ['🌭', '🌮', '🍔', '🍕', '🍝', '🍟', '🍣', '🍰', '🥗', '🥪']

/**
🌭 — Perro caliente — U+1F32D
🌮 — Taco — U+1F32E
🍔 — Hamburguesa — U+1F354
🍕 — Rebanada de pizza — U+1F355
🍟 — Papas fritas — U+1F35F
🍝 — Espaguetis — U+1F35D
🍣 — Sushi — U+1F363
🍰 — Rebanada de pastel — U+1F370
🥗 — Ensalada verde — U+1F957
🥪 — Sándwich — U+1F96A
 */

El método sort() permite ordenar un arreglo por cualquier criterio que necesites. Por ejemplo, por longitud de cadena: de la más corta a la más larga. Para esto, debemos crear una función de devolución de llamada para comparar la longitud de las cadenas. Convertimos los emojis a texto y vemos cómo cambia el orden de clasificación:

const foods = ["Pizza", "Hamburguesa", "Perro caliente", "Papas fritas", "Ensalada", "Sushi", "Espaguetis", "Taco", "Sándwich", "Pastel"];

// Creamos una función para obtener la longitud de la cadena
const getStringLength = (str) => {
  return str.length;
};

// Ordenamos el arreglo por longitud de cadena
foods.sort((a, b) => {
  return getStringLength(a) - getStringLength(b);
});

console.log(foods);
/**
[
  'Sushi',
  'Taco',
  'Pastel',
  'Pizza',
  'Ensalada',
  'Perro caliente',
  'Sándwich',
  'Espaguetis',
  'Hamburguesa',
  'Papas fritas'
]
 */

reverse(): invierte un arreglo, cambia el orden de los elementos

El método reverse() intercambia el orden de los elementos en el arreglo original: el último elemento se convierte en el primero, el primero se convierte en el último, y así sucesivamente.

array.reverse()
const foods = ["🍕", "🍔", "🌭", "🍟", "🥗", "🍣", "🍝", "🌮", "🥪", "🍰"];

foods.reverse();
console.log(foods); // ['🍰', '🥪', '🌮', '🍝', '🍣', '🥗', '🍟', '🌭', '🍔', '🍕']

Ahora, si verificas el índice del primer elemento, será una rebanada de pastel, no una pizza. Esto significa que el orden de los elementos en el arreglo ha cambiado:

const foods = ["🍕", "🍔", "🌭", "🍟", "🥗", "🍣", "🍝", "🌮", "🥪", "🍰"];

foods.reverse();
console.log(foods[0]); // 🍰

reduce(): reduce los elementos de un arreglo a un único valor

El método reduce() aplica una función de devolución de llamada (Función Callback) secuencialmente a cada elemento del arreglo, guarda el resultado intermedio y genera un valor general. Puede ser cadenas combinadas, suma de números, etc.

Analizaremos el proceso paso a paso:

  1. La función recibe un valor inicial.
  2. Pasa al primer elemento del arreglo y al valor inicial.
  3. Se obtiene un resultado intermedio, que se convierte en un nuevo valor inicial.
  4. La función pasa al siguiente elemento del arreglo y al valor inicial actualizado.
  5. El proceso se repite hasta que la función recorre todos los elementos.

El método reduce() es el más difícil de entender, por lo que en el siguiente arreglo con emojis, lo reemplazaremos por un arreglo de números. Así será más fácil comprender su principio:

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

// Usamos el método reduce() para encontrar la suma de todos los elementos
const sum = numbers.reduce((accumulator, currentValue) => {
  // En cada iteración, agregamos el valor actual (currentValue) al acumulador (accumulator)
  return accumulator + currentValue;
}, 0); // El valor inicial del acumulador es 0

console.log(sum); // 15

Consideremos el funcionamiento del método reduce() en cada etapa de la iteración:

IteraciónAcumulador de valor acumuladoValor actualSuma de la cantidad
Primera iteración011
Segunda iteración123
Tercera iteración336
Cuarta iteración6410
Quinta iteración10515

Y así es como se ve la sintaxis del método reduce():

array.reduce(callback, [initialValue]);
  • callback: es una función que se llamará para cada elemento del arreglo. Puede aceptar cuatro argumentos:
    • accumulator: es el valor acumulado que se actualiza después de cada llamada a la función.
    • currentValue: el elemento actual del arreglo que se está procesando.
    • currentIndex: el índice del elemento actual que se está procesando. Este parámetro no es obligatorio si se especifica el valor initialValue.
    • array: es el mismo arreglo en el que estamos llamando al método reduce(). Este también es un parámetro opcional si se especifica initialValue.
  • initialValue: es el valor inicial del acumulador, desde donde comienza la acumulación. Si no se pasa, el valor inicial será el primer elemento del arreglo y el recorrido comenzará desde el segundo elemento.

A continuación, habrá código que ayudará a comprender mejor la sintaxis del método reduce(). Ejecútalo y observa lo que sucede en cada iteración:

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

// Usando el método reduce(), creamos una cadena con información sobre cada elemento del arreglo
const result = numbers.reduce((accumulator, currentValue, currentIndex, array) => {
  // Mostramos información sobre la iteración actual
  console.log(`Iteración ${currentIndex}:`);
  console.log(`  Elemento actual: ${currentValue}`);
  console.log(`  Índice actual: ${currentIndex}`);
  console.log(`  Arreglo original: [${array.join(', ')}]`);
  console.log(`  Acumulador antes: ${accumulator}`);

  // Formamos una cadena con información sobre el elemento actual y la agregamos al acumulador
  accumulator += `Elemento ${currentIndex + 1}: ${currentValue}\n`;

  console.log(`  Acumulador después: ${accumulator}\n`);

  // Devolvemos el acumulador actualizado para la siguiente iteración
  return accumulator;
}, ''); // El valor inicial del acumulador es una cadena vacía

// Resultado final
console.log('Resultado:\n' + result);
/*
Salida esperada en la consola:
Iteración 0:
  Elemento actual: 1
  Índice actual: 0
  Arreglo original: [1, 2, 3, 4, 5]
  Acumulador antes:
  Acumulador después: Elemento 1: 1

Iteración 1:
  Elemento actual: 2
  Índice actual: 1
  Arreglo original: [1, 2, 3, 4, 5]
  Acumulador antes: Elemento 1: 1

  Acumulador después: Elemento 1: 1
Elemento 2: 2
*/

Práctica con Arreglos

Trabajar con arreglos es importante para programar de manera eficiente y para aprender marcos populares como React. Por lo tanto, cuanto más practiques, más te sumergirás en el tema. En esta sección, hemos recopilado ejercicios sobre los métodos de arreglos que hemos analizado en el artículo.

Ejercicio para agregar y extraer elementos

Tienes una lista de compras: 🥕, 🥒, 🌽, 🍎, 🍌, 🍇. Crea un arreglo para esta lista y luego agrega un nuevo vegetal al principio y al final de la lista. Agrega más vegetales y elimina todos los frutos del arreglo.

Solución

// Paso 1: Creamos un arreglo con tres vegetales y tres frutos
const groceryList = ['🥕', '🥒', '🌽', '🍎', '🍌', '🍇'];

// Paso 2: Agregamos un vegetal al principio y al final del arreglo
groceryList.unshift('🥦'); // Agregamos brócoli al principio
groceryList.push('🍆'); // Agregamos berenjena al final

// Paso 3: Reemplazamos tres frutos por vegetales
groceryList.splice(4, 3, '🥔', '🍅', '🌶️'); 
// Reemplazamos manzana, plátano y uva por papa, tomate y pimiento

// Nuestro arreglo final de vegetales
console.log(groceryList); 
// ['🥦', '🥕', '🥒', '🌽', '🥔', '🍅', '🌶️', '🍆']

Ejercicio de creación de arreglos a partir de los actuales

En tres zoológicos se albergan las siguientes especies de animales:

  • Primer zoológico: 🐹 ardilla listada, 🐿️ ardilla, 🦁 león, 🦅🦅🦅 tres águilas, 🐒 mono, 🐍 serpiente, 🦉 búho, 🐘 elefante, 🐢 tortuga, 🐻 oso.
  • Segundo zoológico: 🐼 panda, 🐨 koala, 🦆 pato, 🦒 jirafa, 🦜🦜🦜 tres loros, 🦅 águila, 🐯 tigre, 🐧 pingüino, 🐙 pulpo, 🦋 mariposa, 🦔 erizo.
  • Tercer zoológico: 🐸 rana, 🐵 mono, 🦅🦅 dos águilas, 🦜🦜🦜 tres loros, 🦒 jirafa, 🐍 serpiente, 🐢 tortuga, 🦊 zorro.

Coloca los animales de cada zoológico en un arreglo separado: zoo1, zoo2 y zoo3. Combina los tres arreglos en uno solo, allAnimals.

Selecciona del arreglo general allAnimals todas las 🦅 águilas y 🦜 loros. Guárdalos en un nuevo arreglo eaglesParrots. Envía a las águilas y los loros a la clínica veterinaria 🚑 y guarda el resultado en un nuevo arreglo treatedAnimals.

Solución

// Colocamos los animales de cada zoológico en un arreglo separado
const zoo1 = ['🐹', '🐿️', '🦁', '🦅', '🦅', '🦅', '🐒', '🐍', '🦉', '🐘', '🐢', '🐻'];
const zoo2 = ['🐼', '🐨', '🦆', '🦒', '🦜', '🦜', '🦜', '🦅', '🐯', '🐧', '🐙', '🦋', '🦔'];
const zoo3 = ['🐸', '🐵', '🦅', '🦅', '🦜', '🦜', '🦜', '🦒', '🐍', '🐢', '🦊'];

// Combinamos los tres arreglos en uno solo
const allAnimals = zoo1.concat(zoo2, zoo3);

// Seleccionamos del arreglo general todos los loros y águilas
const eaglesParrots = allAnimals.filter(animal => animal === '🦅' || animal === '🦜');

// Enviamos a las águilas y loros a la clínica veterinaria
const treatedAnimals = eaglesParrots.map(animal => `${animal}🚑`);

console.log(treatedAnimals);
// ['🦅🚑', '🦅🚑', '🦅🚑', '🦅🚑', '🦅🚑', '🦅🚑', '🦜🚑', '🦜🚑', '🦜🚑', '🦜🚑', '🦜🚑', '🦜🚑']

Ejercicio con el método forEach()

Tienes un arreglo con diferentes vehículos de transporte:

const vehicles = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜", "✈️", "🚢"];

Escribe un programa que muestre información sobre cada vehículo de transporte en la consola en el siguiente formato:

Vehículo <índice>: <símbolo>

Ejemplo de salida:

Vehículo 1: 🚗
Vehículo 2: 🚕
Vehículo 3: 🚙
...

Solución

const vehicles = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜", "✈️", "🚢"];

// Escribimos una función para mostrar información sobre cada vehículo
const displayVehicleInfo = (vehicle, index) => {
  // Mostramos información en el formato "Vehículo <índice>: <símbolo>"
  console.log(`Vehículo ${index + 1}: ${vehicle}`);
};

// Usamos el método forEach para llamar a la función displayVehicleInfo para cada elemento del arreglo
vehicles.forEach((vehicle, index) => {
  displayVehicleInfo(vehicle, index);
});

/**
Vehículo 1: 🚗
Vehículo 2: 🚕
Vehículo 3: 🚙
Vehículo 4: 🚌
Vehículo 5: 🚎
Vehículo 6: 🏍️
Vehículo 7: 🚲
Vehículo 8: 🚜
Vehículo 9: ✈️
Vehículo 10: 🚢
 */

Ejercicio con los métodos every() e includes()

En la sección sobre el método every(), usamos el ciclo for para recorrer todos los vehículos de transporte terrestre. Reescribe el código para que en lugar del ciclo en el cuerpo de la función aparezca el método includes(). Verifica el resultado:

const vehicles = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜", "✈️", "🚢"];

const isLandTransport = (vehicle) => {
  const landTransports = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜"];
  for (let i = 0; i < landTransports.length; i++) {
    if (vehicle === landTransports[i]) {
      return true;
    }
  }
  return false;
};
const allLandTransport = vehicles.every(isLandTransport);
console.log(allLandTransport); // false, en el arreglo hay ✈️ y 🚢

Solución

const vehicles = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜", "✈️", "🚢"];

const isLandTransport = (vehicle) => {
  const landTransports = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏍️", "🚲", "🚜"];

  // Comprobamos si el vehículo de transporte pasado está en la lista de vehículos de transporte terrestre
  return landTransports.includes(vehicle);
};

const allLandTransport = vehicles.every(isLandTransport);
console.log(allLandTransport); // false, porque en el arreglo hay ✈️ y 🚢

Ejercicio con el método sort()

Tienes un arreglo con platos. Ordénalo por la longitud de las cadenas: desde la descripción de platos más corta a la más larga. Muestra el resultado en la consola:

const foodDescriptions = [
  "Ensalada César",
  "Pasta Boloñesa",
  "Roll Filadelfia",
  "Sopa Tom Yam",
  "Steak Medium",
  "Pizza Margarita",
  "Cheesecake Nueva York",
  "Hot dog con queso",
  "Sushi Filadelfia",
  "Ensalada de frutas",
];

Solución

const foodDescriptions = [
    "Ensalada César",
    "Pasta Boloñesa",
    "Roll Filadelfia",
    "Sopa Tom Yam",
    "Steak Medium",
    "Pizza Margarita",
    "Cheesecake Nueva York",
    "Hot dog con queso",
    "Sushi Filadelfia",
    "Ensalada de frutas",
  ];

  // Creamos una función para obtener la longitud de la cadena
  const getStringLength = (str) => {
    return str.length;
  };

  // Ordenamos el arreglo por la longitud de las cadenas de menor a mayor
  foodDescriptions.sort((a, b) => {
    return getStringLength(a) - getStringLength(b);
  });

  console.log(foodDescriptions);

/**
[
  'Sopa Tom Yam',
 'Ensalada César',
  'Steak Medium',
  'Pasta Boloñesa',
  'Pizza Margarita',
  'Hot dog con queso',
  'Ensalada de frutas',
  'Roll Filadelfia',
  'Cheesecake Nueva York',
  'Sushi Filadelfia'
]
 */

Ejercicio con el método reduce()

Tienes un arreglo de cadenas con frutas. Cuenta el número total de letras:

const fruits = ["manzana", "plátano", "kiwi", "mango", "pera"];

Solución

const fruits = ["manzana", "plátano", "kiwi", "mango", "pera"];

const totalLetters = fruits.reduce((accumulator, currentValue) => {
  // Agregamos la longitud de la cadena actual al acumulador
  return accumulator + currentValue.length;
}, 0); // Valor inicial del acumulador 0

console.log(totalLetters); // 27

¿Qué Sigue?

Te has familiarizado con los métodos principales de arreglos en JavaScript y su sintaxis básica. Para seguir aprendiendo sobre arreglos, te recomendamos consultar la documentación web de MDN Web Docs de Mozilla.

Categorizado en:

Javascript,