JavaScript: variables, tipos y conversiones

Hasta ahora hemos trabajado la estructura y la apariencia de una interfaz: qué significa cada bloque, cómo se lee y cómo se ordena visualmente. Pero una interfaz moderna no solo muestra contenido. También responde a datos, calcula resultados, valida entradas y cambia según lo que hace el usuario.

Ahí entra JavaScript. Y antes de hablar de eventos, formularios o componentes, necesitamos entender algo básico: los datos. Una interfaz recibe texto, números, respuestas, estados y decisiones. Si no sabemos guardar y transformar esos datos, el comportamiento se vuelve frágil.

En este capítulo veremos variables, tipos y conversiones. Parece un tema pequeño, pero es una de las causas más frecuentes de errores en estudiantes: sumar textos como si fueran números, comparar valores sin entender su tipo o guardar en una variable algo que luego cambia de sentido.

Qué aprenderás hoy

• Diferenciar let y const.
• Reconocer tipos comunes en JavaScript: string, number, boolean, null, undefined, object y array.
• Usar typeof para inspeccionar valores.
• Convertir valores de formularios antes de calcular.
• Evitar errores comunes de coerción automática.

Variables: guardar información con intención

Una variable es un nombre que usamos para guardar un valor. En una interfaz, ese valor puede ser el nombre de un usuario, el precio de un producto, el estado de un botón o el resultado de un cálculo.

const nombreCurso = "Desarrollo de Interfaces";
let estudiantesInscritos = 24;
let cursoPublicado = true;

console.log(nombreCurso);
console.log(estudiantesInscritos);
console.log(cursoPublicado);

Usamos const cuando no vamos a reasignar la variable. Usamos let cuando el valor puede cambiar. Esta diferencia ayuda a que el código comunique intención.

const precioBase = 120;
let descuento = 0;

descuento = 20;

const precioFinal = precioBase - descuento;
console.log(precioFinal);

precioBase no cambia. descuento sí podría cambiar según una promoción, una categoría de estudiante o un cupón. Elegir bien entre const y let no es un detalle estético: mejora la lectura y reduce errores.

Tipos de datos básicos

JavaScript tiene distintos tipos de valores. Para empezar en interfaces, estos son los más importantes:

• string: texto, como "Enrique" o "120".
• number: números, como 120 o 19.5.
• boolean: verdadero o falso: true o false.
• undefined: una variable declarada sin valor.
• null: ausencia intencional de valor.
• object: estructura con propiedades.
• array: lista de valores, técnicamente un tipo especial de objeto.

const titulo = "JavaScript para interfaces";
const precio = 90;
const publicado = true;
let portada;
const docente = null;
const curso = {
  nombre: "JavaScript",
  nivel: "básico"
};
const temas = ["variables", "tipos", "conversiones"];

console.log(typeof titulo);
console.log(typeof precio);
console.log(typeof publicado);
console.log(typeof portada);
console.log(typeof docente);
console.log(typeof curso);
console.log(Array.isArray(temas));

Observa un detalle curioso: typeof null devuelve "object". Es una rareza histórica del lenguaje. Por eso, cuando necesites saber si un valor es una lista, usa Array.isArray().

El problema: los formularios entregan texto

Supongamos que tienes un formulario para calcular el total de una compra. El usuario escribe cantidad y precio. Aunque el campo sea type="number", cuando lees su valor con JavaScript obtienes un string.

<form class="price-form">
  <label for="price">Precio</label>
  <input id="price" name="price" type="number" value="20">

  <label for="quantity">Cantidad</label>
  <input id="quantity" name="quantity" type="number" value="3">

  <button type="submit">Calcular</button>
</form>

<p id="result"></p>

const priceInput = document.querySelector("#price");
const quantityInput = document.querySelector("#quantity");

console.log(typeof priceInput.value);
console.log(typeof quantityInput.value);

Ambos valores son texto. Eso puede sorprender, pero es normal: el DOM entrega el valor de un input como cadena. Si vas a calcular, conviértelo.

Conversión explícita con Number

La forma más clara para convertir a número es hacerlo de manera explícita:

const price = Number(priceInput.value);
const quantity = Number(quantityInput.value);
const total = price * quantity;

console.log(total);

El operador de multiplicación fuerza conversión en muchos casos, pero no conviene depender de magia. En interfaces, la claridad vale oro: si necesitas un número, conviértelo a número.

const a = "20";
const b = "3";

console.log(a + b);           // "203"
console.log(Number(a) + Number(b)); // 23

Ejemplo mejorado: calculadora simple de interfaz

Ahora construyamos un ejemplo más completo. La interfaz tomará precio y cantidad, convertirá los valores, validará el resultado y mostrará un mensaje claro.

const form = document.querySelector(".price-form");
const priceInput = document.querySelector("#price");
const quantityInput = document.querySelector("#quantity");
const result = document.querySelector("#result");

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const price = Number(priceInput.value);
  const quantity = Number(quantityInput.value);

  if (!Number.isFinite(price) || !Number.isFinite(quantity)) {
    result.textContent = "Revisa los valores ingresados.";
    return;
  }

  if (price <= 0 || quantity <= 0) {
    result.textContent = "El precio y la cantidad deben ser mayores que cero.";
    return;
  }

  const total = price * quantity;
  result.textContent = `Total: S/ ${total.toFixed(2)}`;
});

Este ejemplo ya tiene varias decisiones profesionales: convierte de forma explícita, valida que el número sea finito, evita valores menores o iguales a cero y formatea el resultado con dos decimales.

Variante profesional: separar lectura, conversión y renderizado

Cuando el código crece, conviene separar responsabilidades. Una función puede leer datos, otra convertir, otra validar y otra mostrar el resultado.

function readFormData() {
  return {
    price: document.querySelector("#price").value,
    quantity: document.querySelector("#quantity").value
  };
}

function toPurchaseData(rawData) {
  return {
    price: Number(rawData.price),
    quantity: Number(rawData.quantity)
  };
}

function calculateTotal(purchase) {
  return purchase.price * purchase.quantity;
}

function renderResult(message) {
  document.querySelector("#result").textContent = message;
}

Separar el código hace que sea más fácil probar, explicar y mantener. También prepara el camino para capítulos posteriores: eventos, funciones, arrays, objetos y CRUD.

Buenas prácticas

• Usa const por defecto y let solo cuando el valor deba cambiar.
• Elige nombres claros: price, quantity, total.
• Convierte datos de formularios antes de calcular.
• Usa Number.isFinite() para validar resultados numéricos.
• No dependas de conversiones automáticas si puedes ser explícito.
• Separa lectura de datos, conversión, cálculo y renderizado.

Reto práctico

Conclusión

Variables, tipos y conversiones son el primer puente entre una pantalla estática y una interfaz que piensa con datos. Si entiendes que un input entrega texto, que una variable debe tener intención y que una conversión debe ser explícita, evitarás muchos errores desde el inicio.

JavaScript no empieza con grandes aplicaciones. Empieza con decisiones pequeñas: qué valor guardo, qué tipo tiene, cuándo cambia y cómo lo convierto. En el siguiente capítulo usaremos esa base para trabajar condicionales: decisiones de interfaz según lo que ocurre con los datos.

Fuentes consultadas

• MDN Web Docs: let
• MDN Web Docs: const
• MDN Web Docs: JavaScript data types and data structures
• MDN Web Docs: typeof
• MDN Web Docs: Number