Colecciones Arrays

En JavaScript, un array es un tipo de colección que permite almacenar múltiples valores en una sola variable. Los arrays son muy útiles para organizar y manipular grandes conjuntos de datos.

1. Qué es un array? #

Un array es una lista ordenada de elementos. Cada elemento dentro de un array tiene una posición, llamada índice, que empieza desde 0 para el primer elemento, 1 para el segundo, y así sucesivamente.

Ejemplo básico de un array:

1let frutas = ["Manzana", "Banana", "Cereza"];

En este ejemplo:

• "Manzana" está en el índice 0.
• "Banana" está en el índice 1.
• "Cereza" está en el índice 2.

Cómo crear un array #

Puedes crear un array usando corchetes [] y separando los elementos con comas.

Ejemplo:

1let numeros = [1, 2, 3, 4, 5];
2let colores = ["Rojo", "Verde", "Azul"];

También puedes crear un array vacío y agregar elementos más tarde:

1let vacio = [];
2vacio.push("Primer elemento");

Acceder a elementos de un array #

Para acceder a un elemento específico de un array, usas su índice dentro de corchetes.

Ejemplo:

 
1let frutas = ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza"];
2let primeraFruta = frutas[0]; // "🍎 Manzana"
3let segundaFruta = frutas[1]; // "🍊 Naranja"
4console.log(primeraFruta);
5console.log(segundaFruta);
Salida de consola
🍎 Manzana
🍊 Naranja

! Los índices de los arrays empiezan en 0, por lo que el primer elemento tiene índice 0, el segundo tiene índice 1, y así sucesivamente.

Modificar elementos de un array #

Puedes cambiar el valor de un elemento en un array accediendo a su índice y asignándole un nuevo valor.

Ejemplo:

 
1let frutas = ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza"];
2frutas[1] = "🍌 Banana"; // Cambia "Naranja" a "Banana"
3console.log(frutas); // Muestra [ '🍎 Manzana', '🍌 Banana', '🍒 Cereza' ]
Salida de consola
[ '🍎 Manzana', '🍌 Banana', '🍒 Cereza' ]

Propiedades y métodos de los arrays #

Los arrays en JavaScript vienen con muchas propiedades y métodos útiles para trabajar con ellos.

1. length:

   • Devuelve el número de elementos en un array.
   • Ejemplo:

      
     1let frutas = ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza"];
     2console.log(frutas.length); // Muestra 3
     Salida de consola
     3

2. push():

   • Agrega uno o más elementos al final de un array.
   • Ejemplo:

      
     1let frutas = ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza"];
     2frutas.push("🥭 Mango");
     3console.log(frutas); // Muestra ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza", "🥭 Mango"];
     Salida de consola
     [ '🍎 Manzana', '🍊 Naranja', '🍒 Cereza', '🥭 Mango' ]

3. pop():

   • Elimina el último elemento de un array y lo devuelve.
   • Ejemplo:

      
     1let frutas = ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza", "🥭 Mango"];
     2let ultimaFruta = frutas.pop();
     3console.log(ultimaFruta); // Muestra "🥭 Mango""
     4console.log(frutas); // Muestra [ '🍎 Manzana', '🍊 Naranja', '🍒 Cereza' ]
     Salida de consola
     🥭 Mango
     [ '🍎 Manzana', '🍊 Naranja', '🍒 Cereza' ]

4. unshift():

   • Agrega uno o más elementos al inicio de un array.
   • Ejemplo:

      
     1let frutas = ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza"];
     2frutas.unshift("🍓 Fresa");
     3console.log(frutas); // Muestra [ '🍓 Fresa', '🍎 Manzana', '🍊 Naranja', '🍒 Cereza' ]
     Salida de consola
     [ '🍓 Fresa', '🍎 Manzana', '🍊 Naranja', '🍒 Cereza' ]

5. shift():

   • Elimina el primer elemento de un array y lo devuelve.
   • Ejemplo:

      
     1let frutas = ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza"];
     2let primeraFruta = frutas.shift();
     3console.log(primeraFruta); // Muestra "🍎 Manzana"
     4console.log(frutas); // Muestra [ '🍊 Naranja', '🍒 Cereza' ]
     Salida de consola
     🍎 Manzana
     [ '🍊 Naranja', '🍒 Cereza' ]

6. forEach():

   • Ejecuta una función para cada elemento en el array.
   • Ejemplo:

      
     1let frutas = ["🍎 Manzana", "🍊 Naranja", "🍒 Cereza"];
     2frutas.forEach(function(fruta) {
     3  console.log(fruta);
     4});
     5// Muestra "Manzana", "Naranja", "Cereza" en la consola
     Salida de consola
     🍎 Manzana
     🍊 Naranja
     🍒 Cereza

7. concat():

   • Se utiliza para combinar (o concatenar) dos o más arrays.
   • Esta función no modifica los arrays originales, sino que devuelve un nuevo array que es el resultado de la combinación de los arrays proporcionados.
   • Ejemplo:

      
     1const array1 = [1, 2, 3];
     2const array2 = [4, 5, 6];
     3const result = array1.concat(array2);
     4console.log(result); // [1, 2, 3, 4, 5, 6]
     5// Muestra "Manzana", "Naranja", "Cereza" en la consola
     Salida de consola
     [1, 2, 3, 4, 5, 6]

Arrays multidimensionales #

Un array multidimensional es un array que contiene otros arrays como elementos. Esto es útil para representar estructuras más complejas, como matrices.

Ejemplo de array multidimensional:

 
1let matriz = [
2  [1, 2, 3],
3  [4, 5, 6],
4  [7, 8, 9]
5];
6
7console.log(matriz[1][2]); // Muestra el valor 6 (fila 2, columna 3) (recuerda que los indices empiezan en 0)
Salida de consola
6

2. Métodos Modernos de Array (ES2022 – ES2023) #

En arquitecturas frontend modernas (React, Vue) y programación funcional, es una buena práctica no mutar los arrays originales. JavaScript incorporó alternativas inmutables nativas en ES2023:

A) Métodos Inmutables vs Mutables (ES2023) #

 
1const numeros = [30, 10, 20];
2
3// Ordenación inmutable sin alterar el original
4const ordenados = numeros.toSorted((a, b) => a - b);
5console.log("Original intacto:", numeros);
6console.log("Nuevo ordenado:", ordenados);
7
8// Reemplazar un índice sin mutar
9const actualizados = numeros.with(0, 99);
10console.log("Con índice 0 actualizado:", actualizados);
Salida de consola
Original intacto: [ 30, 10, 20 ]
Nuevo ordenado: [ 10, 20, 30 ]
Con índice 0 actualizado: [ 99, 10, 20 ]

B) Acceso con índices negativos: .at() (ES2022) #

En lugar de escribir el farragoso array[array.length - 1], el método .at() permite acceder al último o penúltimo elemento directamente con números negativos:

 
1const framework = ["React", "Vue", "Angular", "Svelte"];
2
3console.log(framework.at(-1)); // "Svelte" (último)
4console.log(framework.at(-2)); // "Angular" (penúltimo)
Salida de consola
Svelte
Angular

C) Búsqueda inversa: .findLast() y .findLastIndex() (ES2023) #

Busca el último elemento que coincida con una condición empezando desde el final del array:

 
1const transacciones = [
2  { id: 1, monto: 50 },
3  { id: 2, monto: 300 },
4  { id: 3, monto: 120 },
5];
6
7const ultimaPesada = transacciones.findLast(t => t.monto > 100);
8console.log("Última transacción > 100:", ultimaPesada);
Salida de consola
Última transacción > 100: { id: 3, monto: 120 }