Bucles y arrays en JavaScript

Un bucle repite un bloque de código. Cada ejecución de su cuerpo es una iteración. Puedes cambiar cuántas veces se repite el trabajo modificando el contador y la condición del bucle, sin copiar el cuerpo.

Lee las tres partes

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Los paréntesis contienen una inicialización, una condición y una actualización, separadas por puntos y comas. let i = 1 se ejecuta una vez. Después JavaScript comprueba i <= 5. Si es verdadero, el cuerpo muestra i, la actualización i++ suma 1 y JavaScript comprueba la condición de nuevo. Una condición falsa termina el bucle antes de otra ejecución del cuerpo.

Hay cinco iteraciones, pero seis comprobaciones de la condición. La última comprobación, que falla, no ejecuta el cuerpo. Un bucle cuya condición es falsa al principio no tiene iteraciones.

Elige los extremos y el paso

for (let i = 0; i < 10; i++) visita desde 0 hasta 9. Empezar en 1 con i <= 10 visita desde 1 hasta 10. Ambos se ejecutan diez veces. Para un paso de 1 desde a hacia b, cuando b es al menos igual a a, < b da b - a iteraciones y <= b da b - a + 1.

La actualización puede dar pasos mayores: for (let i = 0; i <= 20; i += 5) visita 0, 5, 10, 15, 20. Contar hacia atrás requiere una actualización decreciente y una condición acorde: for (let i = 3; i >= 1; i--) visita 3, 2, 1. Anota el primer y el último valor previstos antes de elegir < o <=; esto permite detectar un error de desfase de una unidad.

Mantén una suma acumulada

let total = 0;
for (let i = 1; i <= 100; i++) {
  total += i;
}
console.log(total); // 5050

total es un acumulador: lleva el resultado de una iteración a la siguiente. Después de las tres primeras iteraciones contiene 1, luego 3 y después 6. Coloca su declaración antes del bucle para que se inicialice una vez. Declararlo dentro del cuerpo lo reiniciaría cada vez y haría que no estuviera disponible después del bucle.

Diagnostica un bucle que se comporta de forma extraña

El contador de la cabecera usa let porque i++ le reasigna un valor. Un contador const permite la primera ejecución del cuerpo, pero lanza un TypeError en la actualización. Un let i declarado en la cabecera pertenece al bucle; leerlo después produce un ReferenceError, salvo que exista otra variable llamada i fuera.

Un punto y coma inmediatamente después de la cabecera deja vacío el cuerpo del bucle. En for (let i = 0; i < 3; i++); { console.log("Hello"); }, el bloque se ejecuta una vez después del bucle. Mantén la llave de apertura junto a la cabecera. Por último, comprueba la dirección de la actualización: empezar en 0 con i < 5 e i-- aleja el contador del punto de parada y el bucle nunca termina.

Algunas tareas terminan cuando un resultado alcanza un objetivo, no después de un número conocido de pasos. Un bucle while comprueba esa condición de parada antes de cada repetición. Un bucle do...while la comprueba después del cuerpo.

Comprueba primero con while

let balance = 1000;
let years = 0;
while (balance < 1500) {
  balance = balance * 1.05;
  years++;
}
console.log(years); // 9

El saldo crece un 5 % al año. Ambas variables se inicializan antes del bucle. Después de ocho repeticiones el saldo es aproximadamente 1477.46, por debajo del objetivo, así que se necesita otra repetición. Después de nueve es aproximadamente 1551.33; la siguiente comprobación es falsa. Conserva el saldo completo durante el cálculo y redondea solo el resultado que se muestra.

Si una condición de while es falsa al principio, el cuerpo no se ejecuta ninguna vez. Para un bucle de conteo sencillo, coloca la inicialización antes de while y la actualización al final del cuerpo. Esto conserva el comportamiento de un bucle for cuando no hay continue. Con continue, la actualización requiere especial cuidado porque puede omitirse.

Ejecuta una vez antes de comprobar

let n = 4096;
let digits = 0;
do {
  n = Math.floor(n / 10);
  digits++;
} while (n > 0);
console.log(digits); // 4

Math.floor redondea hacia abajo. Aquí cada división elimina la última cifra: 4096 se convierte en 409, luego en 40, 4 y 0. Cada eliminación incrementa digits. Empezar con 0 también ejecuta el cuerpo una vez y cuenta correctamente su única cifra. Un while (n > 0) que comprueba antes omitiría ese caso e indicaría cero cifras. Este método de conteo de cifras sirve para números enteros no negativos.

Con let n = 10, un cuerpo do...while que muestra n se ejecuta una vez incluso si su condición es n < 5. La misma condición, comprobada antes, no muestra nada. El punto y coma va después de la condición final en do...while.

Avanza hacia una salida

Un bucle infinito sigue repitiéndose sin terminar. Olvidar n++ en let n = 0; while (n < 3) { console.log(n); } deja la condición verdadera indefinidamente. El código que se ejecuta durante mucho tiempo puede congelar una pestaña del navegador. Sigue qué modifica la condición y detén un script bloqueado con los controles del navegador.

Una condición compuesta como attempts < 3 && !found continúa solo mientras ambas comprobaciones son verdaderas. Se detiene cuando se han usado tres intentos o se encuentra un resultado. Para un entero no negativo que disminuye hacia cero, while (count > 0) expresa una cuenta atrás con más claridad que while (count). Los números negativos también son verdaderos en contexto booleano, así que ser verdadero en ese contexto por sí solo no significa que un contador sea positivo.

Evita la igualdad como comprobación de parada para decimales. Diez sumas de 0.1 dan 0.9999999999999999 en JavaScript, así que while (x !== 1) puede superar el extremo previsto y continuar indefinidamente. Una comparación como x < 1 permite cruzar el límite; un contador entero es mejor cuando se necesitan exactamente diez pasos. Calcula cada valor decimal a partir de ese contador.

Un bucle puede terminar antes de que su condición sea falsa u omitir trabajo para un solo elemento. Los bucles anidados permiten repetir una secuencia dentro de otra, como al visitar filas y columnas.

Interrumpe o continúa

break sale de su bucle inmediatamente. Para encontrar el primer múltiplo de 7 mayor que 50:

for (let n = 51; n <= 100; n++) {
  if (n % 7 === 0) {
    console.log(n); // 56
    break;
  }
}

Después de mostrar 56, la ejecución continúa después del bucle. Los valores desde 57 hasta 100 nunca se comprueban. while (true) puede usar el mismo patrón cuando la salida es más fácil de comprobar dentro del cuerpo; un break al que se pueda llegar debe proporcionar la salida.

continue omite el resto de la iteración actual. En un bucle for, sí ejecuta la actualización de la cabecera antes de comprobar la condición de nuevo:

for (let i = 1; i <= 9; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}

Los valores pares omiten la salida, así que el resultado es 1, 3, 5, 7, 9. Sustituir continue por break terminaría el bucle en 2 y solo se mostraría 1.

En un bucle while, continue salta directamente a la condición. Una actualización situada más adelante en el cuerpo se omite. Si i es 2 y el cuerpo empieza con if (i === 2) continue;, ese valor puede quedarse bloqueado indefinidamente. Coloca la actualización necesaria antes de ese salto o expresa el conteo con for.

Repite un bucle interior para cada fila

for (let row = 1; row <= 3; row++) {
  let line = "";
  for (let col = 1; col <= 4; col++) {
    line = line + (row * col) + " ";
  }
  console.log(line.trim());
}

Para row = 1, el bucle interior visita las columnas desde 1 hasta 4 y construye el texto «1 2 3 4». Vuelve a empezar en la columna 1 para la fila 2 y produce «2 4 6 8». La fila 3 produce «3 6 9 12». El cuerpo interior se ejecuta doce veces: cuatro columnas para cada una de las tres filas. Declara line dentro del cuerpo exterior para que cada fila empiece con una cadena vacía.

Usa nombres distintos para los contadores. Un let i interior oculta un i exterior, lo que dificulta leer ambas posiciones.

Visita cada par distinto una vez

Para cuatro personas numeradas desde 0 hasta 3, inicia el contador interior en i + 1:

for (let i = 0; i < 4; i++) {
  for (let j = i + 1; j < 4; j++) {
    console.log(i, j);
  }
}

Los pares son 0–1, 0–2, 0–3, 1–2, 1–3, 2–3: seis visitas. Empezar j en 0 produciría dieciséis visitas, incluidos pares de una persona consigo misma y duplicados en orden inverso.

Un break normal solo sale del bucle más interno. Para terminar una búsqueda anidada completa, coloca una etiqueta al bucle exterior, por ejemplo outer: for (...), y después usa break outer; cuando encuentres la coincidencia. La etiqueta nombra el bucle del que se debe salir; no cambia el orden en que se comprueban los pares.

Un array almacena una lista ordenada bajo un solo nombre. Sus valores se llaman elementos. Un literal de array usa corchetes y comas: const temps = [18, 21, 19, 24];. El literal [] crea un array vacío.

Cuenta posiciones desde cero

const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"
console.log(colors[2]); // "blue"
console.log(colors.length); // 3

El índice de un elemento es su posición contando desde cero. El tercer elemento tiene el índice 2. length cuenta las posiciones indexadas, incluidas las vacías. Para este array sin huecos también es el número de elementos. El último índice es colors.length - 1, así que colors[colors.length - 1] lee «blue».

Leer colors[colors.length] pide el índice 3, una posición después del final, y da undefined. Un índice ausente no lanza un error solo por estar ausente. colors[5] también da undefined.

Lee desde el final

colors.at(-1) lee el último elemento y colors.at(-2) lee el anterior. Los índices no negativos funcionan como siempre: colors.at(0) lee «red». Un número negativo entre corchetes tiene un significado diferente: colors[-1] no cuenta desde el final y da undefined para este array.

Lee una lista dentro de otra

Un elemento puede ser a su vez un array:

const grid = [[1, 2, 3], [4, 5, 6]];
console.log(grid[1]); // [4, 5, 6]
console.log(grid[1][0]); // 4

El primer índice selecciona una fila. El segundo selecciona un valor dentro de esa fila. grid.length es 2, mientras que grid[0].length es 3. Estas longitudes describen arrays distintos. Las filas de un array anidado pueden tener longitudes diferentes.

Los arrays pueden mezclar tipos, como en [42, "km", true]. Una lista con un solo tipo de datos, como temperaturas, es más fácil de procesar porque cada elemento se puede manejar de la misma forma.

Reconoce un array y evita sorpresas con las posiciones vacías

typeof [1, 2] devuelve «object», así que no es una comprobación específica de arrays. Usa Array.isArray(value): devuelve true para [1, 2] y false para «12».

new Array(3) crea tres posiciones vacías; no almacena el número 3 por sí solo. Usa [3] para un elemento o [0, 0, 0] para tres ceros explícitos. Una posición vacía se lee como undefined, pero es un hueco, no un valor almacenado explícitamente. Escribir literales de array deja claro el contenido previsto.

Lee cadenas sin intentar modificarlas in situ

Las cadenas también admiten índices, length y at(). "hello"[1] es «e» y "hello".at(-1) es «o». Las cadenas son inmutables: asignar un valor a la posición de un carácter no lo sustituye. En modo estricto, incluidos los módulos de JavaScript, esa asignación lanza un TypeError. Construye una cadena nueva cuando el texto deba cambiar.

Modificar un array existente se llama mutación. Algunos métodos mutan el array; otros devuelven uno nuevo. El valor de retorno de un método también puede ser una longitud o un elemento eliminado, así que comprueba tanto el array como el resultado de la llamada.

Sustituye elementos y modifica los extremos

const scores = [70, 80, 90];
scores[1] = 85;
console.log(scores); // [70, 85, 90]

const mantiene scores apuntando al mismo array. No congela el contenido de ese array. Asignar scores = [] lanzaría un TypeError, pero la asignación por índice está permitida.

Para const queue = ["Ana", "Ben"];, queue.push("Cleo") devuelve 3. El array pasa a ser ["Ana", "Ben", "Cleo"]. Después, queue.pop() devuelve «Cleo» y deja los dos primeros nombres. Almacenar una llamada a push guarda su longitud numérica, no el array actualizado. pop y shift devuelven undefined en un array vacío. Añadir o eliminar al principio también desplaza los demás índices, lo que puede suponer más trabajo en arrays largos.

Inserta y elimina en medio

splice(start, deleteCount, ...items) modifica el array y devuelve un array con los elementos eliminados:

const days = ["Mon", "Tue", "Thu", "Fri"];
const removed = days.splice(2, 0, "Wed");
// days: ["Mon", "Tue", "Wed", "Thu", "Fri"]
// removed: []
const nextRemoved = days.splice(1, 2);
// days: ["Mon", "Thu", "Fri"]
// nextRemoved: ["Tue", "Wed"]

La primera llamada empieza en el índice 2, elimina cero elementos e inserta «Wed» ahí. La segunda empieza en el índice 1 y elimina dos elementos. Su segundo argumento es una cantidad, no un índice final. Los elementos posteriores a una inserción o eliminación reciben nuevos índices.

Copia un intervalo con slice

slice(start, end) devuelve un array nuevo y excluye el índice final. Para const t = [10, 20, 30, 40, 50];, t.slice(1, 3) da [20, 30] y deja t sin cambios. t.slice(-2) copia los dos últimos elementos, [40, 50]. Sin argumentos, t.slice() copia todo el array. La letra adicional de splice señala una operación distinta: modifica el original; slice copia un intervalo.

Mantén la lista libre de huecos accidentales

Escribir más allá del final crea posiciones vacías. Después de const a = [1, 2]; a[4] = 5;, la longitud es 5 y los índices 2 y 3 son huecos. delete a[i] también deja un hueco y conserva la longitud. Usa push para añadir al final y splice(i, 1) para eliminar un elemento y cerrar el hueco.

Asignar un valor menor a length elimina elementos del final. a.length = 0 vacía el array. Los elementos eliminados no reaparecen si después se aumenta la longitud.

sort y reverse también mutan arrays. Entre los métodos que copian están slice, concat, map, filter, toSorted, toReversed, toSpliced y with. Cuando un método devuelve un array nuevo, guarda o usa ese resultado; el original sigue conteniendo sus valores anteriores.

Una búsqueda puede necesitar un resultado de sí o no o la posición de un elemento. La conversión de texto tiene otro propósito: cambia la forma de los datos para que una lista se pueda leer, almacenar o procesar.

Pregunta si está o dónde está

includes(value) devuelve un booleano. ["tea", "coffee"].includes("tea") es true; cambiar la búsqueda a «Tea» da false. La búsqueda de coincidencias en texto distingue entre mayúsculas y minúsculas, y los tipos importan: [5].includes("5") es false.

indexOf(value) devuelve el primer índice que coincide, o -1 cuando ningún valor coincide. lastIndexOf busca desde el final. Con [3, 7, 3, 9], el primer 3 está en el índice 0 y el último está en el índice 2. Buscar 5 devuelve -1.

No escribas if (arr.indexOf(x)). El índice 0 es falso en contexto booleano, mientras que -1 es verdadero en ese contexto: esa comprobación rechaza una coincidencia al principio y acepta un valor ausente. Usa arr.indexOf(x) !== -1, o usa includes cuando no necesites la posición.

Para valores ordinarios, ambos métodos requieren el mismo tipo y valor, como la igualdad estricta. Su tratamiento de NaN es distinto: [1, NaN].includes(NaN) es true, pero [1, NaN].indexOf(NaN) es -1. La regla de igualdad usada por includes puede hacer coincidir NaN consigo mismo.

Compara el contenido de forma deliberada

Dos arrays creados por separado son arrays distintos aunque sus elementos coincidan. [1, 2] === [1, 2] es false; == también compara la identidad de los arrays. Para comprobar que tienen el mismo contenido ordenado, compara las longitudes y después los valores de cada índice correspondiente. Una comprobación de pertenencia con resultado de sí o no no establecería por sí sola el mismo orden ni el mismo número de repeticiones.

Une elementos en una cadena

const dateParts = ["2026", "03", "15"];
console.log(dateParts.join("-")); // "2026-03-15"
console.log([1, 2, 3].join()); // "1,2,3"
console.log([1, 2, 3].join("")); // "123"

join coloca su separador entre los elementos, nunca después del último. Su separador predeterminado es una coma sin espacios. Los elementos null y undefined aportan texto vacío. Elige el separador de forma explícita para obtener una salida legible.

Usar + con una cadena también convierte un array en texto, pero usa comas: "List: " + [1, 2] se convierte en «List: 1,2». La estructura anidada se pierde en ese texto: String([1, [2, 3]]) da «1,2,3». Registra el propio array para inspeccionar su estructura.

Divide texto en partes

"red,green,blue".split(",") devuelve ["red", "green", "blue"]. El separador debe coincidir exactamente. Dividir «red, green» solo por una coma conserva el espacio al principio de « green»; dividir por «, » elimina la coma y ese espacio.

"4,8,15".split(",") devuelve cadenas, no números. Convierte cada parte antes de sumar valores numéricos. De lo contrario, el operador + puede unir texto en lugar de calcular un total.

Para texto sencillo basado en letras, "stressed".split("").reverse().join("") produce «desserts». La división crea un array nuevo, la inversión modifica ese array y la unión reconstruye una cadena. Un separador vacío divide en unidades de código UTF-16; algunos símbolos usan más de una unidad, así que esta no es una forma general de invertir todo el texto legible para las personas.

Un bucle puede visitar las posiciones de un array o tomar los valores directamente. Elige la forma que proporcione la información que necesita el cuerpo. Ten en cuenta que los índices del array cambian al insertar o eliminar elementos.

Usa índices para posiciones y dirección

const fruits = ["apple", "pear", "plum"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Los índices son 0, 1, 2. La comprobación es < fruits.length, porque el índice 3 está más allá del final. Con <=, una iteración adicional leería undefined. Los bucles con índice también pueden ir hacia atrás, empezando en fruits.length - 1 y continuando mientras i >= 0, o visitar uno de cada dos elementos con i += 2.

Usa for...of para los valores

for (const fruit of fruits) {
  console.log(fruit.toUpperCase());
}

Esto muestra «APPLE», «PEAR» y «PLUM». fruit contiene un valor por iteración. const funciona porque cada iteración crea un enlace nuevo; el bucle no reasigna un contador compartido. for...of también funciona con cadenas. Un bucle sobre «banana» puede contar vocales comprobando "aeiou".includes(ch) para cada ch.

Cambiar un número local no escribe en el array. Después de for (let n of nums) { n = n * 2; }, los elementos numéricos de nums no cambian. Para mutarlos, asigna mediante nums[i] o construye un array nuevo de números duplicados.

Obtén valores e índices juntos

entries() proporciona pares que contienen un índice y un valor. Los corchetes en la cabecera del bucle extraen cada par:

for (const [i, fruit] of fruits.entries()) {
  console.log((i + 1) + ". " + fruit);
}

La salida es «1. apple», «2. pear», «3. plum». Los índices del array siguen empezando en cero; i + 1 solo cambia la numeración mostrada.

for...in visita nombres de propiedades. En los arrays, sus índices son cadenas y puede incluir propiedades adicionales. Usa las formas de bucle para arrays anteriores para procesar elementos.

Evita omitir elementos desplazados

const nums = [2, 4, 5, 6];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) nums.splice(i, 1);
}
// nums is [4, 5]

En el índice 0, eliminar 2 desplaza 4 al índice 0. La actualización mueve i a 1, así que se omite 4. Después el bucle ve 5 y elimina 6. El resultado todavía contiene un número par.

Cuando elimines por índice, recorre el array hacia atrás desde el final. Al eliminar un elemento, solo se desplazan posiciones ya visitadas. Otra opción es construir un array nuevo que contenga los valores que se quieren conservar. Evita añadir elementos al mismo array mientras la comprobación de parada de un bucle dependa de su longitud; el punto final puede seguir desplazándose.

Muchas tareas con arrays usan los mismos patrones breves de bucle. Decide qué resultado necesitas, elige su valor inicial y actualízalo una vez por cada elemento pertinente. Un seguimiento muestra qué significa el resultado después de cada paso.

Acumula un total y cuenta coincidencias

const temps = [18, 21, 19, 24];
let sum = 0;
let warm = 0;
for (const t of temps) {
  sum += t;
  if (t > 20) warm++;
}

sum suma cada temperatura; warm añade uno solo para una temperatura superior a 20 °C. Registran cantidades distintas. Un seguimiento hace visible esa diferencia:

El promedio es sum / temps.length, que da 20,5 °C. Comprueba la longitud antes de dividir: un array vacío da 0 / 0, que es NaN, no un promedio significativo.

Sigue un valor máximo o mínimo

Para un array no vacío, inicializa el máximo con su primer elemento. Después sustitúyelo solo cuando encuentres un valor mayor:

const values = [-3, -7, -1, -5];
let max = values[0];
for (const n of values) {
  if (n > max) max = n;
}
// max is -1

Empezar en cero conservaría incorrectamente el cero para una lista de valores negativos. Empezar con -Infinity también funciona para un máximo, pero una entrada vacía deja entonces ese valor inicial. Para un mínimo, invierte la comparación y elige el primer elemento o Infinity como valor inicial.

Encuentra la primera coincidencia o comprueba una lista completa

Una búsqueda almacena una coincidencia y sale con break. Con let firstWarm;, el bucle puede asignar firstWarm = t en el primer t > 20 y salir. Encuentra 21 y deja los elementos posteriores sin comprobar. Si nada coincide, la variable permanece en undefined.

Para una comprobación de «todos», inicia un indicador en true y cámbialo a false en el primer fallo. Para una comprobación de «alguno», empieza en false y cámbialo a true en el primer acierto. Si las puntuaciones aprobadas son las de al menos 50, [72, 85, 49] falla la comprobación de que todos aprobaron en 49. Una lista vacía deja el indicador con su valor inicial.

Construye valores modificados y compara elementos vecinos

const km = [1.5, 3, 0.25];
const meters = [];
for (const d of km) {
  meters.push(d * 1000);
}
// meters is [1500, 3000, 250]

El array nuevo empieza vacío y recibe una distancia convertida por iteración. Coloca una condición antes de push cuando solo algunos valores deban formar parte del resultado.

Para los cambios de un día al siguiente, empieza en el índice 1, porque el índice 0 no tiene un día anterior:

const changes = [];
for (let i = 1; i < temps.length; i++) {
  changes.push(temps[i] - temps[i - 1]);
}
// changes is [3, -2, 5]

Hay una diferencia menos que lecturas. Restar en el orden contrario invertiría todos los signos. Las mismas formas de resultado aparecen en los métodos de arrays: map construye valores transformados, filter conserva coincidencias, find busca, some y every comprueban condiciones y reduce acumula. Un bucle sigue siendo útil cuando una pasada necesita varios resultados, como con sum y warm.

Una función recibe entradas, ejecuta código y puede devolver un resultado. Una función de devolución de llamada es una función que se pasa a otra para que la llame. Los métodos de arrays usan estas funciones para describir el trabajo que se hace con cada elemento.

Escribe una función flecha breve

n => n * 2 recibe un parámetro llamado n y devuelve su valor duplicado. La flecha separa las entradas del cuerpo. Un solo parámetro puede omitir los paréntesis. Si no hay parámetros o hay varios, se necesitan: () => 0 y (a, b) => a - b.

const double = n => n * 2;
const doubled = [1, 2, 3].map(double);
// doubled is [2, 4, 6]

double nombra la función en sí. El método la llama con cada número. Escribir map(double()) la llamaría inmediatamente y pasaría el resultado en lugar de la función. Con una comprobación definida por una función con nombre, como function isEven(n) { return n % 2 === 0; }, usa filter(isEven) para que el método proporcione cada elemento.

Devuelve un valor desde un cuerpo de bloque

Una expresión después de la flecha se devuelve automáticamente. Las llaves crean un bloque, por lo que un resultado necesita un return explícito:

const double = n => {
  const doubled = n * 2;
  return doubled;
};

Sin return, la función devuelve undefined. Por tanto, [1, 2, 3].map(n => { n * 2; }) produce [undefined, undefined, undefined]. La multiplicación se ejecuta, pero su valor nunca se convierte en el resultado de la función de devolución de llamada.

Interpreta los argumentos por su posición

Métodos como map, filter y forEach pasan primero el elemento, después su índice desde cero y en tercer lugar el array completo. En (name, i) => ..., tú eliges los nombres; sus posiciones determinan qué reciben. Omite los parámetros que no uses al final. Otros métodos tienen firmas diferentes: reduce también recibe un acumulador y una función de comparación para ordenar recibe dos valores que comparar.

Usa forEach para acciones

const letters = ["a", "b"];
const result = letters.forEach((letter, i) => {
  console.log(i + ": " + letter);
});
// Prints "0: a" and "1: b".
// result is undefined.

Mostrar texto es un efecto secundario: una acción que se realiza mientras se ejecuta la función de devolución de llamada. forEach descarta los valores de retorno de esa función y devuelve undefined. Usa map cuando necesites un array nuevo de resultados. Devolver un valor desde una función de devolución de llamada de forEach no cambia esa regla.

Un return en esta función termina solo la llamada actual; el método continúa con el siguiente elemento. No se puede usar break dentro de una función de devolución de llamada para salir de forEach. Elige for...of con break, o un método de búsqueda como find o some, cuando el trabajo posterior deba detenerse al encontrar una coincidencia.

Estos métodos no modifican por sí mismos el array original. La función de devolución de llamada aún puede mutarlo, por ejemplo mediante una asignación por índice o push. Mantener estas funciones centradas en su valor de retorno o en la acción prevista facilita razonar sobre lo que contendrá el array original después.

Elige un método de array según la forma del resultado. map produce un valor para cada elemento presente. filter conserva los elementos originales que cumplen una condición. Ambos devuelven arrays nuevos.

Transforma con map

const km = [1.5, 3, 0.25];
const meters = km.map(d => d * 1000);
// meters is [1500, 3000, 250]; km is unchanged.

El valor devuelto por la función de devolución de llamada se convierte en el elemento de la posición correspondiente. Para una entrada sin huecos hay una llamada por elemento y el resultado tiene la misma longitud. También funciona con elementos de tipo cadena: ["ana", "ben"].map(s => s.toUpperCase()) da ["ANA", "BEN"].

El segundo parámetro de la función de devolución de llamada proporciona el índice. ["Ana", "Ben"].map((name, i) => (i + 1) + ". " + name) construye ["1. Ana", "2. Ben"]. Si la función tiene un cuerpo de bloque, devuelve explícitamente el valor que se va a almacenar.

Selecciona con filter

const temps = [18, 21, 19, 24];
const warm = temps.filter(t => t > 20);
// warm is [21, 24]

filter conserva un elemento cuando la función de devolución de llamada devuelve un resultado verdadero en contexto booleano. Conserva el propio elemento, no el booleano devuelto por la función. Los valores conservados mantienen su orden original. El resultado puede contener todos los elementos, algunos o ninguno; temps.filter(t => t > 30) es [].

No devuelvas el propio elemento cuando cero sea un dato válido. [0, 5, 0, 3].filter(n => n) descarta ambos ceros porque son falsos en contexto booleano. Una condición como n !== null elimina las lecturas ausentes representadas por null y conserva el cero. Expresa la regla real para conservar un elemento.

Usar map con una condición que devuelve undefined para los elementos rechazados no los elimina. Esos resultados undefined siguen ocupando posiciones en el array nuevo.

Sigue una cadena de izquierda a derecha

[12, 7, 30, 4].filter(n => n >= 10).map(n => n / 2) primero crea [12, 30] y después [6, 15]. La segunda función de devolución de llamada solo recibe los elementos conservados. Filtrar antes de transformar es adecuado cuando la comprobación se refiere a los valores originales. Cambiar el orden puede cambiar lo que comprueba la condición.

Convierte texto numérico de forma deliberada

const numbers = "4,8,15".split(",").map(Number);
// numbers is [4, 8, 15]

Number recibe cada parte del texto y produce un número. Pasar parseInt directamente es una trampa: su segundo argumento es una base numérica, mientras que map proporciona ahí el índice. ["10", "10", "10"].map(parseInt) da [10, NaN, 2]. Usa map(s => parseInt(s, 10)) para fijar la base, o map(Number) para estas cadenas de números enteros.

Ni map ni filter sustituyen el original. temps.map(t => t + 1); por sí solo descarta el array recién calculado. Guárdalo, devuélvelo desde una función o úsalo en una cadena de métodos.

Algunas preguntas necesitan un valor, otras una posición o una respuesta de sí o no. Los métodos de búsqueda pueden detenerse una vez que se conoce esa respuesta. Elegir el tipo de retorno adecuado facilita escribir correctamente las condiciones posteriores.

Elige un valor o un índice

const temps = [18, 21, 19, 24];
console.log(temps.find(t => t > 20)); // 21
console.log(temps.findIndex(t => t > 20)); // 1
console.log(temps.findLast(t => t > 20)); // 24
console.log(temps.findLastIndex(t => t > 20)); // 3

find busca desde el principio y devuelve el primer elemento que coincide. findIndex devuelve su índice. Sus formas con Last buscan hacia atrás. Los cuatro se detienen cuando encuentran la coincidencia solicitada.

temps.find(t => t > 30) devuelve undefined; temps.findIndex(t => t > 30) devuelve -1. Antes de pasar un índice encontrado a splice, comprueba i !== -1. De lo contrario, splice(-1, 1) elimina el último elemento aunque no se haya encontrado ninguna coincidencia.

Conserva las coincidencias falsas en contexto booleano

[3, 0, 5].find(n => n < 1) devuelve 0, una coincidencia válida. if (result) la trata incorrectamente como un fallo porque cero es falso en contexto booleano. Para datos numéricos, result !== undefined distingue cero de la ausencia de coincidencia. Si un array puede contener undefined como valor coincidente, usa findIndex y compara el resultado con -1; el valor por sí solo no puede distinguir esos casos.

filter es adecuado cuando se necesitan todas las coincidencias. [5, 12, 8, 130].filter(n => n > 10) da [12, 130]; find devuelve solo 12. Obtener filter(...)[0] calcula todo el array de coincidencias antes de leer su primer valor.

Comprueba si alguno o todos cumplen

const scores = [72, 85, 49];
const anyFailed = scores.some(s => s < 50); // true
const allPassed = scores.every(s => s >= 50); // false

some se detiene en el primer acierto. every se detiene en el primer fallo. Sus respuestas son booleanos, no elementos. En estas llamadas, el 49 hace que some tenga éxito y que every falle.

Para un array vacío, some devuelve false porque nada cumple la condición. every devuelve true porque nada deja de cumplirla. Si un conjunto completo de resultados debe contener al menos una puntuación, combina las comprobaciones: scores.length > 0 && scores.every(s => s >= 50). La condición de longitud maneja el caso vacío; every comprueba los elementos.

Elige entre pertenencia exacta y una comprobación personalizada

includes("ana") busca exactamente ese valor. Una búsqueda que no distinga mayúsculas y minúsculas necesita una función de devolución de llamada: names.some(n => n.toLowerCase() === "ana"). Esta puede aceptar tanto «Ana» como «ANA». Usa includes para un valor conocido y una búsqueda con función de devolución de llamada cuando cada elemento deba comprobarse mediante una regla.

reduce lleva un acumulador de un elemento al siguiente. Su función de devolución de llamada devuelve el acumulador para el paso siguiente. Después del último elemento, el método devuelve ese valor final.

Sigue el cálculo de un total

const temps = [18, 21, 19, 24];
const total = temps.reduce((sum, t) => sum + t, 0);
// total is 82

El 0 es el acumulador inicial. La función de devolución de llamada recibe primero sum y después la temperatura actual t. La suma que devuelve se convierte en el primer argumento de la siguiente llamada.

Esta es la misma suma acumulada que en un bucle con let sum = 0. La función de devolución de llamada también tiene argumentos opcionales de índice y array después del acumulador y el elemento. Los nombres de los parámetros son flexibles, pero su orden es fijo.

Proporciona un valor inicial útil

Con un valor inicial, la reducción empieza en el primer elemento. Sin él, el primer elemento presente se convierte en el acumulador y las llamadas a la función de devolución de llamada empiezan con el siguiente elemento presente. En un array vacío, omitir el valor inicial lanza un TypeError. [].reduce((sum, n) => sum + n, 0) devuelve 0 sin error porque no se necesita ninguna llamada a la función de devolución de llamada.

El valor inicial también establece el tipo de resultado. Usa 0 para sumas o conteos y "" para texto. ["a", "b", "c"].reduce((text, s) => text + s.toUpperCase(), "") construye «ABC». Un total numérico que empieza con una cadena puede concatenar texto accidentalmente mediante +.

Cuenta y encuentra un valor extremo

const scores = [72, 85, 49];
const passed = scores.reduce(
  (count, s) => s >= 50 ? count + 1 : count,
  0
);
// passed is 2

Una puntuación aprobada suma uno; una no aprobada devuelve el conteo sin cambios. Cada rama proporciona el siguiente acumulador. Para un máximo, devuelve el valor mayor: [-3, -7, -1, -5].reduce((max, n) => n > max ? n : max, -Infinity) da -1. Empezar en cero sería incorrecto para esta lista de valores negativos. Una entrada vacía deja -Infinity, así que maneja ese resultado cuando se necesite un máximo real.

Devuelve un valor en cada ruta

Una función de devolución de llamada con bloque necesita return. (sum, n) => { sum + n; } devuelve undefined, así que el resultado final de la reducción es undefined. Una devolución omitida en algunas rutas también es peligrosa. En un conteo sobre [72, 49, 85], devolver un valor solo cuando se aprueba da primero 1, luego undefined en 49 y después NaN al sumar uno en 85. Devuelve el acumulador sin cambios cuando un elemento no aporte nada.

Combina operaciones sin ocultar la tarea

La suma de las puntuaciones aprobadas es scores.filter(s => s >= 50).reduce((sum, s) => sum + s, 0), que da 157. Un promedio necesita un conteo aparte: temps.reduce((sum, t) => sum + t, 0) / temps.length da 20,5 °C. Comprueba primero la longitud, porque una entrada vacía da NaN después de la división. Si una función de devolución de llamada empieza a hacer varias tareas sin relación, un bucle for...of puede mostrar con más claridad los resultados que cambian.

Ordenar establece un orden mediante la comparación de elementos. Invertir simplemente da la vuelta al orden existente. Ambas operaciones tienen métodos que modifican un array y métodos que crean una copia.

Comprende el orden predeterminado

[10, 9, 1, 100].sort() da [1, 10, 100, 9]. Sin una función de comparación, sort compara los elementos como cadenas, carácter por carácter, mediante unidades de código UTF-16. «100» empieza por «1», que va antes que «9». Los elementos almacenados siguen siendo números; solo la comparación usa su forma de texto.

Para las cadenas, este orden predeterminado también puede sorprender a los lectores. ["banana", "Cherry", "apple"].sort() da ["Cherry", "apple", "banana"], porque las mayúsculas ASCII van antes que las minúsculas. Las letras acentuadas pueden quedar separadas de las letras con las que los lectores las agrupan. Usa una comparación que tenga en cuenta el idioma para obtener un orden alfabético natural.

Devuelve el signo correcto

Una función de comparación recibe dos elementos, a y b. Un valor de retorno negativo coloca a antes de b; uno positivo lo coloca después de b; cero los trata como iguales para la ordenación.

const nums = [10, 9, 1, 100];
nums.sort((a, b) => a - b);
// nums is [1, 9, 10, 100]

Comparar 10 con 9 produce el valor positivo 1, así que 9 va antes que 10. Para orden numérico descendente, usa (a, b) => b - a. Devuelve un número con un signo significativo. (a, b) => a > b solo devuelve true o false, que se convierten en 1 o 0; nunca indica que a debe ir antes que b. Un comparador así produce un orden poco fiable.

La ordenación es estable: los elementos que se comparan como iguales conservan su orden relativo original. ["kiwi", "fig", "pear", "plum"].sort((a, b) => a.length - b.length) da ["fig", "kiwi", "pear", "plum"]. Las tres palabras de cuatro letras conservan su orden.

Elige entre mutación o copia

const sorted = scores.sort((a, b) => a - b); proporciona un segundo nombre para el mismo array, ahora ordenado. No conserva el orden anterior. Para obtener un array nuevo ordenado, usa scores.toSorted((a, b) => a - b) o crea una copia mediante propagación antes de sort.

[3, 1, 2].toReversed() da [2, 1, 3]. Es una secuencia invertida, no un orden numérico descendente. Para colocar primero los valores mayores, usa un comparador descendente u ordena de forma ascendente antes de invertir.

Comprueba los tipos antes de ordenar texto numérico

Los valores de split son cadenas. ["10", "9", "100"].sort() da ["10", "100", "9"]. La resta en un comparador convierte las cadenas numéricas durante la comparación, pero deja los elementos como cadenas. Convierte primero con map(Number) cuando los valores sean datos numéricos y después usa un comparador numérico. Esto también prepara los datos para sumas posteriores sin concatenar texto por accidente.

Las personas esperan que el orden del texto y el formato de los números sigan las convenciones de un idioma. Conserva los valores en formas fáciles de procesar, elige una configuración regional explícita para comparar texto y da formato a la salida final para el lector.

Compara texto con reglas regionales

a.localeCompare(b, locale) devuelve un número negativo cuando a va antes que b, uno positivo cuando va después y cero cuando se comparan como iguales. Solo se garantiza el signo, no un -1 o 1 exacto.

const names = ["Zoe", "Émile", "adam"];
const sorted = names.toSorted((a, b) => a.localeCompare(b, "en"));
// sorted is ["adam", "Émile", "Zoe"]

Una configuración regional es una etiqueta de idioma como «en», «de» o «sv». El alemán coloca «ä» antes de «z», mientras que el sueco la coloca después de «z». Pasa el idioma previsto de la página para que esa elección sea explícita. Sin una configuración regional, los ajustes predeterminados del entorno de ejecución deciden el orden.

Las comparaciones simples con < siguen comparando códigos de caracteres. Restar palabras produce NaN, que actúa como una comparación de igualdad al ordenar; no crea un orden alfabético.

Establece opciones de comparación útiles

Con { numeric: true }, las secuencias de dígitos se comparan numéricamente. Ordenar ["file10", "file2", "file1"] con (a, b) => a.localeCompare(b, "en", { numeric: true }) da ["file1", "file2", "file10"]. Una ordenación de texto sencilla coloca «file10» antes de «file2».

En inglés, { sensitivity: "base" } trata como iguales las variantes de mayúsculas y acentos, como «a», «A» y «á». Estas reglas dependen del idioma: el sueco trata «a» y «ä» como letras base diferentes. Usa la configuración regional prevista tanto para buscar coincidencias como para ordenar.

Para muchas comparaciones, reutiliza un comparador:

const collator = new Intl.Collator("en", { numeric: true });
const sorted = files.toSorted(collator.compare);

collator.compare ya es una función de comparación. Crearla una vez evita configurar repetidamente las mismas opciones regionales durante una ordenación grande.

Ordena las fechas antes de darles formato

Las cadenas YYYY-MM-DD de anchura fija colocan el año antes del mes y del día. Así, la ordenación de texto sigue el orden de las fechas: ["2026-03-15", "2025-11-02", "2026-01-20"].sort() da ["2025-11-02", "2026-01-20", "2026-03-15"].

El texto que empieza por el día, como «15/03/2026» y «20/01/2025», compara primero el día, por lo que puede colocar primero el año posterior. Almacena y ordena estas fechas en formato ISO y después produce el texto para mostrarlas al final.

Construye listas y números legibles

join(", ") usa el mismo separador en todas partes. Intl.ListFormat añade el conector final del idioma:

const list = new Intl.ListFormat("en-US", {
  style: "long", type: "conjunction"
});
list.format(["Ana", "Ben", "Cleo"]);
// "Ana, Ben, and Cleo"

«en-GB» produce «Ana, Ben and Cleo»; «nl» produce «Ana, Ben en Cleo». Una disyunción usa «or» en inglés. Dos nombres dan «Ana and Ben» sin coma.

(1234.5).toLocaleString("en-US") da «1,234.5», mientras que «de-DE» da «1.234,5». Estos resultados son cadenas. Ordena los datos numéricos antes de aplicar toLocaleString con map; dar formato primero sustituye los valores numéricos por texto cuya puntuación afecta a la ordenación de texto.

Una variable de array contiene una referencia a un array. Asignar esa variable a otro nombre comparte el array. La sintaxis de propagación puede crear un array exterior nuevo, combinar listas o pasar elementos como argumentos separados de una función.

Distingue la asignación de la copia

const a = [1, 2, 3];
const b = a;
b.push(4);
// a and b both refer to [1, 2, 3, 4].
console.log(a === b); // true

Hay un array con dos nombres. const no impide que se use cualquiera de los dos nombres para mutarlo. Un array exterior nuevo necesita una operación de copia real:

const c = [...a];
c.push(5);
// c is [1, 2, 3, 4, 5]; a stays [1, 2, 3, 4].
console.log(c === a); // false

Los tres puntos despliegan los elementos de a dentro de un literal de array nuevo. Omitirlos tiene un efecto distinto: [a] crea un array de un elemento cuyo elemento es el array completo a. [...a] contiene los elementos de a por separado.

Combina e inserta

[...[1, 2], ...[3, 4]] da [1, 2, 3, 4], igual que [1, 2].concat([3, 4]). [...first, 99, ...second] coloca un elemento adicional entre dos listas. [...list, "new"] crea un array ampliado, mientras que list.push("new") modifica el existente. La propagación conserva el orden de los elementos de cada entrada.

Reconoce una copia superficial

const grid = [[1, 2], [3, 4]];
const copy = [...grid];
copy[0].push(9);
// grid[0] and copy[0] are both [1, 2, 9].

Los arrays exteriores son distintos, pero sus elementos de fila siguen apuntando a los mismos arrays interiores. Esta es una copia superficial. Sustituir copy[0] por una fila nueva cambiaría solo el array exterior copiado; mutar la fila existente modifica la fila compartida. structuredClone(grid) crea una copia profunda independiente de estos arrays anidados.

Propaga valores en una llamada

Math.max(...[3, 9, 4]) proporciona tres argumentos separados y devuelve 9. Pasar el array directamente, Math.max([3, 9, 4]), proporciona un array y da NaN. Propagar un array vacío da Math.max(...[]) === -Infinity y Math.min(...[]) === Infinity.

Los arrays muy grandes pueden superar el límite de argumentos de un motor al propagarse en una llamada. No existe un número universal de elementos que sea seguro. Usa un bucle o reduce para encontrar un valor extremo en una entrada grande. La propagación en un literal de array no crea una lista de argumentos de función.

Propaga cadenas y actualiza copias

[..."hello"] produce cinco cadenas de letras. La propagación de cadenas visita puntos de código Unicode: [..."a😀"] tiene dos elementos, mientras que "a😀".split("") tiene tres unidades de código UTF-16. Algunos símbolos visibles combinan varios puntos de código, así que la propagación no es una forma general de contar caracteres visibles. Un número no es iterable; [...5] lanza un TypeError.

En una lista de parámetros, function total(...nums) usa resto para reunir argumentos en un array. La propagación en una llamada hace lo contrario: proporciona argumentos separados.

Para actualizaciones basadas en copias, [10, 20, 30].with(1, 25) da [10, 25, 30] y .toSpliced(1, 1) da [10, 30]. toSorted y toReversed también conservan el original. Son copias superficiales, así que se aplica la misma regla de que los arrays interiores se comparten.