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.

Un array representa una colección ordenada de datos, y esa idea aparece en casi cualquier producto: tareas, mensajes, productos o resultados de API.

Trabajar bien con arrays no es memorizar métodos: es entender índices, tamaño, recorrido y efectos de mutación.

En esta lección vas a practicar patrones que luego usarás en DOM dinámico, filtros y transformaciones más avanzadas.

Objetivo: razonar listas con precisión y evitar errores típicos de inicio.

  • 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`.

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`.

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.

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.

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`.

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.

JavaScript
13

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.

Código del tema: [] · índice · length · push/pop

📘 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`.

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.

1

push

2

pop

3

unshift

4

shift

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

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

1

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

2

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

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`.

Higiene de arrays para evitar bugs

Valida límites y evita mutaciones accidentales innecesarias.

1

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.

2

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

🧭 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.

🏁 Retos

Reto Reto 1: sumar un array numérico Recorre un array de números y calcula total acumulado.
Reto Reto 2: primer y último elemento Accede al inicio y al final del array usando índices correctos.

🧰 Recursos

CodePen: patrones y calidad JS
Abrir en CodePen

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com