const x = 10 Constante con ámbito de bloque
let y = 20 Variable con ámbito de bloque
typeof x Obtener tipo como cadena
const { a, b } = obj Desestructuración de objeto
const [a, b] = arr Desestructuración de array
const merged = { ...obj1, ...obj2 } Spread/fusionar objetos
const copy = [...arr] Spread/copiar array
x ?? fallback Coalescencia nula (solo null/undefined)
obj?.prop?.nested Encadenamiento opcional
[1, 2, 3] Crear un array
arr.push(item) Añadir elemento al final
arr.pop() Eliminar y devolver último elemento
arr.shift() / arr.unshift(item) Eliminar primero / añadir al inicio
arr.map(x => x * 2) Transformar cada elemento
arr.filter(x => x > 0) Filtrar elementos por condición
arr.reduce((acc, x) => acc + x, 0) Reducir a un solo valor
arr.find(x => x.id === 1) Encontrar primer elemento coincidente
arr.findIndex(x => x > 5) Índice de la primera coincidencia
arr.some(x => x > 0) Comprobar si algún elemento coincide
arr.every(x => x > 0) Comprobar si todos los elementos coinciden
arr.includes(item) Comprobar si el elemento existe
arr.flat(Infinity) Aplanar arrays anidados
arr.sort((a, b) => a - b) Ordenar numéricamente ascendente
arr.slice(1, 3) Obtener subarray (sin mutar)
arr.splice(1, 2, ...items) Eliminar/insertar en índice (mutando)
[...new Set(arr)] Eliminar duplicados
Array.from({ length: 5 }, (_, i) => i) Crear array desde rango
const obj = { key: "value" } Crear un objeto
Object.keys(obj) Obtener array de claves
Object.values(obj) Obtener array de valores
Object.entries(obj) Obtener array de pares [clave, valor]
Object.assign({}, obj1, obj2) Fusionar objetos (superficial)
structuredClone(obj) Clonar objeto en profundidad
Object.freeze(obj) Hacer objeto inmutable (superficial)
"key" in obj Comprobar si la clave existe
delete obj.key Eliminar una propiedad
const { unwanted, ...rest } = obj Omitir clave vía desestructuración
function fn(x) { return x } Declaración de función
const fn = (x) => x * 2 Función flecha
const fn = (x = 10) => x Parámetro por defecto
const fn = (...args) => args Parámetros rest
fn(1, ...arr) Argumentos spread
setTimeout(fn, 1000) Retrasar ejecución por ms
setInterval(fn, 1000) Repetir ejecución cada ms
function* gen() { yield 1 } Función generadora
async function fn() {
const res = await fetch(url);
return res.json();
} Función async/await
fetch(url).then(r => r.json()) Fetch con cadena .then()
Promise.all([p1, p2]) Esperar todas las promesas
Promise.race([p1, p2]) Primera promesa en resolverse/rechazarse
Promise.allSettled([p1, p2]) Esperar todas (resueltas o rechazadas)
new Promise((resolve, reject) => { ... }) Crear una nueva promesa
try {
await fn();
} catch (e) {
console.error(e);
} Manejo de errores asíncrono
`Hello ${name}` Plantilla literal
s.includes("sub") Comprobar si existe subcadena
s.startsWith("pre") / s.endsWith("suf") Comprobar inicio/final
s.split(",") Dividir en array
s.trim() Eliminar espacios de ambos extremos
s.replace(/regex/g, "new") Reemplazar con regex (global)
s.padStart(5, "0") Rellenar inicio hasta longitud
s.repeat(3) Repetir cadena N veces
s.match(/pattern/g) Encontrar todas las coincidencias regex
s.at(-1) Obtener último carácter
document.querySelector(".class") Seleccionar primer elemento coincidente
document.querySelectorAll("div") Seleccionar todos los elementos coincidentes
el.addEventListener("click", fn) Añadir escuchador de eventos
el.classList.add("active") Añadir clase CSS
el.classList.toggle("hidden") Alternar clase CSS
el.textContent = "text" Establecer contenido de texto (seguro)
el.setAttribute("data-id", "5") Establecer atributo HTML
el.style.color = "red" Establecer estilo en línea
el.remove() Eliminar elemento del DOM
const m = new Map() Crear un Map (cualquier tipo de clave)
const s = new Set([1, 2, 3]) Crear un Set (valores únicos)
for (const [k, v] of map) {} Iterar sobre entradas de Map
for (const item of iterable) {} Bucle for...of
Symbol("desc") Crear símbolo único
import { fn } from "./module.js" Importación de módulo ES
export default fn Exportación por defecto
const proxy = new Proxy(target, handler) Crear un Proxy
Cheat Sheet de JavaScript — Chuleta JS de referencia y sintaxis
JavaScript aterrizó en Netscape Navigator en 1995, escrito en 10 días como capa de scripting para el navegador, y desde entonces ha acumulado módulos, clases, arrow functions, async/await y optional chaining, pero las reglas originales de igualdad, el `this` y el único tipo numérico siguen ahí debajo. La chuleta de abajo cubre más de 75 fragmentos entre variables, arrays, objetos, funciones, promesas, cadenas, DOM y ES6+. La mayoría de los líos en código real no vienen de olvidar la sintaxis. Vienen de rarezas que parecen normales pero muerden. `==` aplica coerción de tipos y devuelve `true` para `0 == ""` sin avisar, motivo por el que los linters obligan a usar `===`. La palabra `this` dentro de un callback regular apunta al objeto global o a `undefined` en strict mode, no a la instancia de alrededor; las arrow functions arreglan eso. `0.1 + 0.2` devuelve `0.30000000000000004` porque el punto flotante es binario, no decimal. Estos son los fragmentos que se acaban consultando al depurar precisamente eso: la comparación estricta, el callback flecha, el destructuring que descarta una clave.
Trampas habituales en JavaScript
Hay un puñado de patrones que merecen estar en la primera pantalla de cualquier archivo JavaScript. `const` y `let` desplazan a `var` porque respetan el alcance de bloque y no se elevan como `undefined`, un hábito que evita categorías enteras de bugs. El optional chaining `obj?.prop?.nested` corta el paso al toparse con `null` o `undefined` en vez de lanzar error, y casa naturalmente con el operador de coalescencia nula `??`, que solo recurre al fallback ante `null`/`undefined` (no ante `0` ni `""`). `structuredClone(obj)` clona en profundidad sin el rodeo por JSON que pierde fechas, regex y Maps. Y `Array.from({ length: n }, (_, i) => i)` es la forma más limpia de construir un rango numérico sin bucle `for`. Los errores asíncronos piden un `try/catch` envolviendo el `await`, no un `.catch()` colgando del final; las trazas de pila salen mucho más útiles. La chuleta agrupa todo esto en variables, arrays, objetos, funciones, promesas, cadenas, DOM y ES6+, así la sección correcta queda a un clic.
- Más de 75 fragmentos prácticos de JavaScript
- 9 categorías incluyendo DOM y ES6+
- Búsqueda en código y descripciones
- Filtrar por categoría
- Copia al portapapeles con un clic
- Cubre funcionalidades modernas ES2023+
Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).
Por Marco B. ·