Cheatsheet de JavaScript Moderno: Sintaxis ES6+, Métodos de Arrays, Async y Módulos

Referencia rápida de JavaScript moderno: let y const, destructuring, spread, template literals, los métodos de arrays clave, async/await, módulos y clases.

🧪

Ejecuta y Edita este Código en Vivo Sin instalaciones locales. Soporta Python 3, JS y SQL.

▶ Probar en Playground →

1. Variables, destructuring y spread

ES6+ reemplazó var por declaraciones con ámbito de bloque e hizo que copiar datos sin mutar sea la práctica habitual. Estos patrones se escriben todos los días.

CODE SNIPPET

const user = { name: "Ana", role: "admin", active: true };
let score = 10;               // reasignable, ámbito de bloque

// Destructuring (objetos y arrays)
const { name, role } = user;
const [first, second = 0] = [7];

// Spread: copiar y combinar sin mutar
const copy = { ...user, active: false };
const merged = [...[1, 2], ...[3, 4]];   // [1, 2, 3, 4]

// Parámetros rest
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);

// Template literals, encadenamiento opcional y fusión nula
const label = `User: ${user.name}`;
const city = user.address?.city ?? "unknown";

2. Métodos de arrays imprescindibles

El JavaScript moderno prefiere transformar arrays en vez de escribir bucles. Todos los métodos siguientes devuelven un array nuevo (o un valor) sin tocar el original, excepto sort y reverse.

Método	Devuelve	Ejemplo
`map(fn)`	Array nuevo, misma longitud	`nums.map(n => n * 2)`
`filter(fn)`	Elementos que pasan la prueba	`nums.filter(n => n > 5)`
`reduce(fn, init)`	Un único valor acumulado	`nums.reduce((a, n) => a + n, 0)`
`find(fn)`	Primer elemento que coincide (o undefined)	`users.find(u => u.id === 3)`
`some(fn) / every(fn)`	true si alguno / todos pasan	`nums.some(n => n < 0)`
`flatMap(fn)`	Mapea y aplana un nivel	`words.flatMap(w => w.split(""))`
`at(-1)`	Elemento por índice (admite negativos)	`items.at(-1)`
`includes(x)`	true si el valor está presente	`tags.includes("ai")`
`sort((a, b) => a - b)`	Array ordenado (¡muta!)	`nums.sort((a, b) => b - a)`

3. Async: promesas y async/await

Todo lo que implica red, archivos o temporizadores es asíncrono. async/await es la opción legible por defecto; los combinadores de promesas resuelven la concurrencia.

CODE SNIPPET

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("loadUser failed:", err);
    return null;
  }
}

// Ejecuta peticiones en paralelo, no una tras otra
const [user, posts] = await Promise.all([loadUser(1), loadPosts(1)]);

// Gana el primer resultado que se resuelve (timeouts, respaldos)
const fastest = await Promise.race([primary(), backup()]);

4. Módulos y clases

Un archivo, una responsabilidad: exporta lo que otros módulos necesitan e impórtalo por nombre. Las clases agrupan los datos con los métodos que operan sobre ellos.

CODE SNIPPET

// math.js
export const PI2 = Math.PI * 2;
export function area(r) { return Math.PI * r ** 2; }
export default class Circle {
  #radius;                       // campo realmente privado
  constructor(r) { this.#radius = r; }
  get area() { return Math.PI * this.#radius ** 2; }
}

// app.js
import Circle, { area } from "./math.js";
const c = new Circle(3);
console.log(c.area, area(3));