Cheat Sheet completa de JavaScript
Esta cheat sheet de JavaScript es tu guía de referencia rápida para dominar los conceptos fundamentales del lenguaje. Desde variables hasta manipulación del DOM, aquí encontrarás todo lo esencial con ejemplos prácticos y explicaciones claras.
Variables
Las variables en JavaScript se utilizan para almacenar y gestionar datos. Hay tres formas principales de declararlas: var, let y const.
// 🚀 VARIABLES EN JAVASCRIPT
// 🔹 var (EVITAR USARLA)
var nombre = "Juan"; // Declaración
var nombre = "Pedro"; // ✅ Se puede redeclarar
nombre = "Carlos"; // ✅ Se puede reasignar
console.log(nombre); // "Carlos"
// ⚠️ Ámbito (scope): GLOBAL o de FUNCIÓN, pero NO respeta bloques
if (true) {
var mensaje = "Hola desde var";
}
console.log(mensaje); // "Hola desde var" (var ignora el bloque)
// 🔹 let (RECOMENDADO PARA VARIABLES QUE CAMBIAN)
let edad = 30; // Declaración
edad = 35; // ✅ Se puede reasignar
// let edad = 40; // ❌ Error: No se puede redeclarar en el mismo bloque
console.log(edad); // 35
// ✅ Ámbito (scope): BLOQUE
if (true) {
let saludo = "Hola desde let";
console.log(saludo); // "Hola desde let"
}
// console.log(saludo); // ❌ Error: saludo no está definido fuera del bloque
// 🔹 const (RECOMENDADO PARA VALORES FIJOS)
const PI = 3.1416; // Declaración
// PI = 3.15; // ❌ Error: No se puede reasignar
// const PI = 3.15; // ❌ Error: No se puede redeclarar
console.log(PI); // 3.1416
// ✅ Ámbito (scope): BLOQUE
if (true) {
const valor = "Valor fijo";
console.log(valor); // "Valor fijo"
}
// console.log(valor); // ❌ Error: valor no está definido fuera del bloqueTipos de datos
En JavaScript, los tipos de datos se dividen en dos categorías principales: primitivos y complejos.
// 🚀 TIPOS DE DATOS EN JAVASCRIPT
// 🔹 TIPOS PRIMITIVOS
// 📄 String (Texto)
const texto = "JavaScript"; // ✅ "JavaScript"
// 🔢 Number (Números)
const entero = 42; // ✅ 42
const decimal = 3.14; // ✅ 3.14
// 🔘 Boolean (Lógico)
const esActivo = true; // ✅ true
const esInactivo = false; // ✅ false
// 🟨 Undefined (Indefinido)
let indefinido; // ✅ undefined (No tiene valor asignado)
// 🚫 Null (Valor vacío)
const vacio = null; // ✅ null (Asignado intencionalmente)
// 🔗 Symbol (Identificadores únicos)
const simbolo1 = Symbol("id");
const simbolo2 = Symbol("id");
console.log(simbolo1 === simbolo2); // ❌ false (Siempre únicos)
// 🔍 BigInt (Números enteros muy grandes)
const numeroLargo = BigInt(9007199254740991);
console.log(numeroLargo); // ✅ 9007199254740991n
// -----------------------------------------------------------------
// 🔹 TIPOS DE DATOS COMPLEJOS
// 🟧 Object (Objeto - Estructura clave/valor)
const persona = {
nombre: "Ana",
edad: 25,
esEstudiante: true,
};
console.log(persona.nombre); // ✅ "Ana"
// 📋 Array (Listas ordenadas de elementos)
const frutas = ["🍎", "🍌", "🍊"];
console.log(frutas[1]); // ✅ "🍌"
// 🔄 Function (Función - Bloque de código reutilizable)
function saludar(nombre) {
return `¡Hola, ${nombre}!`;
}
console.log(saludar("Pedro")); // ✅ "¡Hola, Pedro!"
// -----------------------------------------------------------------
// 🔹 DIFERENCIA ENTRE PRIMITIVOS Y COMPLEJOS
// ✅ PRIMITIVO - Se copia el valor
let a = 5;
let b = a; // Copia el valor
b = 10;
console.log(a); // ✅ 5 (El valor original no cambia)
// 🟧 COMPLEJO - Se copia la referencia
let objeto1 = { nombre: "Juan" };
let objeto2 = objeto1; // Copia la referencia
objeto2.nombre = "Pedro";
console.log(objeto1.nombre); // ✅ "Pedro" (Ambos apuntan al mismo objeto)
// -----------------------------------------------------------------
// 🔹 DETECCIÓN DE TIPOS (typeof)
console.log(typeof "Hola"); // ✅ "string"
console.log(typeof 42); // ✅ "number"
console.log(typeof true); // ✅ "boolean"
console.log(typeof undefined); // ✅ "undefined"
console.log(typeof null); // 🔎 "object" (Excepción histórica en JS)
console.log(typeof Symbol()); // ✅ "symbol"
console.log(typeof BigInt(1)); // ✅ "bigint"
console.log(typeof []); // ✅ "object" (Los arrays son objetos)
console.log(typeof {}); // ✅ "object"
console.log(typeof function () {}); // ✅ "function"
// 🔹 VALORES TRUTHY Y FALSY EN JAVASCRIPT
// ✅ FALSY - Se consideran "falsos" en una condición
// Si los usas en un if, se comportan como false
const falsyValues = [false, 0, -0, "", null, undefined, NaN];
// ✅ TRUTHY - Todo lo que NO sea falsy es truthy
// Se comportan como verdadero en condiciones
const truthyValues = [true, 1, -1, "texto", [], {}, function() {}, Infinity, -Infinity];Template Strings
Los Template Strings permiten crear cadenas de texto de forma más limpia y dinámica usando comillas invertidas (`).
// 🚀 TEMPLATE STRINGS (LITERAL STRINGS)
// ✅ Interpolación de variables
const nombre = "Juan";
const edad = 30;
console.log(`Hola, soy ${nombre} y tengo ${edad} años.`);
// ✅ "Hola, soy Juan y tengo 30 años."
// ✅ Texto multilínea
const mensaje = `
Este es un mensaje
que abarca múltiples
líneas sin problemas.
`;
// ✅ Expresiones dentro de template strings
const precio = 100;
const impuesto = 0.21;
console.log(`El precio final es: ${precio * (1 + impuesto)}€`);
// ✅ "El precio final es: 121€"Comentarios
Los comentarios permiten agregar notas dentro del código que no afectan su ejecución.
// 🚀 COMENTARIOS EN JAVASCRIPT
// Esto es un comentario de una sola línea
console.log("Hola Mundo"); // También se puede comentar al final de una línea
/*
Este es un comentario
en varias líneas.
Ideal para explicar
bloques completos de código.
*/
console.log("Hola Mundo");
/**
* Este es un comentario de documentación JSDoc
* @param {string} nombre - El nombre de la persona
* @returns {string} Un saludo personalizado
*/
function saludar(nombre) {
return `Hola, ${nombre}`;
}Operadores
Los operadores en JavaScript son símbolos que se utilizan para realizar operaciones en valores o variables.
// 🚀 OPERADORES EN JAVASCRIPT
// 🔹 OPERADORES ARITMÉTICOS
let suma = 5 + 3; // ➕ 8
let resta = 10 - 4; // ➖ 6
let multiplicacion = 3 * 4; // ✖️ 12
let division = 20 / 4; // ➗ 5
let resto = 10 % 3; // 🔄 1 (módulo)
let potencia = 2 ** 3; // ⚡ 8 (2 elevado a 3)
// 🔹 OPERADORES DE ASIGNACIÓN
let x = 10;
x += 5; // ➕ Sumar y asignar (x = 15)
x -= 3; // ➖ Restar y asignar (x = 12)
x *= 2; // ✖️ Multiplicar y asignar (x = 24)
x /= 4; // ➗ Dividir y asignar (x = 6)
x %= 5; // 🔄 Resto y asignar (x = 1)
// 🔹 OPERADORES DE COMPARACIÓN
5 == "5"; // ✅ true (compara valor, no tipo)
5 === "5"; // ❌ false (compara valor y tipo)
5 != "5"; // ❌ false (compara valor)
5 !== "5"; // ✅ true (compara valor y tipo)
5 > 3; // ✅ true (mayor que)
3 < 5; // ✅ true (menor que)
5 >= 5; // ✅ true (mayor o igual que)
3 <= 3; // ✅ true (menor o igual que)
// 🔹 OPERADORES LÓGICOS
true && true; // ✅ true (AND - ambas condiciones verdaderas)
true && false; // ❌ false
true || false; // ✅ true (OR - una condición verdadera)
false || false; // ❌ false
!true; // ❌ false (NOT - invierte el valor)
// 🔹 OPERADOR TERNARIO
let edad = 18;
let acceso = edad >= 18 ? "Permitido" : "Denegado";
console.log(acceso); // "Permitido"
// 🔹 OPERADORES MODERNOS
// Nullish Coalescing (??)
let nombre = null;
console.log(nombre ?? "Anónimo"); // "Anónimo"
// Optional Chaining (?.)
const usuario = {
nombre: "Juan",
direccion: {
ciudad: "Madrid",
},
};
console.log(usuario.direccion?.ciudad); // ✅ "Madrid"
console.log(usuario.contacto?.telefono); // ✅ undefined (sin error)Estructuras de control
Las estructuras de control permiten manejar el flujo de ejecución del código.
// 🚀 ESTRUCTURAS DE CONTROL EN JAVASCRIPT
// 🔹 BUCLES
// ✅ for (Recorrido tradicional)
for (let i = 0; i < 5; i++) {
console.log(`Número: ${i}`); // ✅ 0, 1, 2, 3, 4
}
// ✅ while (Repite mientras se cumpla la condición)
let contador = 0;
while (contador < 3) {
console.log(`Contador: ${contador}`); // ✅ 0, 1, 2
contador++;
}
// ✅ do...while (Ejecuta al menos una vez)
let intentos = 0;
do {
console.log(`Intento: ${intentos}`); // ✅ 0
intentos++;
} while (intentos < 1);
// ✅ for...of (Recorre elementos de un array)
const frutas = ["🍎", "🍌", "🍊"];
for (const fruta of frutas) {
console.log(fruta); // ✅ "🍎", "🍌", "🍊"
}
// ✅ for...in (Recorre propiedades de un objeto)
const persona = { nombre: "Ana", edad: 25 };
for (const clave in persona) {
console.log(`${clave}: ${persona[clave]}`); // ✅ "nombre: Ana", "edad: 25"
}
// 🔹 CONDICIONALES
// ✅ if / else
const edad = 20;
if (edad >= 18) {
console.log("Eres mayor de edad");
} else {
console.log("Eres menor de edad");
}
// ✅ if / else if / else
const nota = 85;
if (nota >= 90) {
console.log("Sobresaliente");
} else if (nota >= 70) {
console.log("Aprobado");
} else {
console.log("Suspenso");
}
// ✅ switch (ideal para múltiples casos)
const dia = "Lunes";
switch (dia) {
case "Lunes":
console.log("Inicio de semana");
break;
case "Viernes":
console.log("Fin de semana");
break;
default:
console.log("Día normal");
}
// 🔹 CONTROL DE FLUJO
// ✅ break (Sale del bucle inmediatamente)
for (let i = 0; i < 10; i++) {
if (i === 5) break;
console.log(i); // ✅ 0, 1, 2, 3, 4
}
// ✅ continue (Salta la iteración actual)
for (let i = 0; i < 5; i++) {
if (i === 2) continue;
console.log(i); // ✅ 0, 1, 3, 4
}
// ✅ return (Finaliza una función)
function verificarEdad(edad) {
if (edad < 18) return "Acceso denegado";
return "Acceso permitido";
}Funciones
Las funciones son bloques de código reutilizables que se pueden invocar en cualquier momento.
// 🚀 FUNCIONES EN JAVASCRIPT
// 🔹 FUNCIÓN DECLARADA (Forma clásica)
function saludar(nombre) {
return `¡Hola, ${nombre}!`;
}
console.log(saludar("Juan")); // ✅ "¡Hola, Juan!"
// 🔹 FUNCIÓN EXPRESADA (Asignada a una variable)
const despedir = function (nombre) {
return `Adiós, ${nombre}`;
};
console.log(despedir("Ana")); // ✅ "Adiós, Ana"
// 🔹 ARROW FUNCTION (Sintaxis moderna)
const sumar = (a, b) => a + b;
console.log(sumar(5, 3)); // ✅ 8
// 🔹 ARROW FUNCTION con cuerpo de bloque
const multiplicar = (a, b) => {
const resultado = a * b;
return resultado;
};
console.log(multiplicar(4, 2)); // ✅ 8
// 🔹 FUNCIÓN DE ORDEN SUPERIOR
function operar(a, b, operacion) {
return operacion(a, b);
}
const resultado = operar(4, 2, (x, y) => x * y);
console.log(resultado); // ✅ 8
// 🔹 FUNCIÓN CON PARÁMETROS POR DEFECTO
function saludarPersona(nombre = "Anónimo") {
console.log(`Hola, ${nombre}!`);
}
saludarPersona(); // ✅ "Hola, Anónimo!"
saludarPersona("Luis"); // ✅ "Hola, Luis!"
// 🔹 FUNCIÓN RECURSIVA
function cuentaRegresiva(num) {
if (num === 0) {
console.log("¡BOOM!");
return;
}
console.log(num);
cuentaRegresiva(num - 1);
}
cuentaRegresiva(3); // ✅ 3, 2, 1, "¡BOOM!"Métodos de Array
Los métodos de arrays permiten manipular, transformar y gestionar datos dentro de un array.
// 🚀 MÉTODOS DE ARRAY EN JAVASCRIPT
// 🔹 MÉTODOS QUE MODIFICAN EL ARRAY ORIGINAL
const numeros = [1, 2, 3, 4, 5];
// ✅ push() - Añade elementos al final
numeros.push(6); // [1, 2, 3, 4, 5, 6]
// ✅ pop() - Elimina el último elemento
numeros.pop(); // [1, 2, 3, 4, 5]
// ✅ shift() - Elimina el primer elemento
numeros.shift(); // [2, 3, 4, 5]
// ✅ unshift() - Añade elementos al principio
numeros.unshift(0); // [0, 2, 3, 4, 5]
// ✅ splice() - Añade/Elimina elementos en una posición específica
numeros.splice(2, 1, 99); // [0, 2, 99, 4, 5]
// ✅ reverse() - Invierte el array
numeros.reverse(); // [5, 4, 99, 2, 0]
// ✅ sort() - Ordena el array
const letras = ["b", "a", "c"];
letras.sort(); // ["a", "b", "c"]
// 🔹 MÉTODOS QUE NO MODIFICAN EL ARRAY ORIGINAL
const numeros2 = [1, 2, 3, 4, 5];
// ✅ map() - Aplica una función a cada elemento
const cuadrados = numeros2.map((num) => num ** 2); // [1, 4, 9, 16, 25]
// ✅ filter() - Filtra elementos según una condición
const pares = numeros2.filter((num) => num % 2 === 0); // [2, 4]
// ✅ reduce() - Reduce el array a un único valor
const sumaTotal = numeros2.reduce((acum, num) => acum + num, 0); // 15
// ✅ find() - Encuentra el primer elemento que cumple una condición
const mayorQueTres = numeros2.find((num) => num > 3); // 4
// ✅ some() - Verifica si algún elemento cumple una condición
const hayPares = numeros2.some((num) => num % 2 === 0); // true
// ✅ every() - Verifica si TODOS los elementos cumplen una condición
const todosPositivos = numeros2.every((num) => num > 0); // true
// ✅ includes() - Verifica si un valor está presente
console.log(numeros2.includes(3)); // true
// ✅ indexOf() - Devuelve el índice del primer elemento coincidente
console.log(numeros2.indexOf(3)); // 2
// ✅ concat() - Une dos arrays
const combinados = numeros2.concat([6, 7, 8]); // [1, 2, 3, 4, 5, 6, 7, 8]
// ✅ join() - Convierte un array en string
console.log(numeros2.join(" - ")); // "1 - 2 - 3 - 4 - 5"
// ✅ slice() - Extrae una porción del array
const porcion = numeros2.slice(1, 3); // [2, 3]
// ✅ forEach() - Itera sobre cada elemento
numeros2.forEach((num) => console.log(num)); // Muestra cada númeroMétodos de String
Los métodos de string permiten manipular y transformar textos de forma eficiente.
// 🚀 MÉTODOS DE STRING EN JAVASCRIPT
const texto = "JavaScript es genial";
// 🔹 TRANSFORMACIÓN
// ✅ .toUpperCase() - Convierte a mayúsculas
console.log(texto.toUpperCase()); // "JAVASCRIPT ES GENIAL"
// ✅ .toLowerCase() - Convierte a minúsculas
console.log(texto.toLowerCase()); // "javascript es genial"
// ✅ .trim() - Elimina espacios en blanco
const textoConEspacios = " Hola mundo ";
console.log(textoConEspacios.trim()); // "Hola mundo"
// ✅ .replace() - Reemplaza parte del texto
console.log(texto.replace("genial", "increíble")); // "JavaScript es increíble"
// ✅ .slice() - Extrae una parte del texto
console.log(texto.slice(0, 10)); // "JavaScript"
// ✅ .substring() - Similar a slice
console.log(texto.substring(0, 10)); // "JavaScript"
// ✅ .split() - Divide el texto en un array
console.log(texto.split(" ")); // ["JavaScript", "es", "genial"]
// ✅ .concat() - Une strings
const saludo = "Hola";
console.log(saludo.concat(" ", "mundo!")); // "Hola mundo!"
// ✅ .repeat() - Repite el texto
console.log("Hola ".repeat(3)); // "Hola Hola Hola "
// 🔹 BÚSQUEDA
const frase = "Aprender JavaScript es divertido";
// ✅ .indexOf() - Posición de la primera coincidencia
console.log(frase.indexOf("JavaScript")); // 9
// ✅ .lastIndexOf() - Posición de la última coincidencia
console.log(frase.lastIndexOf("es")); // 18
// ✅ .includes() - Verifica si contiene una cadena
console.log(frase.includes("JavaScript")); // true
// ✅ .startsWith() - Verifica si inicia con
console.log(frase.startsWith("Aprender")); // true
// ✅ .endsWith() - Verifica si termina con
console.log(frase.endsWith("divertido")); // trueMétodos de Número
Los métodos de número permiten manipular y realizar cálculos precisos con valores numéricos.
// 🚀 MÉTODOS DE NÚMERO EN JAVASCRIPT
const numero = 42.5678;
// 🔹 MÉTODOS BÁSICOS
// ✅ .toFixed() - Redondea a decimales fijos
console.log(numero.toFixed(2)); // "42.57"
// ✅ .toPrecision() - Redondea a longitud específica
console.log(numero.toPrecision(4)); // "42.57"
// ✅ .toString() - Convierte a string
console.log(numero.toString()); // "42.5678"
// 🔹 MÉTODOS ESTÁTICOS DE Number
// ✅ Number.isInteger() - Verifica si es entero
console.log(Number.isInteger(42)); // true
console.log(Number.isInteger(42.5)); // false
// ✅ Number.parseInt() - Convierte string a entero
console.log(Number.parseInt("42.9")); // 42
// ✅ Number.parseFloat() - Convierte string a decimal
console.log(Number.parseFloat("42.567")); // 42.567
// ✅ Number.isNaN() - Verifica si es NaN
console.log(Number.isNaN("Hola" * 3)); // true
// 🔹 MÉTODOS DE Math
// ✅ Math.round() - Redondeo al entero más cercano
console.log(Math.round(4.6)); // 5
// ✅ Math.floor() - Redondeo hacia abajo
console.log(Math.floor(4.9)); // 4
// ✅ Math.ceil() - Redondeo hacia arriba
console.log(Math.ceil(4.1)); // 5
// ✅ Math.trunc() - Elimina decimales
console.log(Math.trunc(4.9)); // 4
// ✅ Math.random() - Número aleatorio entre 0 y 1
console.log(Math.random()); // Ejemplo: 0.735629
// ✅ Math.max() / Math.min() - Valor máximo/mínimo
console.log(Math.max(10, 20, 30)); // 30
console.log(Math.min(10, 20, 30)); // 10
// ✅ Math.pow() - Potencia
console.log(Math.pow(2, 3)); // 8
// ✅ Math.sqrt() - Raíz cuadrada
console.log(Math.sqrt(25)); // 5
// ✅ Math.abs() - Valor absoluto
console.log(Math.abs(-42)); // 42Módulos
Los módulos permiten organizar y reutilizar código de forma modular.
// 🚀 MÓDULOS EN JAVASCRIPT
// 🔹 EXPORTAR MÓDULOS
// Named exports
export const saludar = (nombre) => `Hola, ${nombre}`;
export const despedir = (nombre) => `Adiós, ${nombre}`;
// Default export (solo uno por archivo)
const mensaje = "Bienvenido al módulo";
export default mensaje;
// 🔹 IMPORTAR MÓDULOS
// Importación de named exports
import { saludar, despedir } from "./miModulo.js";
console.log(saludar("Juan")); // "Hola, Juan"
console.log(despedir("Ana")); // "Adiós, Ana"
// Importación de default export
import mensaje from "./miModulo.js";
console.log(mensaje); // "Bienvenido al módulo"
// Importación combinada
import mensaje, { saludar } from "./miModulo.js";
console.log(mensaje); // "Bienvenido al módulo"
console.log(saludar("Pedro")); // "Hola, Pedro"
// Importar todo
import * as miModulo from "./miModulo.js";
console.log(miModulo.saludar("Ana")); // "Hola, Ana"Manipulación del DOM
El DOM permite modificar el contenido, estructura y estilo de la página web dinámicamente.
// 🚀 MANIPULACIÓN DEL DOM EN JAVASCRIPT
// 🔹 SELECCIÓN DE ELEMENTOS
// Por ID
const titulo = document.getElementById("titulo");
// Por clase
const elementos = document.getElementsByClassName("item");
// Por etiqueta
const parrafos = document.getElementsByTagName("p");
// Selectores modernos
const primerElemento = document.querySelector(".clase");
const todosLosElementos = document.querySelectorAll(".clase");
// 🔹 MODIFICACIÓN DE CONTENIDO
titulo.textContent = "Nuevo título";
titulo.innerHTML = "<b>Título en negrita</b>";
// Modificar atributos
titulo.setAttribute("class", "nuevo-estilo");
titulo.removeAttribute("id");
// Modificar estilos
titulo.style.color = "red";
titulo.style.fontSize = "24px";
// 🔹 MANIPULACIÓN DE CLASES
titulo.classList.add("destacado");
titulo.classList.remove("destacado");
titulo.classList.toggle("activo");
titulo.classList.contains("activo"); // true/false
// 🔹 CREAR Y ELIMINAR ELEMENTOS
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este es un nuevo párrafo.";
// Añadir al DOM
document.body.appendChild(nuevoParrafo);
// Eliminar elemento
nuevoParrafo.remove();
// 🔹 INSERCIÓN AVANZADA
const contenedor = document.getElementById("contenedor");
contenedor.insertAdjacentHTML("beforebegin", "<p>Antes del contenedor</p>");
contenedor.insertAdjacentHTML("afterbegin", "<p>Al inicio del contenedor</p>");
contenedor.insertAdjacentHTML("beforeend", "<p>Al final del contenedor</p>");
contenedor.insertAdjacentHTML("afterend", "<p>Después del contenedor</p>");
// 🔹 EVENTOS
const boton = document.getElementById("boton");
// Agregar evento
boton.addEventListener("click", function () {
console.log("¡Botón clicado!");
});
// Con arrow function
boton.addEventListener("mouseover", () => {
console.log("Pasaste el ratón por el botón.");
});
// Eliminar evento
function mensaje() {
console.log("Este evento será eliminado.");
}
boton.addEventListener("click", mensaje);
boton.removeEventListener("click", mensaje);
// 🔹 NAVEGACIÓN EN EL DOM
const elemento = document.querySelector(".item");
console.log(elemento.parentNode); // Elemento padre
console.log(elemento.children); // Elementos hijos
console.log(elemento.firstChild); // Primer hijo
console.log(elemento.lastChild); // Último hijo
console.log(elemento.nextElementSibling); // Siguiente hermano
console.log(elemento.previousElementSibling); // Hermano anteriorPromesas
Las promesas representan un valor que puede estar disponible ahora, en el futuro o nunca.
// 🚀 PROMESAS EN JAVASCRIPT
// 🔹 CREAR UNA PROMESA
const promesa = new Promise((resolve, reject) => {
const exito = true; // Cambia a false para simular error
if (exito) {
resolve("✅ Operación exitosa");
} else {
reject("❌ Error en la operación");
}
});
// 🔹 GESTIONAR PROMESAS
promesa
.then((resultado) => console.log(resultado)) // ✅ Resultado exitoso
.catch((error) => console.error(error)) // ❌ Manejar error
.finally(() => console.log("Proceso finalizado")); // Siempre se ejecuta
// 🔹 ESTADOS DE UNA PROMESA
// ✅ pending: Estado inicial, en espera
// ✅ fulfilled: Promesa resuelta exitosamente
// ✅ rejected: Promesa fallida
// 🔹 PROMESAS MÚLTIPLES
const promesa1 = Promise.resolve("Primera");
const promesa2 = Promise.resolve("Segunda");
const promesa3 = Promise.resolve("Tercera");
// Promise.all - Espera que todas se resuelvan
Promise.all([promesa1, promesa2, promesa3]).then((resultados) =>
console.log(resultados)
); // ["Primera", "Segunda", "Tercera"]
// Promise.race - La primera que se resuelve
Promise.race([promesa1, promesa2, promesa3]).then((resultado) =>
console.log(resultado)
); // "Primera"Fetch y Async/Await
Fetch permite realizar peticiones HTTP, y async/await facilita el manejo de promesas.
// 🚀 FETCH Y ASYNC/AWAIT EN JAVASCRIPT
// 🔹 FETCH API
// Petición GET
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => {
if (!response.ok) {
throw new Error("Error en la respuesta");
}
return response.json();
})
.then((data) => console.log("✅ Datos recibidos:", data))
.catch((error) => console.error("❌ Error:", error));
// Petición POST
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "Nuevo Post",
body: "Contenido del post",
userId: 1,
}),
})
.then((response) => response.json())
.then((data) => console.log("✅ Post creado:", data))
.catch((error) => console.error("❌ Error:", error));
// 🔹 ASYNC/AWAIT (SINTAXIS MODERNA)
async function obtenerDatos() {
try {
const respuesta = await fetch("https://pokeapi.co/api/v2/pokemon/1");
if (!respuesta.ok) {
throw new Error(`Error HTTP: ${respuesta.status}`);
}
const datos = await respuesta.json();
console.log("✅ Datos obtenidos:", datos);
return datos;
} catch (error) {
console.error("❌ Error al obtener datos:", error);
} finally {
console.log("📌 Proceso finalizado");
}
}
obtenerDatos();
// 🔹 MANEJO DE ERRORES
// try...catch para manejar errores
try {
let resultado = JSON.parse("{malformado: json}");
} catch (error) {
console.error("❌ Error de sintaxis:", error.message);
} finally {
console.log("📌 Proceso finalizado");
}
// throw para generar errores personalizados
function dividir(a, b) {
if (b === 0) {
throw new Error("❌ No se puede dividir por cero");
}
return a / b;
}
try {
console.log(dividir(10, 0));
} catch (error) {
console.error(error.message);
}Fechas (Date)
El objeto Date permite trabajar con fechas y horas de forma eficiente.
// 🚀 FECHAS (DATE) EN JAVASCRIPT
// 🔹 CREAR FECHAS
// Fecha actual
const fechaActual = new Date();
console.log(fechaActual); // Wed Mar 15 2025 10:30:00...
// Fecha específica (año, mes(0-11), día, hora, minuto, segundo)
const fechaEspecifica = new Date(2025, 2, 15, 10, 30, 0);
console.log(fechaEspecifica); // Sat Mar 15 2025 10:30:00...
// Fecha desde string
const fechaDesdeTexto = new Date("2025-03-15T10:30:00");
console.log(fechaDesdeTexto);
// 🔹 OBTENER INFORMACIÓN
console.log(fechaActual.getFullYear()); // 2025
console.log(fechaActual.getMonth()); // 2 (marzo = 2)
console.log(fechaActual.getDate()); // 15
console.log(fechaActual.getDay()); // 6 (sábado = 6)
console.log(fechaActual.getHours()); // 10
console.log(fechaActual.getMinutes()); // 30
console.log(fechaActual.getSeconds()); // 0
console.log(fechaActual.getTime()); // Timestamp en ms
// 🔹 MODIFICAR FECHAS
fechaActual.setFullYear(2030);
fechaActual.setMonth(11); // Diciembre
fechaActual.setDate(25); // Día 25
console.log(fechaActual); // Tue Dec 25 2030...
// 🔹 FORMATEO
console.log(fechaActual.toDateString()); // "Tue Dec 25 2030"
console.log(fechaActual.toISOString()); // "2030-12-25T10:30:00.000Z"
console.log(fechaActual.toLocaleDateString("es-ES")); // "25/12/2030"
console.log(fechaActual.toLocaleTimeString("es-ES")); // "10:30:00"
// Formateo personalizado
const opciones = {
year: "numeric",
month: "long",
day: "numeric",
};
console.log(fechaActual.toLocaleDateString("es-ES", opciones)); // "25 de diciembre de 2030"Almacenamiento en el navegador
Permite guardar datos de forma persistente o temporal en el lado del cliente.
// 🚀 ALMACENAMIENTO EN EL NAVEGADOR
// 🔹 localStorage (Persistente)
// Guardar
localStorage.setItem("nombre", "Juan");
localStorage.setItem(
"configuracion",
JSON.stringify({ tema: "oscuro", idioma: "es" })
);
// Obtener
console.log(localStorage.getItem("nombre")); // "Juan"
const config = JSON.parse(localStorage.getItem("configuracion"));
console.log(config.tema); // "oscuro"
// Eliminar
localStorage.removeItem("nombre");
// Limpiar todo
localStorage.clear();
// 🔹 sessionStorage (Temporal - solo sesión actual)
sessionStorage.setItem("usuario", "Ana");
console.log(sessionStorage.getItem("usuario")); // "Ana"
sessionStorage.removeItem("usuario");
sessionStorage.clear();
// 🔹 Cookies
// Crear
document.cookie = "idioma=es; expires=Fri, 31 Dec 2030 23:59:59 GMT; path=/";
// Leer todas
console.log(document.cookie); // "idioma=es"
// Función helper para leer cookie específica
function getCookie(nombre) {
const valor = `; ${document.cookie}`;
const partes = valor.split(`; ${nombre}=`);
if (partes.length === 2) return partes.pop().split(";").shift();
}
console.log(getCookie("idioma")); // "es"
// Eliminar
document.cookie = "idioma=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
// 🔹 DIFERENCIAS CLAVE
// localStorage: Persiste hasta que se elimine manualmente
// sessionStorage: Se elimina al cerrar la pestaña
// cookies: Se pueden configurar con fecha de expiración y se envían al servidorObjetos y JSON
Los objetos almacenan información en pares clave-valor. JSON es un formato para intercambiar datos.
// 🚀 OBJETOS Y JSON EN JAVASCRIPT
// 🔹 CREAR Y MANIPULAR OBJETOS
const persona = {
nombre: "Juan",
edad: 30,
profesion: "Desarrollador",
saludar: function () {
return `Hola, soy ${this.nombre}`;
},
};
// Acceso a propiedades
console.log(persona.nombre); // "Juan"
console.log(persona["edad"]); // 30
// Modificar propiedades
persona.edad = 31;
console.log(persona.edad); // 31
// Agregar propiedades
persona.ciudad = "Madrid";
console.log(persona.ciudad); // "Madrid"
// Eliminar propiedades
delete persona.profesion;
console.log(persona.profesion); // undefined
// Recorrer objeto
for (let clave in persona) {
console.log(`${clave}: ${persona[clave]}`);
}
// 🔹 MÉTODOS DE OBJETO
// Object.keys() - Array de claves
console.log(Object.keys(persona)); // ["nombre", "edad", "ciudad", "saludar"]
// Object.values() - Array de valores
console.log(Object.values(persona)); // ["Juan", 31, "Madrid", function]
// Object.entries() - Array de pares [clave, valor]
console.log(Object.entries(persona)); // [["nombre", "Juan"], ["edad", 31], ...]
// Object.assign() - Copiar propiedades
const nuevoObjeto = Object.assign({}, persona, { pais: "España" });
console.log(nuevoObjeto);
// Object.freeze() - Congelar objeto
Object.freeze(persona);
persona.edad = 40; // ❌ No se puede modificar
console.log(persona.edad); // 31
// Object.seal() - Sellar objeto (solo modificar propiedades existentes)
const producto = { nombre: "Laptop", precio: 1000 };
Object.seal(producto);
producto.precio = 1200; // ✅ Permitido
producto.marca = "Dell"; // ❌ No permitido
// 🔹 JSON
// Convertir objeto a JSON
const datos = { nombre: "Ana", edad: 25 };
const datosJSON = JSON.stringify(datos);
console.log(datosJSON); // '{"nombre":"Ana","edad":25}'
// Convertir JSON a objeto
const textoJSON = '{"nombre":"Carlos","edad":28}';
const objetoDatos = JSON.parse(textoJSON);
console.log(objetoDatos.nombre); // "Carlos"
// JSON con formateo
const datosFormateados = JSON.stringify(datos, null, 2);
console.log(datosFormateados);
/*
{
"nombre": "Ana",
"edad": 25
}
*/
// Verificar si es JSON válido
function esJSONValido(texto) {
try {
JSON.parse(texto);
return true;
} catch (error) {
return false;
}
}
console.log(esJSONValido('{"nombre":"Juan"}')); // true
console.log(esJSONValido('{nombre:"Juan"}')); // falseOtros métodos útiles
Métodos adicionales que amplían las capacidades de JavaScript.
// 🚀 OTROS MÉTODOS ÚTILES
// 🔹 MAP (Estructura clave-valor)
const mapa = new Map();
mapa.set("nombre", "Juan");
mapa.set("edad", 30);
mapa.set(1, "primer elemento");
console.log(mapa.get("nombre")); // "Juan"
console.log(mapa.has("edad")); // true
console.log(mapa.size); // 3
// Iterar sobre Map
for (let [clave, valor] of mapa) {
console.log(`${clave}: ${valor}`);
}
// 🔹 SET (Conjunto de valores únicos)
const conjunto = new Set([1, 2, 3, 3, 4]);
console.log(conjunto); // Set {1, 2, 3, 4}
conjunto.add(5);
console.log(conjunto.has(3)); // true
conjunto.delete(2);
console.log(conjunto.size); // 4
// 🔹 URLSearchParams (Gestión de parámetros URL)
const params = new URLSearchParams("?nombre=Juan&edad=30&activo=true");
console.log(params.get("nombre")); // "Juan"
console.log(params.get("edad")); // "30"
params.set("ciudad", "Madrid");
console.log(params.toString()); // "nombre=Juan&edad=30&activo=true&ciudad=Madrid"
// 🔹 RegExp (Expresiones Regulares)
const regex = /\d+/g; // Buscar números
const texto = "Mi número es 1234 y mi código es 5678";
console.log(texto.match(regex)); // ["1234", "5678"]
// Validar email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRegex.test("usuario@ejemplo.com")); // true
// 🔹 Intl (Internacionalización)
// Formatear números
const numero = 1234567.89;
console.log(new Intl.NumberFormat("es-ES").format(numero)); // "1.234.567,89"
console.log(new Intl.NumberFormat("en-US").format(numero)); // "1,234,567.89"
// Formatear fechas
const fecha = new Date();
console.log(new Intl.DateTimeFormat("es-ES").format(fecha)); // "15/3/2025"
console.log(new Intl.DateTimeFormat("en-US").format(fecha)); // "3/15/2025"
// 🔹 Performance API
const inicio = performance.now();
// ... código a medir ...
const fin = performance.now();
console.log(`La operación tomó ${fin - inicio} milisegundos`);
// 🔹 Console avanzado
console.log("Mensaje normal");
console.warn("Advertencia");
console.error("Error");
console.info("Información");
console.table([
{ nombre: "Juan", edad: 30 },
{ nombre: "Ana", edad: 25 },
]);
console.group("Grupo de logs");
console.log("Log dentro del grupo");
console.groupEnd();
// 🔹 Timers
// setTimeout - Ejecutar una vez después de un tiempo
const timeoutId = setTimeout(() => {
console.log("Ejecutado después de 2 segundos");
}, 2000);
// clearTimeout - Cancelar setTimeout
clearTimeout(timeoutId);
// setInterval - Ejecutar repetidamente
const intervalId = setInterval(() => {
console.log("Ejecutado cada segundo");
}, 1000);
// clearInterval - Cancelar setInterval
setTimeout(() => {
clearInterval(intervalId);
console.log("Interval cancelado");
}, 5000);🎯 Resumen
Esta cheat sheet de JavaScript cubre los conceptos fundamentales que todo desarrollador debe conocer:
- Variables y tipos de datos para almacenar información
- Operadores y estructuras de control para lógica de programación
- Funciones para código reutilizable y modular
- Arrays y strings para manipulación de datos
- DOM para interactuar con páginas web
- Promesas y fetch para operaciones asíncronas
- Almacenamiento para persistir datos en el navegador
¡Guarda esta referencia y úsala siempre que necesites recordar algún concepto esencial de JavaScript!