learning-front

Nivel 2 · JavaScript: fundamentos del lenguaje

Variables y tipos: let, const y los primitivos

Declarar valores, entender los tipos básicos y por qué casi nunca usarás var.

Ya sabes qué es HTML y qué es CSS: la estructura y el aspecto de una página. Ahora llega la tercera capa: JavaScript, que añade el comportamiento. Qué pasa cuando el usuario hace clic, qué datos se muestran, cómo se actualizan sin recargar la página. Todo eso es JS.

Este capítulo no empieza por eventos ni por el DOM. Empieza por lo más básico: guardar un valor con un nombre. Sin eso, no hay programa posible.

Seguimos con el Overwatch Team Builder. Vamos a declarar las variables de un héroe y a mostrarlo por consola. La consola de aquí abajo es la misma que la pestaña Consola de las DevTools del navegador (F12): ya la conoces.

Qué es una variable#

Una variable es una caja con nombre que guarda un valor. Le pones una etiqueta, metes algo dentro y luego la usas por ese nombre.

javascript
// declara una variable llamada nombre con el valor 'Tracer'
const nombre = 'Tracer';
// Tracer — ahora puedes usar ese nombre en cualquier parte del código
console.log(nombre);

Tres partes:

  • const — la palabra clave que le dice a JavaScript cómo declarar la variable (luego vemos let y var).
  • nombre — el identificador que eliges tú. Puede ser casi cualquier palabra, sin espacios.
  • 'Tracer' — el valor que guardas.

A partir de aquí, cada vez que escribas nombre en tu código, JavaScript sabe que se refiere a 'Tracer'.

const: por defecto#

const es la forma de declarar una variable cuyo valor no va a cambiar. Una vez asignado, no puedes reasignarlo:

javascript
// declara partidas y le asigna 120; a partir de aquí no puede cambiar
const partidas = 120;
// TypeError: no se puede reasignar una constante
partidas = 150;

Esto es una ventaja, no un límite. Si declaras algo como const y más adelante alguien intenta cambiarlo por accidente, JavaScript lanza un error en ese preciso momento. El bug no se esconde: aparece enseguida.

La regla de trabajo: empieza siempre con const. Cambia a let solo cuando de verdad necesites reasignar el valor.

let: cuando el valor cambia#

let permite reasignar la variable después de declararla:

javascript
// declara estado con el valor inicial 'disponible'
let estado = 'disponible';
// reasigna: ahora estado vale 'lesionada'
estado = 'lesionada';
// lesionada
console.log(estado);

Cuándo usarla: cuando el valor evoluciona con el tiempo. Un contador que sube, un estado que cambia entre partidas, una posición que se actualiza. Si el valor es fijo, es const.

var: legacy#

var existe desde los orígenes de JavaScript. Aún funciona, pero tiene dos comportamientos que sorprenden cuando el código crece:

  • No respeta los bloques. Un bloque es cualquier trozo de código encerrado entre llaves { }. let y const quedan confinados dentro del bloque donde los declaras; var, en cambio, los ignora y se extiende al ámbito que lo rodea. Esto produce variables que “se escapan” y aparecen donde no las esperas:
javascript
// Un bloque se delimita con llaves { }.
{
  // var declarada dentro del bloque
  var escapada = 'var vive fuera del bloque';
  // let declarada dentro del bloque
  let confinada = 'let vive solo dentro del bloque';
}

// Aquí estamos FUERA del bloque { } de arriba.
// var escapada — se lee sin problema: se escapó del bloque
console.log('var desde fuera: ' + escapada);
// let confinada no existe aquí: daría ReferenceError si intentaras leerla
// console.log(confinada); // ReferenceError: confinada is not defined
  • Sufre hoisting: JavaScript mueve la declaración al principio del bloque más amplio que la contiene, de forma que puedes usar la variable antes de declararla. El valor es undefined hasta que llegas a la línea de asignación, lo que puede confundir:
javascript
// Hoisting con var: la declaración sube, pero no el valor
// undefined — no da error, pero el valor no está
console.log('antes de declarar: ' + posicion);
// la asignación ocurre aquí
var posicion = 'primer puesto';
// primer puesto
console.log('despues de declarar: ' + posicion);

El código moderno no usa var. Lo verás en código antiguo o en tutoriales desactualizados. Aquí lo mencionamos para que lo reconozcas, no para que lo uses.

Los conceptos de alcance (scope) y hoisting se ven a fondo en un capítulo posterior. Por ahora, la regla práctica basta: const por defecto, let cuando necesitas reasignar, var nunca.

Los tipos primitivos#

Cada valor que guardas en una variable tiene un tipo: qué clase de dato es. JavaScript tiene cinco tipos primitivos que necesitas conocer ahora:

string — texto entre comillas simples o dobles:

javascript
// string con comillas simples
const rol = 'Apoyo';
// string con comillas dobles; ambas formas son válidas
const saludo = "Hola desde el equipo";
// Apoyo
console.log(rol);
// Hola desde el equipo
console.log(saludo);

number — cualquier número, entero o decimal. JavaScript no distingue entre los dos: todos son number:

javascript
// número entero
const partidas = 120;
// número decimal — sigue siendo type number, no "float" ni "decimal"
const winrate = 0.65;
// 120
console.log(partidas);
// 0.65
console.log(winrate);

boolean — solo dos valores posibles: true o false. Sin comillas; si les pones comillas, son strings:

javascript
// boolean: el héroe está activo en el equipo
const activo = true;
// boolean: el héroe no ha sido eliminado esta ronda
const eliminado = false;
// true
console.log(activo);
// false
console.log(eliminado);

null — ausencia deliberada. Lo usas cuando quieres dejar claro que “aquí no hay dato” por decisión propia:

javascript
// null: el héroe no tiene sponsor todavía (decisión consciente)
const sponsor = null;
// null
console.log(sponsor);

undefined — la variable existe, pero no se le ha dado ningún valor todavía. JavaScript lo asigna automáticamente cuando declaras sin valor:

javascript
// no se asignó ningún valor; JS la inicializa a undefined
let sustituta;
// undefined
console.log(sustituta);

La diferencia entre null y undefined es de intención. undefined aparece solo; null lo pones tú. Si ves undefined donde esperabas un valor, suele ser un bug. Si ves null, alguien lo puso ahí a propósito.

Existen también bigint (números enteros muy grandes, fuera del alcance de este capítulo) y symbol (identificadores únicos, para uso avanzado). No los necesitarás hasta mucho más adelante.

typeof: ver el tipo de un valor#

typeof es un operador que devuelve el tipo de un valor como string:

javascript
// 'string'  — texto entre comillas
console.log(typeof 'Tracer');
// 'number'  — entero o decimal, siempre 'number'
console.log(typeof 120);
// 'boolean' — true o false
console.log(typeof true);
// 'undefined' — sin valor asignado
console.log(typeof undefined);
// 'object'  — error histórico de JS; null es primitivo, no objeto
console.log(typeof null);

Úsalo para inspeccionar valores cuando no estás seguro del tipo que tienes. La forma más directa de usarlo es envolviéndolo en console.log, como en el playground de abajo: lo ves impreso y puedes confirmar que el tipo es el que esperabas antes de seguir trabajando.

console.log con concatenación#

Ya conoces console.log de las DevTools. En JavaScript lo usas para mostrar valores y seguir la pista de tu código:

javascript
// Heroe: Tracer
console.log('Heroe: ' + nombre);
// Partidas: 120
console.log('Partidas: ' + partidas);

Regla importante en este entorno: no separes argumentos con comas. console.log('Rol:', rol) genera dos entradas separadas en la consola de aquí abajo. Para que salga una sola línea, concatena con +:

javascript
// una sola línea: "Rol: Apoyo"
console.log('Rol: ' + rol);

Más adelante aprenderás los template literals (${}), que hacen esto más cómodo. Por ahora, concatenación: es lo que corresponde a este punto del curso.

Pruébalo#

Aquí tienes las variables de Tracer declaradas, con concatenación y typeof. Cambia el valor de nombre o de partidas y mira cómo se actualiza la consola. Prueba también a cambiar const por let en alguna variable y luego reasignarla.

Comprueba lo que sabes#

Pregunta 1 de 5

¿Cuál es la diferencia principal entre const y let?

Tu turno#

Lo que se entiende leyendo no es lo mismo que lo que sabes escribir. Declara las variables de Mercy y muestra el resumen en consola. Cuando lo tengas (o si te atascas), despliega las soluciones y fíjate en el salto de un nivel al siguiente.

Ejercicio · en esta página

Declara tu primer héroe

Declara las variables del héroe Mercy y muestra en consola cada campo por separado y luego una línea de resumen concatenada. Datos: nombre Mercy, rol Apoyo, partidas 200, victorias 130, activo true.

Paso 1: Que funcione

  • Los cinco campos aparecen en consola con los valores correctos.
  • La línea de resumen concatenada es correcta.
  • Vale con var y nombres cortos.
Ver soluciones 
// ════════════════════════════════════════════════════════════════════════════
// NIVEL OK — "funciona"
//
// Enfoque base: variables declaradas con var, nombres cortos y poco
// descriptivos. Funciona: los valores son correctos y aparecen en consola.
//
// Sus límites (los que arregla el nivel "Mejor"):
//   - var tiene un alcance de función, no de bloque. En el código de arriba
//     puede colarse sin avisar donde no la esperas (hoisting). No es el problema
//     aquí, pero es el hábito que queremos evitar desde el principio.
//   - Los nombres (a, b, c…) no se leen solos: obligan a recordar qué guarda
//     cada variable.
//   - Usa let para todo, incluso cuando nada se reasigna jamás. El compilador
//     no puede ayudarte a detectar un cambio accidental.
// Aun así: los valores son los correctos y la consola muestra todo. Eso vale
// como OK.
// ════════════════════════════════════════════════════════════════════════════

// nombre del héroe (string)
var a = "Mercy";
// rol en el equipo (string)
var b = "Apoyo";
// total de partidas jugadas (number)
var c = 200;
// total de victorias (number)
var d = 130;
// el héroe está activo en el equipo (boolean)
var e = true;

// muestra el nombre del héroe
console.log("Heroe: " + a);
// muestra el rol
console.log("Rol: " + b);
// muestra el total de partidas
console.log("Partidas: " + c);
// muestra el total de victorias
console.log("Victorias: " + d);
// muestra si el héroe está activo
console.log("Activo: " + e);
// línea de resumen concatenada
console.log(
  "Resumen: " + a + " (" + b + ") — " + c + " partidas, " + d + " victorias",
);

Por qué este nivel

  • Funciona: los valores son correctos y aparecen en consola. Ese es el primer requisito de cualquier solución.
  • Usa var, que tiene un alcance de función y un comportamiento de hoisting que sorprende cuando el código crece. No es el problema aquí, pero es el hábito que queremos evitar desde el principio.
  • Los nombres (a, b, c) no se leen solos: obligan a recordar qué guarda cada variable. En un fichero real, con decenas de variables, eso cuesta tiempo y errores.