Todo lo esencial de JavaScript en una sola página, para consultar mientras programas. Cada fila muestra el código y lo que devuelve; si necesitas la explicación completa, sigue los enlaces de cada apartado.
Sintaxis, consola y Node.js
| Código | Qué hace |
|---|
console.log("Hola", 42) | Muestra valores en la consola: Hola 42 |
console.error("Fallo") | Muestra un mensaje de error (en rojo en el navegador) |
console.table([{ a: 1 }]) | Muestra un array de objetos como tabla |
// comentario | Comentario de una línea |
/* comentario */ | Comentario de varias líneas |
<script src="app.js" defer></script> | Carga un archivo JS en HTML cuando la página ya está leída |
node app.js | Ejecuta un archivo con Node.js en la terminal |
npm init -y | Crea package.json en un proyecto nuevo |
npm install express | Instala un paquete en node_modules |
debugger; | Pausa la ejecución si las herramientas del navegador están abiertas |
// Las instrucciones acaban en ; y los bloques van entre llaves
if (edad >= 18) {
console.log("Mayor de edad");
}
Más en: ¿Qué es JavaScript? · Node.js · Sintaxis · Depuración
Variables y tipos de datos
| Código | Qué hace |
|---|
const IVA = 0.21; | Constante: no se puede reasignar (úsala por defecto) |
let total = 0; | Variable que puedes reasignar |
var x = 1; | Forma antigua; evítala |
typeof 42 | "number" |
typeof "hola" | "string" |
typeof null | "object" (un fallo histórico del lenguaje) |
typeof [] | "object" |
Array.isArray([1, 2]) | true |
Number("42") | 42 |
Number("12abc") | NaN (no es un número) |
parseInt("12px") | 12 |
String(25) | "25" |
(3.14159).toFixed(2) | "3.14" (devuelve texto) |
Number.isNaN(NaN) | true |
0.1 + 0.2 | 0.30000000000000004 (decimales en binario) |
| Valores falsy (todo lo demás es truthy) |
|---|
false, 0, "", null, undefined, NaN |
Más en: Variables · Tipos de datos
Operadores
| Código | Resultado |
|---|
7 % 3 | 1 (resto) |
2 ** 10 | 1024 (potencia) |
7 / 2 | 3.5 |
x += 5 / x++ / x-- | Suma 5 / suma 1 / resta 1 |
"5" + 3 | "53" (con texto, + concatena) |
"5" - 3 | 2 (-, * y / convierten a número) |
5 == "5" | true (compara convirtiendo tipos) |
5 === "5" | false (igualdad estricta: úsala siempre) |
NaN === NaN | false |
"10" > "9" | false (compara texto letra a letra) |
true && "hola" | "hola" (Y lógico) |
0 || "por defecto" | "por defecto" (O lógico: salta con cualquier falsy) |
0 ?? "por defecto" | 0 (solo salta con null o undefined) |
edad >= 18 ? "adulto" : "menor" | Operador ternario: un if en una expresión |
usuario?.direccion?.calle | Encadenamiento opcional: undefined si falta algo |
config.color ??= "azul" | Asigna solo si vale null o undefined |
Más en: Operadores
Condicionales
| Código | Qué hace |
|---|
if (cond) { ... } | Ejecuta el bloque si cond es truthy |
else if (otra) { ... } | Comprueba otra condición si la anterior falló |
else { ... } | Se ejecuta si ninguna condición se cumple |
switch (valor) { case 1: ...; break; } | Compara con === contra varios casos |
default: | Caso de switch cuando ningún case coincide |
const msg = ok ? "Sí" : "No"; | Elige un valor según una condición |
const nota = 7.5;
if (nota >= 9) {
console.log("Sobresaliente");
} else if (nota >= 5) {
console.log("Aprobado"); // Aprobado
} else {
console.log("Suspenso");
}
Más en: if, else y switch
Bucles
| Código | Qué hace |
|---|
for (let i = 0; i < 5; i++) { ... } | Repite con un contador (0 a 4) |
while (cond) { ... } | Repite mientras se cumpla la condición |
do { ... } while (cond); | Igual, pero se ejecuta al menos una vez |
for (const x of array) { ... } | Recorre los valores de un array, string, Set o Map |
for (const clave in objeto) { ... } | Recorre las claves de un objeto |
array.forEach((x, i) => { ... }) | Ejecuta una función por elemento |
break | Sale del bucle |
continue | Salta a la siguiente vuelta |
const notas = [4, 8, 6];
let suma = 0;
for (const nota of notas) {
suma += nota;
}
console.log(suma / notas.length); // 6
Más en: Bucles
Funciones, ámbito y closures
| Código | Qué hace |
|---|
function sumar(a, b) { return a + b; } | Declaración de función (se puede usar antes de declararla) |
const sumar = function (a, b) { ... }; | Expresión de función |
const sumar = (a, b) => a + b; | Función flecha con retorno implícito |
const cuadrado = n => n * n; | Flecha con un solo parámetro |
const crear = () => ({ id: 1 }); | Flecha que devuelve un objeto (entre paréntesis) |
function saludar(nombre = "invitado") | Parámetro con valor por defecto |
function sumarTodo(...nums) | Parámetro rest: recoge los argumentos en un array |
[3, 1].map(n => n * 2) | Callback: pasas una función a otra |
Sin return | La función devuelve undefined |
let y const | Ámbito de bloque: solo existen dentro de sus { } |
function crearContador() {
let cuenta = 0; // la función interna la "recuerda"
return () => ++cuenta;
}
const siguiente = crearContador();
siguiente(); // 1
console.log(siguiente()); // 2
Más en: Funciones · Funciones avanzadas · Ámbito y closures
Cadenas y expresiones regulares
| Código | Resultado |
|---|
`Total: ${2 * 3} €` | "Total: 6 €" (plantilla con backticks) |
"hola".length | 4 |
"hola"[0] | "h" |
"hola".at(-1) | "a" (el último) |
"hola".toUpperCase() | "HOLA" |
" hola ".trim() | "hola" |
"JavaScript".includes("Script") | true |
"JavaScript".startsWith("Java") | true |
"banana".indexOf("a") | 1 (-1 si no está) |
"JavaScript".slice(0, 4) | "Java" (el final no se incluye) |
"JavaScript".slice(-6) | "Script" |
"a-b-c".split("-") | ["a", "b", "c"] |
"a-b-a".replace("a", "x") | "x-b-a" (solo la primera) |
"a-b-a".replaceAll("a", "x") | "x-b-x" |
"7".padStart(3, "0") | "007" |
"a".localeCompare("b") | -1 (sirve para ordenar texto) |
/^\d{5}$/.test("39001") | true (¿es un código postal?) |
"Tel: 942 123 456".match(/\d+/g) | ["942", "123", "456"] |
"2026-09-30".replace(/-/g, "/") | "2026/09/30" |
"uno dos tres".split(/\s+/) | ["uno", "dos", "tres"] |
| Regex | Significa |
|---|
\d / \w / \s | Dígito / letra, número o _ / espacio en blanco |
+ / * / ? / {2,4} | 1 o más / 0 o más / 0 o 1 / entre 2 y 4 |
^ / $ | Inicio / final del texto |
[aeiou] / [^0-9] | Uno de esos / cualquiera menos esos |
g / i | Todas las coincidencias / sin distinguir mayúsculas |
Más en: Cadenas · Expresiones regulares
Arrays y sus métodos
| Código | Resultado |
|---|
const frutas = ["pera", "kiwi"]; | Crea un array |
frutas.push("uva") | Añade al final (devuelve la nueva longitud) |
frutas.pop() | Quita y devuelve el último |
frutas.unshift("lima") / frutas.shift() | Añade / quita al principio |
frutas.splice(1, 1) | Borra 1 elemento en la posición 1 (modifica el array) |
[1, 2, 3].length | 3 |
[1, 2, 3].at(-1) | 3 |
[1, 2, 3].includes(2) | true |
["a", "b", "c"].indexOf("c") | 2 |
[1, 2, 3].join("-") | "1-2-3" |
[1, 2, 3, 4].slice(1, 3) | [2, 3] (copia, no modifica) |
[[1, 2], [3]].flat() | [1, 2, 3] |
Array.from({ length: 3 }, (_, i) => i * 2) | [0, 2, 4] |
[1, 2, 3].map(n => n * 2) | [2, 4, 6] |
[1, 2, 3, 4].filter(n => n % 2 === 0) | [2, 4] |
[1, 2, 3, 4].reduce((acc, n) => acc + n, 0) | 10 |
[5, 12, 8].find(n => n > 6) | 12 (undefined si no hay) |
[5, 12, 8].findIndex(n => n > 6) | 1 |
[1, 2, 3].some(n => n > 2) | true (¿alguno cumple?) |
[1, 2, 3].every(n => n > 0) | true (¿todos cumplen?) |
[10, 9, 100].sort() | [10, 100, 9] (ordena como texto) |
[10, 9, 100].sort((a, b) => a - b) | [9, 10, 100] |
[3, 1, 2].toSorted() | [1, 2, 3] (sin modificar el original) |
[3, 1, 2].with(0, 9) | [9, 1, 2] (copia con un cambio) |
Más en: Arrays · Métodos de arrays
Objetos, desestructuración, Set y Map
| Código | Resultado |
|---|
const alumno = { nombre: "Ana", nota: 8 }; | Crea un objeto |
alumno.nombre / alumno["nombre"] | "Ana" |
alumno.edad = 20 | Añade o cambia una propiedad |
delete alumno.edad | Borra una propiedad |
Object.keys({ a: 1, b: 2 }) | ["a", "b"] |
Object.values({ a: 1, b: 2 }) | [1, 2] |
Object.entries({ a: 1 }) | [["a", 1]] |
Object.hasOwn({ a: 1 }, "a") | true |
const { nombre, nota } = alumno; | Desestructura propiedades en variables |
const { nombre: n = "?" } = alumno; | Renombra y pone valor por defecto |
const [primero, ...resto] = [1, 2, 3]; | primero = 1, resto = [2, 3] |
[a, b] = [b, a] | Intercambia dos variables |
({ ...{ a: 1 }, b: 2 }) | { a: 1, b: 2 } (spread: copia y amplía) |
structuredClone(obj) | Copia profunda (también los objetos de dentro) |
new Set([1, 2, 2, 3]).size | 3 (sin repetidos) |
[...new Set([1, 2, 2, 3])] | [1, 2, 3] (quitar duplicados) |
conjunto.add(4) / .has(4) / .delete(4) | Añadir / comprobar / borrar en un Set |
const mapa = new Map([["a", 1]]); | Map: pares clave-valor con claves de cualquier tipo |
mapa.set("b", 2) / mapa.get("a") | Guardar / leer: 1 |
Más en: Objetos · Desestructuración · Set y Map
Errores y excepciones
| Código | Qué hace |
|---|
try { ... } | Código que puede fallar |
catch (error) { ... } | Se ejecuta si hay un error; error.message tiene el texto |
finally { ... } | Se ejecuta siempre, haya error o no |
throw new Error("Stock insuficiente") | Lanza tu propio error |
error.name | Tipo de error: "TypeError", "RangeError"… |
class ErrorValidacion extends Error {} | Crea tu propio tipo de error |
ReferenceError | Usas una variable que no existe |
TypeError | Operación imposible, p. ej. null.length |
SyntaxError | Código mal escrito, p. ej. JSON.parse("{mal}") |
try {
JSON.parse("{mal}");
} catch (error) {
console.log(error.name); // SyntaxError
} finally {
console.log("Fin"); // Fin
}
Más en: Errores · Depuración
Math, números y fechas
| Código | Resultado |
|---|
Math.round(2.5) | 3 |
Math.floor(2.7) | 2 (redondea hacia abajo) |
Math.ceil(2.1) | 3 (redondea hacia arriba) |
Math.trunc(-2.7) | -2 (quita decimales) |
Math.max(3, 9, 1) | 9 |
Math.min(...[3, 9, 1]) | 1 (con un array, usa spread) |
Math.floor(Math.random() * 6) + 1 | Entero aleatorio del 1 al 6 |
(12345.5).toLocaleString("es-ES", { style: "currency", currency: "EUR" }) | "12.345,50 €" |
new Date() | Fecha y hora actuales |
new Date(2026, 0, 15) | 15 de enero de 2026 (¡los meses empiezan en 0!) |
new Date(2026, 0, 15).getMonth() | 0 (enero) |
new Date(2026, 0, 15).getDay() | 4 (jueves; 0 es domingo) |
new Date(2026, 0, 15).getFullYear() | 2026 |
fecha.setDate(fecha.getDate() + 30) | Suma 30 días |
new Date(2026, 0, 15).toLocaleDateString("es-ES") | "15/1/2026" |
fecha.toISOString() | Formato estándar en UTC: "2026-09-30T10:00:00.000Z" |
(fecha2 - fecha1) / 86400000 | Días entre dos fechas |
Más en: Math · Fechas
Clases, módulos y JSON
| Código | Qué hace |
|---|
class Producto { ... } | Define una clase |
constructor(nombre) { this.nombre = nombre; } | Se ejecuta al hacer new |
const p = new Producto("Taza"); | Crea un objeto de la clase |
#stock = 0; | Propiedad privada: solo accesible dentro de la clase |
get precioConIva() { ... } | Getter: se lee como una propiedad, sin () |
static crearVacio() { ... } | Método de la clase, no de cada objeto |
class Libro extends Producto { ... } | Herencia |
super(nombre) | Llama al constructor del padre |
export function sumar() {} | Exporta desde un módulo |
export default class Carrito {} | Exportación por defecto (una por archivo) |
import { sumar } from "./utilidades.js"; | Importa algo con nombre |
import Carrito from "./carrito.js"; | Importa lo exportado por defecto |
JSON.stringify({ a: 1, b: [true, null] }) | '{"a":1,"b":[true,null]}' |
JSON.stringify(obj, null, 2) | JSON con sangría de 2 espacios |
JSON.parse('{"a":1}').a | 1 |
JSON.stringify({ a: undefined, f() {} }) | '{}' (se pierden funciones y undefined) |
Más en: Clases y POO · Módulos · JSON
DOM, eventos y navegador
| Código | Qué hace |
|---|
document.querySelector(".tarjeta") | Primer elemento que encaja con el selector CSS (o null) |
document.querySelectorAll("li") | Todos los que encajan (NodeList, admite forEach) |
document.getElementById("menu") | Elemento por su id |
el.textContent = "Hola" | Cambia el texto (seguro) |
el.innerHTML = "<b>Hola</b>" | Cambia el HTML (nunca con datos del usuario) |
el.classList.add("activo") | Añade una clase (remove, toggle, contains) |
document.createElement("li") | Crea un elemento nuevo |
lista.append(li) / lista.prepend(li) | Lo inserta al final / al principio |
el.remove() | Borra el elemento de la página |
boton.addEventListener("click", fn) | Ejecuta fn al hacer clic |
evento.target | Elemento que originó el evento |
evento.preventDefault() | Anula la acción por defecto (enviar, seguir un enlace) |
"input" / "change" / "submit" / "keydown" | Eventos habituales de formularios y teclado |
input.value | Lo que ha escrito el usuario (siempre texto) |
new FormData(formulario) | Recoge todos los campos de un formulario |
input.checkValidity() | true si cumple required, pattern, etc. |
formulario.addEventListener("submit", (evento) => {
evento.preventDefault();
const datos = Object.fromEntries(new FormData(formulario));
console.log(datos.email);
});
| Temporizadores y almacenamiento | Qué hace |
|---|
setTimeout(fn, 2000) | Ejecuta fn una vez dentro de 2 segundos |
const id = setInterval(fn, 1000) | Ejecuta fn cada segundo |
clearInterval(id) / clearTimeout(id) | Detiene el temporizador |
localStorage.setItem("tema", "oscuro") | Guarda un texto en el navegador (persiste) |
localStorage.getItem("tema") | "oscuro" (null si no existe) |
localStorage.removeItem("tema") | Borra una clave |
localStorage.setItem("carrito", JSON.stringify(carrito)) | Guarda arrays u objetos como JSON |
JSON.parse(localStorage.getItem("carrito")) ?? [] | Los recupera con un valor por defecto |
navigator.clipboard.writeText("texto") | Copia al portapapeles (devuelve una promesa) |
Más en: El DOM · Modificar el DOM · Eventos · Formularios · Temporizadores · localStorage · APIs del navegador
Asincronía, fetch y APIs
| Código | Qué hace |
|---|
new Promise((resolve, reject) => { ... }) | Crea una promesa |
promesa.then(fn).catch(fn).finally(fn) | Reacciona al resultado o al error |
async function cargar() { ... } | Función asíncrona: siempre devuelve una promesa |
const datos = await promesa; | Espera el resultado (solo dentro de async o en módulos) |
await Promise.all([p1, p2]) | Espera a varias promesas en paralelo |
const res = await fetch(url); | Hace una petición HTTP (GET) |
res.ok / res.status | true si el código es 200-299 / código HTTP |
await res.json() | Convierte la respuesta JSON en objeto |
fetch(url, { method: "POST", headers, body }) | Envía datos (con body: JSON.stringify(obj)) |
app.get("/api/productos", (req, res) => res.json(lista)) | Ruta de una API REST con Express |
async function cargarUsuarios() {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/users");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const usuarios = await res.json();
console.log(usuarios.length); // 10
} catch (error) {
console.error("No se pudo cargar:", error.message);
}
}
Más en: Asincronía · fetch y async/await · Proyecto: una app · TypeScript · Express · API REST