Chuleta de JavaScript
Una referencia de JavaScript moderno, buscable e imprimible: sintaxis, arrays, cadenas, objetos, async/await, DOM y funciones de ES2022+. Gratis.
Variables y tipos
10let x = 1;
Variable reasignable de ámbito de bloque
const PI = 3.14;
Constante de ámbito de bloque
typeof value
Devuelve el tipo como string
Number('42')
Convierte un string a número
String(42)
Convierte un valor a string
parseInt('42px', 10)
Parsea un entero inicial (base 10)
Boolean(0)
Convierte un valor a true/false
value ?? 'default'
Fusión nullish (solo null/undefined)
a?.b?.c
Encadenamiento opcional, corta en null
Array.isArray(x)
Comprueba si un valor es un array
Funciones
9function add(a, b) { return a + b; }
Declaración de función con nombre
const add = (a, b) => a + b;
Función flecha con retorno implícito
const f = (a = 1) => a;
Valor de parámetro por defecto
function f(...args) {}
Parámetros rest agrupados en un array
f(...arr)
Expande un array en argumentos
const { a, b } = obj;
Desestructuración de objetos
const [x, y] = arr;
Desestructuración de arrays
(function(){})()
Función autoinvocada (IIFE)
fn.bind(this)
Fija un contexto this
Strings
10`Hello ${name}`
Interpolación con template literals
str.length
Número de caracteres
str.includes('a')
Comprueba si existe una subcadena
str.slice(0, 3)
Extrae parte de un string
str.replace(/a/g, 'b')
Reemplaza coincidencias (regex)
str.split(',')
Divide en un array
str.trim()
Elimina espacios al inicio y fin
str.toUpperCase()
Convierte a mayúsculas
str.padStart(3, '0')
Rellena el inicio hasta una longitud
str.at(-1)
Carácter en un índice (admite negativos)
Arrays
11arr.map(x => x * 2)
Transforma cada elemento
arr.filter(x => x > 0)
Conserva los elementos que coinciden
arr.reduce((a, b) => a + b, 0)
Reduce a un único valor
arr.find(x => x.id === 1)
Primer elemento que coincide
arr.some(x => x > 0)
true si algún elemento coincide
arr.every(x => x > 0)
true si todos coinciden
arr.includes(3)
Comprueba si hay un valor
arr.sort((a, b) => a - b)
Orden numérico ascendente
[...new Set(arr)]
Elimina valores duplicados
arr.flat(Infinity)
Aplana arrays anidados por completo
arr.at(-1)
Último elemento (índice negativo)
Objetos
9Object.keys(obj)
Array de claves propias enumerables
Object.values(obj)
Array de valores propios
Object.entries(obj)
Array de pares [clave, valor]
{ ...a, ...b }
Fusiona objetos (spread)
Object.assign({}, a, b)
Copia/fusiona en un destino
Object.freeze(obj)
Hace inmutable un objeto
{ [key]: value }
Nombre de propiedad calculado
obj.hasOwnProperty('x')
Comprueba una propiedad propia
structuredClone(obj)
Clona un objeto en profundidad
Async y promesas
9async function f() {}
Declara una función async
await fetch(url)
Pausa hasta que se resuelve una promesa
Promise.all([p1, p2])
Espera a que todas se resuelvan
Promise.allSettled([p1, p2])
Espera a que todas se completen
Promise.race([p1, p2])
Resuelve con la primera en completarse
new Promise((res, rej) => {})
Crea una promesa manualmente
try { await f(); } catch (e) {}
Maneja errores async
setTimeout(fn, 1000)
Ejecuta tras un retardo (ms)
queueMicrotask(fn)
Programa una microtarea
Flujo de control
9if (a) {} else if (b) {} else {}
Ramas condicionales
a ? b : c
Expresión ternaria
switch (x) { case 1: break; }
Bifurcación múltiple
for (const x of arr) {}
Itera valores (iterables)
for (const k in obj) {}
Itera las claves de un objeto
while (cond) {}
Bucle mientras se cumple una condición
arr.forEach((x, i) => {})
Ejecuta un callback por elemento
break / continue
Sale o salta una iteración del bucle
label: for (...) { break label; }
Rompe bucles anidados
DOM y eventos
10document.querySelector('.x')
Primer elemento que coincide
document.querySelectorAll('.x')
Todos los elementos que coinciden (NodeList)
el.addEventListener('click', fn)
Adjunta un listener de eventos
el.classList.toggle('active')
Alterna una clase CSS
el.dataset.id
Lee un atributo data-id
el.textContent = 'hi'
Asigna texto de forma segura (sin HTML)
el.setAttribute('aria-hidden', true)
Asigna un atributo
e.preventDefault()
Cancela la acción por defecto
el.closest('.parent')
Ancestro más cercano que coincide
document.createElement('div')
Crea un nuevo elemento
Clases y módulos
9class A extends B {}
Clase con herencia
constructor() { super(); }
Inicializa y llama al padre
#private = 1;
Campo de clase privado
static create() {}
Método estático en la clase
get value() {}
Accesor getter
export default fn;
Exportación por defecto del módulo
export { a, b };
Exportaciones con nombre
import x, { y } from './m.js'
Importaciones por defecto y con nombre
const m = await import('./m.js')
Importación dinámica
Ninguna entrada coincide con “:q”.
¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.