Variables en JavaScript

Aprendé a declarar y usar variables en JS con let, const y var.

¿Qué es una Variable?

Una variable es un contenedor con nombre que guarda un valor en memoria. En JavaScript hay tres formas de declararlas. 

let nombre   = "Juan";
const PI     = 3.14159;
var contador = 0;
Regla general

Usá const por defecto. Si necesitás reasignar el valor, usá let. Evitá var — es obsoleto.

Mostrar resultados en la página

En PHP usás echo para mostrar texto. En JavaScript usás document.getElementById() para escribir en un elemento HTML de la página. 

// HTML: <p id="resultado"></p>

let nombre = "Juan";
document.getElementById("resultado").innerHTML = "Hola, " + nombre;
Probá el Ejemplo 1: Variables básicas
¿Por qué no console.log?

console.log() muestra en las DevTools del navegador — el alumno no lo ve. Con getElementById el resultado aparece directo en la página, igual que echo en PHP.

let, const y var

Keyword Se puede reasignar Scope Uso recomendado
let ✅ Sí Bloque Variables que cambian
const ❌ No Bloque Valores fijos
var ✅ Sí Función Evitar — legado 
let edad = 20;
edad = 21;        // ✅ OK — let se puede reasignar

const PAIS = "Argentina";
PAIS = "Brasil";  // ❌ Error — const no se puede reasignar
Probá el Ejemplo 2: let, const y var

Tipos de Datos

JavaScript detecta el tipo automáticamente según el valor asignado:

String

let nombre = "Juan";

Number

let edad = 25;

Boolean

let activo = true;

Array

let items = [1, 2, 3];

Object

let user = { nombre: "Ana" };

Null / Undefined

let x = null;

Operaciones Básicas

Concatenación y template literals

let nombre = "Carlos";
let edad   = 30;

// Con operador + (igual que en PHP)
document.getElementById("res1").innerHTML = "Hola " + nombre + ", tenés " + edad + " años";

// Con template literal — más limpio (similar a interpolación PHP)
document.getElementById("res2").innerHTML = `Hola ${nombre}, tenés ${edad} años`;
Probá el Ejemplo 3: Concatenación y template literals

Aritmética

let a = 10;
let b = 3;

let suma       = a + b;   // 13
let resta      = a - b;   // 7
let multi      = a * b;   // 30
let division   = a / b;   // 3.33...
let resto      = a % b;   // 1
let potencia   = a ** b;  // 1000

document.getElementById("resultado").innerHTML =
    `${a} + ${b} = ${suma} | ${a} - ${b} = ${resta} | ${a} * ${b} = ${multi}`;
Probá el Ejemplo 4: Aritmética

Ejemplo Completo

Calculando el precio final y mostrándolo en la página:

const producto  = "Laptop";
const precio    = 899.99;
const descuento = 0.15;
const cantidad  = 2;

let precioConDescuento = precio - (precio * descuento);
let total              = precioConDescuento * cantidad;

document.getElementById("producto").innerHTML = producto;
document.getElementById("original").innerHTML = "$" + precio;
document.getElementById("dcto").innerHTML     = (descuento * 100) + "%";
document.getElementById("final").innerHTML    = "$" + precioConDescuento.toFixed(2);
document.getElementById("total").innerHTML    = "$" + total.toFixed(2);
Probá el Ejemplo 5: Caso completo

Buenas Prácticas

  • Preferí const: si el valor no cambia, declaralo constante
  • camelCase: nombreUsuario, precioTotal — es el estándar en JS
  • Nombres descriptivos: cantidadProductos en vez de n
  • Template literals: usá backticks en vez de concatenar con +
  • Nunca var: tiene comportamientos raros por el hoisting — siempre let o const