Arrays en JavaScript: métodos, recorridos, map, filter, find y reduce

Los arrays permiten almacenar múltiples valores dentro de una misma estructura.

Crear un array

const lenguajes = ["JavaScript", "Python", "PHP"];

Índices

En JavaScript los arrays comienzan en índice 0.

const lenguajes = ["JavaScript", "Python", "PHP"];

console.log(lenguajes[0]);
console.log(lenguajes[2]);

length

length indica cuántos elementos contiene el array. No es una función: es una propiedad.

console.log(lenguajes.length);

Agregar y quitar elementos

push() agrega al final, unshift() al principio, pop() elimina el último y shift() elimina el primero. Estos métodos modifican el array original.

const tareas = ["Estudiar"];

tareas.push("Practicar");
tareas.unshift("Leer");

tareas.pop();
tareas.shift();

includes

includes() responde con true o false según exista o no un valor dentro del array.

const tecnologias = ["HTML", "CSS", "JavaScript"];

console.log(tecnologias.includes("CSS"));

indexOf

indexOf() devuelve la posición de un valor. Si no lo encuentra, devuelve -1.

console.log(tecnologias.indexOf("JavaScript"));

forEach

forEach() ejecuta una función una vez por cada elemento. Es útil para recorrer y realizar acciones, pero no crea un nuevo array.

const nombres = ["Ana", "Luis", "María"];

nombres.forEach(nombre => {
    console.log(nombre);
});

map

map() recorre todos los elementos y devuelve un nuevo array con el resultado de aplicar una transformación a cada uno. Mantiene la misma cantidad de elementos.

const precios = [100, 200, 300];

const preciosConIVA = precios.map(precio => precio * 1.21);

console.log(preciosConIVA);

filter

filter() crea un nuevo array únicamente con los elementos que cumplen una condición. No modifica el array original.

const notas = [4, 8, 6, 10, 3];

const aprobadas = notas.filter(nota => nota >= 6);

console.log(aprobadas);

find

find() devuelve el primer elemento que cumple una condición. Si no encuentra ninguno, devuelve undefined.

const usuarios = [
    { id: 1, nombre: "Ana" },
    { id: 2, nombre: "Luis" }
];

const usuario = usuarios.find(item => item.id === 2);

console.log(usuario);

some y every

some() devuelve true si al menos un elemento cumple la condición. every() sólo devuelve true si todos la cumplen.

const notas = [8, 7, 9];

console.log(notas.some(nota => nota === 10));
console.log(notas.every(nota => nota >= 6));

reduce

reduce() combina todos los elementos hasta obtener un único resultado, por ejemplo una suma, un total o una estructura acumulada.

const importes = [1000, 2500, 800];

const total = importes.reduce((acumulador, importe) => {
    return acumulador + importe;
}, 0);

console.log(total);

sort

sort() ordena el array y modifica el original. Para números debemos indicar cómo comparar dos valores, porque por defecto los trata como texto.

Para números conviene proporcionar una función de comparación.

const numeros = [10, 2, 30, 5];

numeros.sort((a, b) => a - b);

console.log(numeros);

Spread

El operador spread ... expande los elementos de un array. Es muy útil para crear copias superficiales o combinar arrays sin escribir ciclos manuales.

const originales = [1, 2, 3];
const copia = [...originales];

const todos = [...originales, 4, 5];

Destructuring

El destructuring permite extraer valores del array y guardarlos en variables según su posición.

const tecnologias = ["HTML", "CSS", "JavaScript"];

const [html, css, javascript] = tecnologias;

console.log(javascript);

Ejemplo completo

const productos = [
    { nombre: "Teclado", precio: 25000, stock: 4 },
    { nombre: "Mouse", precio: 18000, stock: 0 },
    { nombre: "Monitor", precio: 230000, stock: 2 }
];

const disponibles = productos.filter(producto => producto.stock > 0);

const nombres = disponibles.map(producto => producto.nombre);

const total = disponibles.reduce((suma, producto) => {
    return suma + producto.precio;
}, 0);

console.log(nombres);
console.log(total);

Ejercicio

Creá un array de alumnos con nombre y nota. Obtené aprobados, buscá un alumno, generá un array solo con nombres y calculá el promedio general.

Errores comunes

• olvidar que el primer índice es 0;
• modificar el array original sin querer;
• usar map cuando realmente queremos filtrar;
• usar find esperando varios resultados;
• ordenar números sin función comparadora.

Seguí aprendiendo JavaScript

← Funciones en JavaScript: parámetros, return, scope y arrow functions

Objetos y JSON en JavaScript: propiedades, métodos y destructuring →