Saltar al contenido principal

Arreglos y sus Métodos

Un Array (Arreglo) es una variable especial que puede contener más de un valor a la vez. En JavaScript, los arrays son increíblemente flexibles: pueden crecer en tamaño dinámicamente y mezclar diferentes tipos de datos.

Se definen utilizando corchetes [].

const frutas = ["Manzana", "Banana", "Naranja"];
const mixto = ["Texto", 42, true, null];

// Accediendo (basado en índice 0)
console.log(frutas[0]); // Manzana

Métodos Mutables (Cambian el array original)​

  • push(): Añade uno o más elementos al final del array.
  • pop(): Elimina y devuelve el último elemento del array.
  • unshift(): Añade uno o más elementos al principio.
  • shift(): Elimina y devuelve el primer elemento.
const carrito = [];
carrito.push("Zapatos"); // ["Zapatos"]
carrito.push("Camisa");  // ["Zapatos", "Camisa"]
const ultimo = carrito.pop(); // Devuelve "Camisa". carrito ahora es ["Zapatos"]

⭐️ La Trinidad Funcional: map, filter, reduce​

En el JavaScript moderno, rara vez usarás bucles for tradicionales. En su lugar, utilizamos métodos funcionales puros que no modifican el array original, sino que devuelven un array completamente nuevo.

Estos métodos combinan perfectamente con las Arrow Functions de retorno implícito.

1. .map() (Transformar)​

Ejecuta la misma función en cada elemento del array y devuelve un nuevo array del mismo tamaño con los resultados.

const numeros = [1, 2, 3];
// "Mapea cada numero y conviértelo en numero * 2"
const dobles = numeros.map(numero => numero * 2);

console.log(dobles);  // [2, 4, 6]
console.log(numeros); // [1, 2, 3] (El original sigue intacto)

2. .filter() (Filtrar)​

Examina cada elemento y devuelve un nuevo array conteniendo solo los elementos que cumplan con una condición (que devuelvan true).

const edades = [15, 22, 12, 30, 18];
// "Filtra el array, conservando solo las edades mayores o iguales a 18"
const mayoresDeEdad = edades.filter(edad => edad >= 18);

console.log(mayoresDeEdad); // [22, 30, 18]

3. .reduce() (Reducir / Acumular)​

Es el más complejo. Ejecuta una función "reductora" sobre cada elemento, devolviendo como resultado un único valor (no un array). Requiere un "acumulador" y el "valor actual", además de un valor inicial.

const precios = [10, 20, 30];

// Sumar todo el carrito: 
// 1. iteración: total (0) + precio (10) = 10
// 2. iteración: total (10) + precio (20) = 30
// 3. iteración: total (30) + precio (30) = 60
const totalAPagar = precios.reduce((total, precio) => total + precio, 0);
//                                                                    ^ valor inicial del total

console.log(totalAPagar); // 60