¿En una lista de tareas, debes eliminar la completada en índice 3 sin alterar lógica externa. Qué enfoque es más predecible?

Evitar huecos y mutaciones ambiguas mejora trazabilidad del estado.

Arrays en JavaScript: listas con estructura y control

Aprende a crear, leer, recorrer y modificar arrays entendiendo índices, longitud y mutación para construir lógica de listas sin errores comunes.

¿Cuánto sabes de JavaScript?

📘 Teoría

Fundamentos: índice, orden y longitud

Los arrays empiezan en índice 0: esta regla cambia todo el recorrido.

El primer elemento de un array está en `arr[0]`, y la propiedad `length` indica cuántos elementos hay, no el último índice.

Cuando accedes a un índice fuera de rango obtienes `undefined`, así que conviene validar límites al recorrer o consultar posiciones.

Índice inicial: `0`.
Último índice: `length - 1`.
`length` no devuelve el último índice.
Índice inválido => `undefined`.

Lectura por índice

const frutas = ['manzana', 'pera', 'uva'];

console.log(frutas[0]);
console.log(frutas[2]);
console.log(frutas.length);
console.log(frutas[10]);

Mutación controlada con métodos básicos

`push/pop/shift/unshift` modifican el array original.

Estos métodos son muy útiles en colas, pilas y gestión básica de listas. Lo importante es saber que alteran el array sobre el que actúan.

Si en el futuro necesitas inmutabilidad, verás alternativas con spread y métodos que crean copias.

push

pop

unshift

shift

Ejemplo de cola

const cola = ['Ana', 'Luis'];

cola.push('Marta');
const atendido = cola.shift();

console.log('Atendido:', atendido);
console.log('Cola:', cola);

Recorrer arrays con `for` y `for...of`

Elige recorrido según necesites índice o solo valor.

`for` clásico te permite controlar índice, paso y condiciones de parada con precisión.

`for...of` simplifica lectura cuando solo necesitas el valor de cada elemento.

Dos formas de iterar

const tareas = ['estudiar', 'practicar', 'repasar'];

for (let i = 0; i < tareas.length; i++) {
  console.log(i, tareas[i]);
}

for (const tarea of tareas) {
  console.log('tarea:', tarea);
}

Patrones diarios con arrays

Primer/último, acumulación y búsqueda básica son patrones transversales.

Estas operaciones aparecen constantemente en features reales: mostrar primero/último, contar elementos, sumar importes o verificar existencia.

Dominar estos patrones te deja preparado para `map`, `filter` y `reduce` en el siguiente nivel.

Primer elemento: `arr[0]`.
Último: `arr[arr.length - 1]` o `arr.at(-1)`.
Suma acumulada: `let total = 0` + bucle.
Existencia: `includes` / posición: `indexOf`.

Acumulación básica

const gastos = [12, 5, 8, 20];
let total = 0;

for (const gasto of gastos) {
  total += gasto;
}

console.log('Total gastos:', total);

Higiene de arrays para evitar bugs

Valida límites y evita mutaciones accidentales innecesarias.

Cuando una lista viene de usuario o API, asume que puede estar vacía o incompleta. Comprueba longitud antes de acceder a índices críticos.

Durante depuración, imprimir `length`, índice y valor suele revelar el error en segundos.

1 Fundamentos: índice, orden y longitud 2 Mutación controlada con métodos básicos 3 Recorrer arrays con `for` y `for...of` 4 Patrones diarios con arrays 5 Higiene de arrays para evitar bugs

🧭 Visuales clave

Arrays en JavaScript

Refuerza acceso por indice, transformacion y recorrido de colecciones.

Representacion de listas indexadas y operaciones sobre arrays

Array como lista ordenada

Refuerza la lectura basica de lista, indice y recorrido, justo la base que esta leccion quiere consolidar.

Diagrama de un array como varias casillas con indice y un bucle que recorre sus posiciones

🧪 Aprende probando

Ejemplo Ejemplo guiado: alta y baja de elementos Observa cómo cambian los datos con `push` y `pop`.

⌄

Ejemplo Ejemplo guiado: acumulación con bucle Suma valores de un array usando patrón acumulador clásico.

⌄

Ejemplo Demo interactiva: mini lista dinámica Añade y elimina elementos para visualizar estado actual del array en tiempo real.

⌄

Ejemplo Demo interactiva: métodos mutadores y reindexado Visualiza cómo `push`, `pop`, `shift`, `unshift`, `sort` y `reverse` cambian el array y sus índices en cada acción.

⌄