{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Variables y estado: guardar información para que el programa pueda pensar

Aprende qué es una variable, cómo representa estado dentro de un programa y cómo usar nombres y cambios de valor de forma clara para no perderte al empezar.

Hasta ahora has aprendido a ver programas como flujos. El siguiente paso natural es entender dónde guarda el programa la información que necesita para seguir ese flujo.

Ahí entran las variables: nombres que apuntan a valores y que permiten representar estado dentro del programa.

Si comprendes bien esta idea desde el principio, más adelante te costará mucho menos trabajar con condicionales, funciones, listas y objetos.

Objetivo medible: declarar variables simples, explicar qué valor representan y seguir cómo cambian a lo largo de un pequeño programa.

  • Una variable no es magia ni una palabra obligatoria: es una forma de dar nombre a un dato para poder usarlo después.
  • Si un programa necesita recordar un nombre, una puntuación, un total o el número de intentos de un usuario, necesita guardar esa información en algún sitio lógico. Esa es la función de una variable.
  • Al empezar, conviene usar un modelo mental muy práctico: piensa en una variable como una etiqueta que apunta a un valor actual del programa.
  • La variable tiene nombre.
  • El valor es el contenido actual.

Qué es una variable de verdad

Una variable no es magia ni una palabra obligatoria: es una forma de dar nombre a un dato para poder usarlo después.

Si un programa necesita recordar un nombre, una puntuación, un total o el número de intentos de un usuario, necesita guardar esa información en algún sitio lógico. Esa es la función de una variable.

Al empezar, conviene usar un modelo mental muy práctico: piensa en una variable como una etiqueta que apunta a un valor actual del programa.

  • La variable tiene nombre.
  • El valor es el contenido actual.
  • Ese contenido puede mantenerse o cambiar según el caso.
  • El nombre debería explicar qué representa.

Estado: lo que el programa sabe en un momento concreto

Hablar de estado es hablar de los datos actuales con los que el programa está trabajando.

Si una app de tareas sabe cuántas tareas hay, ese dato forma parte de su estado. Si un contador marca 3 clics, ese 3 también es estado.

Entender esto te ayuda a dejar de ver las variables como piezas aisladas y empezar a verlas como la memoria mínima que necesita el programa para seguir funcionando.

Declarar, leer y actualizar una variable

En esta fase no necesitas memorizar muchas reglas: necesitas ver claramente cuándo nace una variable, qué valor tiene y cómo cambia.

Aquí lo importante no es solo la sintaxis de `let`, sino entender que el programa empieza con un valor y después trabaja con otro distinto.

Ese cambio de valor es el primer contacto real con el estado mutable del programa.

Nombrar bien una variable ya es una decisión técnica

Un mal nombre te obliga a adivinar; un buen nombre te ahorra tiempo de lectura y depuración.

  • Mejor `totalCompra` que `x`.
  • Mejor `usuarioActivo` que `dato1`.
  • Mejor `intentosLogin` que `contador` si el contexto importa.
  • Evita nombres vagos que podrían significar cualquier cosa.

Errores comunes al empezar con variables

La mayoría de fallos iniciales no vienen de conceptos difíciles, sino de pequeñas confusiones repetidas.

La mejor defensa contra estos errores es muy sencilla: declarar poco, observar mucho y cambiar una sola cosa cada vez.

  • Confundir el nombre de la variable con el valor que contiene.
  • Actualizar un valor sin darte cuenta del orden del programa.
  • Usar nombres tan genéricos que luego no sabes qué guardan.
  • No comprobar con consola qué valor tiene una variable en cada paso.
Fundamentos de Programación
04

Variables y estado: guardar información para que el programa pueda pensar

Aprende qué es una variable, cómo representa estado dentro de un programa y cómo usar nombres y cambios de valor de forma clara para no perderte al empezar.

¿Cuánto sabes de Fundamentos de Programación?

Código del tema: let estado = valor

📘 Teoría

Qué es una variable de verdad

Una variable no es magia ni una palabra obligatoria: es una forma de dar nombre a un dato para poder usarlo después.

Si un programa necesita recordar un nombre, una puntuación, un total o el número de intentos de un usuario, necesita guardar esa información en algún sitio lógico. Esa es la función de una variable.

Al empezar, conviene usar un modelo mental muy práctico: piensa en una variable como una etiqueta que apunta a un valor actual del programa.

  • La variable tiene nombre.
  • El valor es el contenido actual.
  • Ese contenido puede mantenerse o cambiar según el caso.
  • El nombre debería explicar qué representa.

Estado: lo que el programa sabe en un momento concreto

Hablar de estado es hablar de los datos actuales con los que el programa está trabajando.

Si una app de tareas sabe cuántas tareas hay, ese dato forma parte de su estado. Si un contador marca 3 clics, ese 3 también es estado.

Entender esto te ayuda a dejar de ver las variables como piezas aisladas y empezar a verlas como la memoria mínima que necesita el programa para seguir funcionando.

1

Nombre

Puede guardar el texto actual de un usuario o producto.

2

Contador

Puede guardar cuántas veces ocurre una acción.

3

Total

Puede guardar un cálculo provisional o final.

4

Estado de interfaz

Más adelante podrá representar si algo está abierto, cerrado o cargando.

Declarar, leer y actualizar una variable

En esta fase no necesitas memorizar muchas reglas: necesitas ver claramente cuándo nace una variable, qué valor tiene y cómo cambia.

1

Aquí lo importante no es solo la sintaxis de `let`, sino entender que el programa empieza con un valor y después trabaja con otro distinto.

2

Ese cambio de valor es el primer contacto real con el estado mutable del programa.

Variable simple con cambio de estado
let intentos = 0;
console.log('Intentos al empezar:', intentos);

intentos = 1;
console.log('Intentos después del primer fallo:', intentos);

Nombrar bien una variable ya es una decisión técnica

Un mal nombre te obliga a adivinar; un buen nombre te ahorra tiempo de lectura y depuración.

  • Mejor `totalCompra` que `x`.
  • Mejor `usuarioActivo` que `dato1`.
  • Mejor `intentosLogin` que `contador` si el contexto importa.
  • Evita nombres vagos que podrían significar cualquier cosa.

Errores comunes al empezar con variables

La mayoría de fallos iniciales no vienen de conceptos difíciles, sino de pequeñas confusiones repetidas.

La mejor defensa contra estos errores es muy sencilla: declarar poco, observar mucho y cambiar una sola cosa cada vez.

  • Confundir el nombre de la variable con el valor que contiene.
  • Actualizar un valor sin darte cuenta del orden del programa.
  • Usar nombres tan genéricos que luego no sabes qué guardan.
  • No comprobar con consola qué valor tiene una variable en cada paso.

🧭 Visuales clave

Variable como caja de estado

Ayuda a comprender que una variable representa un dato actual del programa y que ese dato puede actualizarse con el tiempo.

Diagrama didáctico que representa una variable como una caja etiquetada con un valor que puede cambiar con el flujo del programa.

🧪 Aprende probando

Ejemplo Ejemplo guiado: contador básico Observa cómo una variable representa el estado actual de un contador sencillo.
⌄
Ejemplo Ejemplo guiado: total de compra Una variable puede representar un valor con sentido real dentro del programa.
⌄

🏁 Retos

Reto Reto: modela el estado de un marcador Crea una variable que represente la puntuación de un jugador y actualízala una vez.
⌄

🧰 Recursos

Enlaces útiles

MDN: Binding MDN: What is JavaScript? Chrome DevTools Overview Visual Studio Code Fira Code
Test

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

Test de Fundamentos de Programación
Recursos del curso 15
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards
‹
Lección 03
Secuencia, errores y traza: aprender a leer lo que realmente ejecuta el programa
Lección 05
Tipos de datos básicos: elegir bien qué guarda cada variable
›

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