Haz que la página responda.

Declara una variable que puede recibir otro valor.

Cuándo usarlo

Para estados que cambian.

Cuándo evitarlo

No uses let si la referencia nunca se reasigna.

let contador = 0;
contador += 1;

Declara una referencia que no se puede reasignar.

Cuándo usarlo

Como opción habitual para valores y referencias estables.

Cuándo evitarlo

No significa que un objeto o array sea inmutable.

const persona = { nombre: "Ana" };
persona.nombre = "Luis";

Declaración antigua con alcance de función y hoisting.

Cuándo usarlo

Para comprender código existente.

Cuándo evitarlo

En código nuevo suele ser preferible let o const.

function ejemplo() { var numero = 1; }

Primitivos y objetos definen qué operaciones tienen sentido.

Cuándo usarlo

Distingue string, number, boolean, undefined, null, bigint y symbol.

Cuándo evitarlo

No asumas que typeof null devuelve null: devuelve object.

typeof "hola"; // "string"
typeof 42; // "number"

Comparación estricta sin conversión implícita de tipo.

Cuándo usarlo

Para comparaciones predecibles.

Cuándo evitarlo

Dos objetos distintos no son iguales aunque sus propiedades coincidan.

5 === "5"; // false

Transforma explícitamente valores.

Cuándo usarlo

Al leer entradas de formularios.

Cuándo evitarlo

Number("") es 0; valida también el texto vacío.

const numero = Number("42");
Number.isNaN(numero); // false

Texto entre acentos graves con interpolación.

Cuándo usarlo

Para construir mensajes.

Cuándo evitarlo

No confundir interpolación con escapar HTML.

const nombre = "Ana";
console.log(`Hola, ${nombre}`);

Combinan condiciones o eligen valores alternativos.

Cuándo usarlo

?? conserva 0, false y cadena vacía.

Cuándo evitarlo

|| reemplaza cualquier valor falsy, no solo null.

const cantidad = 0;
console.log(cantidad ?? 10); // 0

Ejecuta ramas según una condición.

Cuándo usarlo

Para decisiones de lógica.

Cuándo evitarlo

Evita condiciones difíciles de leer o asignaciones accidentales.

if (edad >= 18) { console.log("Mayor"); } else { console.log("Menor"); }

Elige una rama entre casos con comparación estricta.

Cuándo usarlo

Cuando hay varios casos discretos.

Cuándo evitarlo

Sin break puede continuar al siguiente caso.

switch (tipo) {
  case "html": console.log("Estructura"); break;
  default: console.log("Otro");
}

Bucle con inicio, condición y actualización.

Cuándo usarlo

Para repetir con índice.

Cuándo evitarlo

Una condición que no termina bloquea la ejecución.

for (let i = 0; i < 3; i++) console.log(i);

Recorre valores de un iterable.

Cuándo usarlo

Para arrays, strings y otras colecciones iterables.

Cuándo evitarlo

No sirve directamente para objetos planos.

for (const nombre of ["Ana", "Luis"]) console.log(nombre);

Repite mientras una condición siga siendo verdadera.

Cuándo usarlo

Cuando no conoces el número de repeticiones.

Cuándo evitarlo

Actualiza el estado para evitar bucles infinitos.

let n = 0;
while (n < 3) { n++; }

Declara una operación reutilizable y puede devolver un resultado.

Cuándo usarlo

Para separar responsabilidades.

Cuándo evitarlo

return termina la función; sin retorno explícito devuelve undefined.

function sumar(a, b) { return a + b; }
console.log(sumar(2, 3));

Sintaxis breve y this léxico.

Cuándo usarlo

Para callbacks y funciones pequeñas.

Cuándo evitarlo

No reemplaza métodos que necesitan su propio this ni constructores.

const duplicar = numero => numero * 2;

Alcance en que un identificador es accesible.

Cuándo usarlo

Para mantener variables cerca de su uso.

Cuándo evitarlo

let y const dentro de un bloque no existen fuera de él.

{ const secreto = 1; }
// secreto no está disponible aquí.

Una función conserva acceso al entorno donde se creó.

Cuándo usarlo

Para estado privado y callbacks.

Cuándo evitarlo

No confundas el entorno capturado con una copia congelada del valor.

function crearContador() {
  let n = 0;
  return () => ++n;
}

Colección ordenada de valores.

Cuándo usarlo

Para listas, resultados y registros.

Cuándo evitarlo

Los índices empiezan en 0; length no es el último índice.

const temas = ["HTML", "CSS", "JS"];
console.log(temas[0]);

Devuelve un nuevo array transformando cada elemento.

Cuándo usarlo

Para producir otra colección.

Cuándo evitarlo

Si solo haces efectos secundarios usa forEach.

[1, 2, 3].map(n => n * 2); // [2, 4, 6]

Devuelve elementos que pasan una condición.

Cuándo usarlo

Para búsquedas y filtros.

Cuándo evitarlo

No transforma el contenido de cada elemento.

[1, 2, 3, 4].filter(n => n % 2 === 0);

Devuelve la primera coincidencia o undefined.

Cuándo usarlo

Para encontrar un elemento.

Cuándo evitarlo

No es un array de todas las coincidencias.

[2, 5, 8].find(n => n > 4); // 5

Acumula un resultado recorriendo una colección.

Cuándo usarlo

Para sumas u otras agregaciones claras.

Cuándo evitarlo

No lo uses si un bucle resulta mucho más legible.

[2, 3, 4].reduce((total, n) => total + n, 0);

Ordena el array en el lugar.

Cuándo usarlo

Con comparador para números.

Cuándo evitarlo

Sin comparador convierte valores para ordenar como texto.

[10, 2, 30].sort((a, b) => a - b);

Agrupa propiedades con claves.

Cuándo usarlo

Para representar una entidad o configuración.

Cuándo evitarlo

No confundas copia superficial con copia profunda.

const curso = { titulo: "HTML", nivel: 1 };
console.log(curso.titulo);

Extrae propiedades o expande colecciones.

Cuándo usarlo

Para código breve con nombres claros.

Cuándo evitarlo

spread copia un nivel; los objetos anidados siguen compartidos.

const { titulo } = curso;
const copia = { ...curso };

Map asocia claves a valores; Set conserva valores únicos.

Cuándo usarlo

Para diccionarios o eliminar duplicados.

Cuándo evitarlo

No son equivalentes directos a objetos o arrays en JSON.

const unicos = [...new Set([1, 1, 2])];

Formato de datos; parse convierte texto y stringify produce texto.

Cuándo usarlo

Para intercambio y almacenamiento.

Cuándo evitarlo

No uses eval para interpretar JSON; parse puede lanzar errores.

const datos = JSON.parse('{"nombre":"Ana"}');

Busca el primer elemento que coincide con un selector CSS.

Cuándo usarlo

Para conectar una interacción con HTML.

Cuándo evitarlo

Puede devolver null; revisa la existencia antes de usarlo.

const boton = document.querySelector("button");

Devuelve una NodeList estática de coincidencias.

Cuándo usarlo

Para aplicar lógica a varios elementos.

Cuándo evitarlo

No es un array ni se actualiza al insertar elementos nuevos.

document.querySelectorAll("button").forEach(b => console.log(b));

Lee o asigna texto de un nodo.

Cuándo usarlo

Para insertar texto y datos externos.

Cuándo evitarlo

No interpreta etiquetas HTML; eso suele ser una ventaja.

document.querySelector("p").textContent = "Hola";

Añade, quita o alterna clases de CSS.

Cuándo usarlo

Para reflejar estados sin mezclar estilos extensos en JS.

Cuándo evitarlo

Cambiar una clase no cambia aria-expanded automáticamente.

panel.classList.toggle("activo");

Registra una función para un evento.

Cuándo usarlo

Para click, input, submit y teclado.

Cuándo evitarlo

Usa elementos nativos y evita registrar duplicados sin necesidad.

boton.addEventListener("click", () => console.log("Click"));

El evento aporta contexto; preventDefault cancela su acción por defecto si es cancelable.

Cuándo usarlo

Para gestionar un formulario con JavaScript.

Cuándo evitarlo

No impide la propagación; eso es otro comportamiento.

form.addEventListener("submit", event => {
  event.preventDefault();
});

Crean e insertan nodos.

Cuándo usarlo

Cuando necesitas contenido dinámico.

Cuándo evitarlo

Para estructura repetida, una plantilla HTML facilita mantenimiento.

const p = document.createElement("p");
p.textContent = "Resultado";
document.body.append(p);

Accede a atributos data-* como cadenas.

Cuándo usarlo

Para relacionar controles con información propia.

Cuándo evitarlo

No lo uses para secretos ni olvides convertir números.

const id = boton.dataset.id;

Representa un resultado futuro pendiente, resuelto o rechazado.

Cuándo usarlo

Para operaciones asíncronas.

Cuándo evitarlo

No equivale a ejecutar trabajo pesado en otro hilo.

Promise.resolve(42).then(valor => console.log(valor));

Permite escribir operaciones asíncronas con una secuencia clara.

Cuándo usarlo

Para esperar promesas dentro de funciones async.

Cuándo evitarlo

await no bloquea todo el navegador, pero las operaciones síncronas pesadas sí pueden hacerlo.

async function cargar() {
  const valor = await Promise.resolve(42);
  return valor;
}

API web que solicita un recurso por red.

Cuándo usarlo

Para APIs y archivos públicos.

Cuándo evitarlo

Un HTTP 404 no rechaza por sí solo la promesa: comprueba response.ok.

const response = await fetch("datos.json");
if (!response.ok) throw new Error("No disponible");
const datos = await response.json();

Gestiona errores y limpieza.

Cuándo usarlo

Para operaciones que pueden fallar.

Cuándo evitarlo

No ocultes errores sin explicar qué puede hacer el usuario.

try { JSON.parse("incorrecto"); }
catch (error) { console.log(error.message); }

Programa un callback tras una demora mínima.

Cuándo usarlo

Para acciones diferidas.

Cuándo evitarlo

No garantiza ejecutar exactamente en ese milisegundo.

setTimeout(() => console.log("Después"), 500);

Espera varias promesas y rechaza si una falla.

Cuándo usarlo

Para consultas independientes en paralelo.

Cuándo evitarlo

Si necesitas resultados parciales considera allSettled.

const valores = await Promise.all([Promise.resolve(1), Promise.resolve(2)]);

Comparte código entre módulos.

Cuándo usarlo

Para separar funcionalidades grandes.

Cuándo evitarlo

En el navegador requiere script type=module y rutas válidas.

export function sumar(a, b) { return a + b; }

Define una estructura para crear objetos con métodos.

Cuándo usarlo

Cuando varias instancias comparten comportamiento.

Cuándo evitarlo

No hace falta una clase para cada función pequeña.

class Contador {
  constructor() { this.valor = 0; }
  sumar() { this.valor++; }
}

API web de almacenamiento local como cadenas.

Cuándo usarlo

Para preferencias o estado local sencillo.

Cuándo evitarlo

No para contraseñas; puede fallar o no estar disponible.

localStorage.setItem("tema", "claro");
const tema = localStorage.getItem("tema");

Muestra información de depuración.

Cuándo usarlo

Para observar valores durante el aprendizaje.

Cuándo evitarlo

No sustituye mensajes de interfaz ni publiques datos sensibles.

console.log("Resultado:", 2 + 3);