Variables en JavaScript: modelar datos con criterio

Aprende a usar `const` y `let` correctamente, entender tipos básicos y evitar errores comunes de conversión para escribir lógica más segura desde el inicio.

En JavaScript, casi todo problema se reduce a gestionar datos: guardarlos, transformarlos y verificar que tienen el tipo correcto.

Por eso variables y tipos no son teoría suelta; son la base de condicionales, funciones, arrays, formularios y APIs.

En esta lección vas a entrenar hábitos que evitan bugs silenciosos: elegir bien entre `const` y `let`, inspeccionar tipos y nombrar variables con claridad.

Meta práctica: dejar de programar por intuición y empezar a programar con datos explícitos y confiables.

  • Una variable representa estado real de tu aplicación en un momento concreto.
  • Un precio, un usuario autenticado o el número de elementos en un carrito son datos que cambian con la interacción. Las variables capturan ese estado para que tu lógica pueda trabajar con él.
  • Si el dato está mal modelado o mal nombrado, la lógica se vuelve confusa y aparecen errores que cuestan tiempo en depuración.
  • Usa `const` por defecto y `let` solo cuando haya reasignación necesaria.
  • `const` protege de reasignaciones accidentales y comunica estabilidad. `let` expresa intención de cambio en el flujo.

Variables como modelo de realidad

Una variable representa estado real de tu aplicación en un momento concreto.

Un precio, un usuario autenticado o el número de elementos en un carrito son datos que cambian con la interacción. Las variables capturan ese estado para que tu lógica pueda trabajar con él.

Si el dato está mal modelado o mal nombrado, la lógica se vuelve confusa y aparecen errores que cuestan tiempo en depuración.

`const` y `let` en trabajo real

Usa `const` por defecto y `let` solo cuando haya reasignación necesaria.

`const` protege de reasignaciones accidentales y comunica estabilidad. `let` expresa intención de cambio en el flujo.

Esta disciplina reduce bugs y mejora lectura colaborativa: quien revisa el código entiende rápido qué valores son estables y cuáles evolucionan.

  • `const` para configuración, etiquetas y resultados fijos.
  • `let` para contadores, acumuladores y estado de interfaz.
  • Evita `var` en código nuevo.
  • Si dudas, empieza por `const` y cambia a `let` solo si hace falta.

Tipos primitivos que debes reconocer

Reconocer tipos rápido te ahorra horas de debugging.

En básico usarás sobre todo `string`, `number`, `boolean`, `undefined` y `null`. Cada uno se comporta diferente en operaciones y comparaciones.

`typeof` es tu herramienta de inspección inmediata cuando sospechas que un dato no es lo que esperabas.

  • `string`: texto (`'Ana'`).
  • `number`: enteros y decimales (`42`, `3.5`).
  • `boolean`: `true` o `false`.
  • `undefined`: variable declarada sin valor.
  • `null`: ausencia de valor intencional.

Interpolación con template literals

Construye mensajes legibles sin concatenación frágil.

Usar backticks y `${}` mejora claridad para logs, textos de interfaz y resumen de cálculos.

Esto evita cadenas largas con `+` que suelen introducir errores de formato y lectura.

Coerción y conversiones: evita sorpresas

Cuando mezclas tipos, JavaScript puede convertir por ti y no siempre como esperas.

`'2' + 2` produce `'22'` porque el operador `+` con string concatena. En cambio `'2' * 2` produce `4` por conversión numérica implícita.

En entradas de usuario y formularios, convierte explícitamente con `Number(...)` antes de operar.

JavaScript
05

Variables en JavaScript: modelar datos con criterio

Aprende a usar `const` y `let` correctamente, entender tipos básicos y evitar errores comunes de conversión para escribir lógica más segura desde el inicio.

Código del tema: const · let · tipos

📘 Teoría

Variables como modelo de realidad

Una variable representa estado real de tu aplicación en un momento concreto.

Un precio, un usuario autenticado o el número de elementos en un carrito son datos que cambian con la interacción. Las variables capturan ese estado para que tu lógica pueda trabajar con él.

Si el dato está mal modelado o mal nombrado, la lógica se vuelve confusa y aparecen errores que cuestan tiempo en depuración.

1

Qué guardar

2

Dónde usar

3

Qué evitar

4

Resultado

`const` y `let` en trabajo real

Usa `const` por defecto y `let` solo cuando haya reasignación necesaria.

`const` protege de reasignaciones accidentales y comunica estabilidad. `let` expresa intención de cambio en el flujo.

Esta disciplina reduce bugs y mejora lectura colaborativa: quien revisa el código entiende rápido qué valores son estables y cuáles evolucionan.

  • `const` para configuración, etiquetas y resultados fijos.
  • `let` para contadores, acumuladores y estado de interfaz.
  • Evita `var` en código nuevo.
  • Si dudas, empieza por `const` y cambia a `let` solo si hace falta.

Tipos primitivos que debes reconocer

Reconocer tipos rápido te ahorra horas de debugging.

En básico usarás sobre todo `string`, `number`, `boolean`, `undefined` y `null`. Cada uno se comporta diferente en operaciones y comparaciones.

`typeof` es tu herramienta de inspección inmediata cuando sospechas que un dato no es lo que esperabas.

  • `string`: texto (`'Ana'`).
  • `number`: enteros y decimales (`42`, `3.5`).
  • `boolean`: `true` o `false`.
  • `undefined`: variable declarada sin valor.
  • `null`: ausencia de valor intencional.

Interpolación con template literals

Construye mensajes legibles sin concatenación frágil.

1

Usar backticks y `${}` mejora claridad para logs, textos de interfaz y resumen de cálculos.

2

Esto evita cadenas largas con `+` que suelen introducir errores de formato y lectura.

Coerción y conversiones: evita sorpresas

Cuando mezclas tipos, JavaScript puede convertir por ti y no siempre como esperas.

1

`'2' + 2` produce `'22'` porque el operador `+` con string concatena. En cambio `'2' * 2` produce `4` por conversión numérica implícita.

2

En entradas de usuario y formularios, convierte explícitamente con `Number(...)` antes de operar.

🧭 Visuales clave

Variables en JavaScript

Apoyo visual para entender declaracion, reasignacion y alcance basico de variables.

Diagrama de declaracion y uso de variables en JavaScript

Variable como caja de estado

Refuerza la idea mas importante del nivel basico: una variable no es solo sintaxis, sino una forma de representar estado.

Esquema visual que presenta una variable como nombre, valor actual y cambio de estado dentro del programa

🧪 Aprende probando

Ejemplo Ejemplo guiado: `const` y `let` en un flujo simple Distingue dato estable y dato mutable en una secuencia de acciones.
Ejemplo Ejemplo guiado: auditoría de tipos Comprueba tipos en consola para validar datos antes de operar.
Ejemplo Demo interactiva: fundamentos de JavaScript en una sola vista Abre una demo amplia con variables, tipos, operadores y flujo básico para reforzar conceptos de esta primera etapa.
Ejemplo Demo interactiva: variables vivas con `let` y `const` Cambia nombre, color y tamaño para ver qué datos se mantienen estables y cuáles se reasignan durante la interacción.

🏁 Retos

Reto Reto 1: ficha de producto con cálculo Declara variables y construye salida clara con template literal.
Reto Reto 2: diagnóstico de tipos con `typeof` Declara variables de distintos tipos y valida cada una en consola.

¿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