Hoja de Trucos de JavaScript
Última actualización
Variables (let, const, var)
Declara valores; prefiere const, luego let, y evita var.
| Operación | Sintaxis |
|---|---|
| Ámbito de bloque, se puede reasignar | let count = 0; |
| Ámbito de bloque, no se puede reasignar | const name = "Ada"; |
| Ámbito de función (heredado) | var x = 1; |
| Declarar sin valor | let result; |
| Varias declaraciones | let a = 1, b = 2; |
| Objeto constante (contenido mutable) | const user = {}; user.id = 1; |
Tipos de datos
Los tipos primitivos y de referencia, además de cómo comprobarlos.
| Tipo | Ejemplo |
|---|---|
| Número | let n = 42; |
| Cadena | let s = "hi"; |
| Booleano | let ok = true; |
| Array | let arr = [1, 2, 3]; |
| Objeto | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| Comprobar un tipo | typeof n |
| Convertir | Number("7"), String(42), Boolean(0) |
Cadenas y plantillas literales
Construye y manipula texto.
| Operación | Sintaxis |
|---|---|
| Plantilla literal | Hi ${name}, age ${age} (envuélvelo en comillas invertidas) |
| Longitud | text.length |
| Mayúsculas / minúsculas | text.toUpperCase(), text.toLowerCase() |
| Quitar espacios | text.trim() |
| Reemplazar todo | text.replaceAll("a", "b") |
| Dividir en un array | text.split(",") |
| Incluye | text.includes("js") |
| Cortar | text.slice(0, 3) |
Arrays y métodos de array
Colecciones ordenadas y los métodos que las recorren.
| Operación | Sintaxis |
|---|---|
| Añadir / quitar al final | arr.push(4), arr.pop() |
| Añadir / quitar al principio | arr.unshift(0), arr.shift() |
| Transformar cada elemento | arr.map(x => x * 2) |
| Conservar elementos coincidentes | arr.filter(x => x > 0) |
| Reducir a un solo valor | arr.reduce((sum, x) => sum + x, 0) |
| Encontrar un elemento | arr.find(x => x.id === 1) |
| Probar algunos / todos | arr.some(f), arr.every(f) |
| Índice de un valor | arr.indexOf(3), arr.includes(3) |
| Unir en una cadena | arr.join(", ") |
Objetos
Colecciones de pares clave-valor.
| Operación | Sintaxis |
|---|---|
| Crear | const user = { id: 1, name: "Ada" }; |
| Acceder a una propiedad | user.name, user["name"] |
| Añadir / actualizar una propiedad | user.age = 25; |
| Eliminar una propiedad | delete user.age; |
| Obtener todas las claves / valores | Object.keys(user), Object.values(user) |
| Obtener entradas | Object.entries(user) |
| Combinar objetos | Object.assign({}, a, b) |
| Copia superficial | const copy = { ...user }; |
Control de flujo
Condicionales y bucles.
| Operación | Sintaxis |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| Ternario | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| Bucle for | for (let i = 0; i < 5; i++) { … } |
| For-of (valores) | for (const item of arr) { … } |
| For-in (claves) | for (const key in obj) { … } |
| Bucle while | while (x < 10) { … } |
Funciones y funciones flecha
Define bloques reutilizables que puedes invocar.
| Operación | Sintaxis |
|---|---|
| Declaración de función | function add(a, b) { return a + b; } |
| Función flecha | const add = (a, b) => a + b; |
| Flecha con un solo argumento | const sq = x => x * x; |
| Flecha sin argumentos | const now = () => Date.now(); |
| Parámetro por defecto | function f(x = 0) { … } |
| Parámetros rest | function f(...args) { … } |
| Invocada inmediatamente (IIFE) | (() => { … })(); |
Desestructuración y spread
Desempaqueta valores y copia/combina estructuras.
| Operación | Sintaxis |
|---|---|
| Desestructuración de array | const [a, b] = arr; |
| Desestructuración de objeto | const { id, name } = user; |
| Renombrar al desempaquetar | const { id: userId } = user; |
| Valor por defecto | const { age = 0 } = user; |
| Spread de un array | const all = [...a, ...b]; |
| Spread de un objeto | const next = { ...user, age: 25 }; |
| Rest en la desestructuración | const [first, ...rest] = arr; |
Promesas y async/await
Gestiona el trabajo asíncrono como las solicitudes de red.
| Operación | Sintaxis |
|---|---|
| Función async | async function load() { … } |
| Esperar una promesa | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| Try / catch con await | try { await f(); } catch (e) { … } |
| Resolver / rechazar | Promise.resolve(1), Promise.reject(err) |
| Esperar a todas | await Promise.all([a, b]) |
| La primera en resolverse | await Promise.race([a, b]) |
La sintaxis moderna de JavaScript que más usas, en una sola página. Esta hoja de trucos de JavaScript es una referencia rápida para el día a día con ES6+: declarar variables, métodos de cadenas y arrays, objetos, funciones flecha, desestructuración y async/await.
Todo lo que hay aquí es JavaScript estándar que funciona en los navegadores modernos y en Node.js. Copia lo que necesites o prueba cualquier fragmento en vivo en el playground de JS, sin instalar nada.
Preguntas frecuentes sobre la hoja de trucos de JavaScript
¿Esta hoja de trucos de JavaScript es gratis?
Sí. Esta hoja de trucos de JavaScript es completamente gratuita, sin necesidad de registrarse. Guárdala en favoritos y vuelve cuando necesites consultar la sintaxis, un método de array o un patrón asíncrono.
¿Cuál es la diferencia entre == y === en JavaScript?
== es igualdad flexible: convierte los operandos al mismo tipo antes de comparar, así que 0 == "0" es true. === es igualdad estricta: compara tanto el valor como el tipo sin conversión, así que 0 === "0" es false. Prefiere === (y !==) en casi todos los casos: es predecible y evita coerciones sorprendentes.¿Cuál es la diferencia entre let, const y var?
const y let tienen ámbito de bloque y se añadieron en ES6; var tiene ámbito de función y es más antiguo. Usa const para los valores que nunca reasignas, let para los que sí, y evita var para prevenir errores de hoisting y de ámbito. Ten en cuenta que un objeto o array const aún puede cambiar su contenido: solo el enlace es constante.¿Puedo practicar JavaScript en línea?
Sí. Abre el playground de JS para ejecutar cualquier fragmento de esta hoja de trucos en tu navegador, sin instalar nada. Cuando quieras estructura, el curso interactivo y gratuito de JavaScript de Coddy te lleva paso a paso desde las variables y los bucles hasta los métodos de array y async/await.
¿Esta hoja de trucos es buena para principiantes?
Sí. Está organizada desde lo básico (variables, tipos de datos, cadenas) hasta la desestructuración y async/await, de modo que puedes usar las secciones de arriba desde el primer día e ir avanzando hacia las funciones modernas de ES6+.
Recursos relacionados
Más hojas de referencia
