Arrays y listas: guardar varios datos relacionados en una sola estructura

Aprende a usar arrays para agrupar varios valores, acceder a ellos por posición y recorrer listas simples con la base que ya tienes de bucles y funciones.

Hasta ahora has trabajado sobre valores sueltos: una edad, una nota, un total o un contador. El siguiente paso es aprender a guardar varios datos relacionados sin crear una variable distinta para cada uno.

Ahí entran los arrays: listas ordenadas que permiten agrupar valores y tratarlos como un conjunto.

Esta lección es clave porque abre la puerta a muchos problemas reales: tareas, notas, productos, nombres o cualquier secuencia de elementos relacionados.

Objetivo medible: crear un array simple, leer elementos por su posición y recorrer la lista con un bucle para mostrar sus valores.

  • Cuando tienes varios datos del mismo tipo o de la misma familia, un array evita llenar el programa de variables dispersas.
  • Si quieres guardar tres tareas, podrías crear `tarea1`, `tarea2` y `tarea3`. Pero esa estrategia se vuelve incómoda en cuanto la lista crece o cambia.
  • Un array permite reunir esos valores en una sola estructura y tratarlos como una lista ordenada.
  • Agrupa varios valores relacionados.
  • Mantiene un orden interno.

Por qué un array resuelve un problema real

Cuando tienes varios datos del mismo tipo o de la misma familia, un array evita llenar el programa de variables dispersas.

Si quieres guardar tres tareas, podrías crear `tarea1`, `tarea2` y `tarea3`. Pero esa estrategia se vuelve incómoda en cuanto la lista crece o cambia.

Un array permite reunir esos valores en una sola estructura y tratarlos como una lista ordenada.

  • Agrupa varios valores relacionados.
  • Mantiene un orden interno.
  • Se puede recorrer con bucles.
  • Escala mejor que crear muchas variables separadas.

Cómo se crea una lista simple

En esta fase basta con trabajar con arrays pequeños y claros, sin métodos avanzados.

Aquí `tareas` guarda tres valores relacionados en un único bloque lógico.

Lo importante no es solo la sintaxis de corchetes, sino entender que ahora el programa tiene una lista, no una sola pieza de información.

Posiciones e índices: cómo leer un elemento concreto

Cada valor de un array ocupa una posición numérica llamada índice.

En JavaScript el primer elemento suele empezar en el índice `0`. Eso puede chocar al principio, pero conviene interiorizarlo pronto porque reaparecerá muchas veces.

Aquí el alumno empieza a ver una idea muy importante: una lista no se recorre adivinando nombres, sino consultando posiciones.

Recorrer un array con un bucle

La combinación de arrays y bucles es una de las primeras herramientas realmente potentes del curso.

Aquí el bucle usa `i` como índice para ir leyendo una posición distinta de la lista en cada iteración.

Este ejemplo es especialmente importante porque une varias piezas del curso: variable de control, condición, repetición y acceso a una estructura con varios valores.

Errores comunes y tips al empezar con arrays

La mayoría de fallos iniciales vienen de confundir la lista completa con uno de sus elementos o de perder el control del índice.

  • Olvidar que el primer índice es `0`.
  • Intentar leer una posición que no existe.
  • Confundir `tareas` con `tareas[i]`.
  • Recorrer la lista sin comprobar el límite del bucle.
Fundamentos de Programación
11

Arrays y listas: guardar varios datos relacionados en una sola estructura

Aprende a usar arrays para agrupar varios valores, acceder a ellos por posición y recorrer listas simples con la base que ya tienes de bucles y funciones.

Código del tema: let tareas = ['Estudiar', 'Practicar', 'Repasar'];

📘 Teoría

Por qué un array resuelve un problema real

Cuando tienes varios datos del mismo tipo o de la misma familia, un array evita llenar el programa de variables dispersas.

Si quieres guardar tres tareas, podrías crear `tarea1`, `tarea2` y `tarea3`. Pero esa estrategia se vuelve incómoda en cuanto la lista crece o cambia.

Un array permite reunir esos valores en una sola estructura y tratarlos como una lista ordenada.

  • Agrupa varios valores relacionados.
  • Mantiene un orden interno.
  • Se puede recorrer con bucles.
  • Escala mejor que crear muchas variables separadas.

Cómo se crea una lista simple

En esta fase basta con trabajar con arrays pequeños y claros, sin métodos avanzados.

1

Aquí `tareas` guarda tres valores relacionados en un único bloque lógico.

2

Lo importante no es solo la sintaxis de corchetes, sino entender que ahora el programa tiene una lista, no una sola pieza de información.

Array de tareas
let tareas = ['Estudiar', 'Practicar', 'Repasar'];
console.log(tareas);

Posiciones e índices: cómo leer un elemento concreto

Cada valor de un array ocupa una posición numérica llamada índice.

1

En JavaScript el primer elemento suele empezar en el índice `0`. Eso puede chocar al principio, pero conviene interiorizarlo pronto porque reaparecerá muchas veces.

2

Aquí el alumno empieza a ver una idea muy importante: una lista no se recorre adivinando nombres, sino consultando posiciones.

Leer elementos por índice
let tareas = ['Estudiar', 'Practicar', 'Repasar'];

console.log(tareas[0]);
console.log(tareas[1]);
console.log(tareas[2]);

Recorrer un array con un bucle

La combinación de arrays y bucles es una de las primeras herramientas realmente potentes del curso.

1

Aquí el bucle usa `i` como índice para ir leyendo una posición distinta de la lista en cada iteración.

2

Este ejemplo es especialmente importante porque une varias piezas del curso: variable de control, condición, repetición y acceso a una estructura con varios valores.

Mostrar cada tarea de la lista
let tareas = ['Estudiar', 'Practicar', 'Repasar'];

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

Errores comunes y tips al empezar con arrays

La mayoría de fallos iniciales vienen de confundir la lista completa con uno de sus elementos o de perder el control del índice.

  • Olvidar que el primer índice es `0`.
  • Intentar leer una posición que no existe.
  • Confundir `tareas` con `tareas[i]`.
  • Recorrer la lista sin comprobar el límite del bucle.

🧭 Visuales clave

Array como lista ordenada con índices

Ayuda a comprender que un array agrupa varios valores relacionados y que cada uno se consulta mediante su índice dentro de la lista.

Diagrama didáctico que representa un array como una fila de casillas con índices y valores, junto a un bucle que recorre cada posición.

🧪 Aprende probando

Ejemplo Ejemplo guiado: lista de notas Agrupa varias notas en un único array y lee una posición concreta.
Ejemplo Ejemplo guiado: recorrer una lista de nombres Usa un bucle para mostrar todos los elementos de una lista simple.

🏁 Retos

Reto Reto: crea y recorre una lista de tareas Declara un array con tres tareas y recórrelo para mostrar cada una en consola.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Fundamentos de Programación.

Test de Fundamentos de Programación

¿Qué es esto?

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

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .