JavaScript Cheatsheet

Variables y Tipos de Datos

Concepto	Descripción	Ejemplo
const	Constante (no se puede reasignar). Usar por defecto	const PI = 3.14;
let	Variable con alcance de bloque. Usar solo si muta	let contador = 0;
var	Variable con alcance de funcion. EVITAR en codigo nuevo	var viejo = "no usar";
String	Cadena de texto. Se crea con comillas simples, dobles o backticks	const s = "hola";
Number	Numeros enteros y decimales (IEEE 754). Solo un tipo numerico	42, 3.14, NaN, Infinity
BigInt	Enteros arbitrariamente grandes. Se crea con n sufijo	9007199254740991n
Boolean	Valor logico: true o false	const activo = true;
null	Valor vacio intencional (asignado manualmente)	let dato = null;
undefined	Variable declarada sin valor (valor por defecto)	let x; // x es undefined
Symbol	Valor unico e inmutable (identificadores)	const id = Symbol("desc");
Object	Coleccion de pares clave-valor. Base de todo en JS	{ nombre: "Ana" }
Array	Lista ordenada (es un tipo especial de Object)	[1, 2, 3]
typeof	Operador para consultar el tipo de un valor	typeof 42 // "number"
Array.isArray()	Forma correcta de verificar si es un array	Array.isArray([1]) // true
instanceof	Verifica si un objeto es instancia de una clase	[] instanceof Array // true

Operadores

Operador	Descripción	Ejemplo
+ - * / % **	Aritmeticos: suma, resta, mult, div, modulo, potencia	2 ** 3 // 8
= += -= *= /=	Asignacion y asignacion compuesta	x += 5; // x = x + 5
++ --	Incremento / decremento (prefijo o sufijo)	i++; ++i;
=== !==	Igualdad estricta (tipo + valor). SIEMPRE usar estos	1 === "1" // false
== !=	Igualdad debil (convierte tipos). EVITAR	1 == "1" // true
< > <= >=	Comparacion (devuelven boolean)	5 > 3 // true
&& \|\| !	Logicos: AND, OR, NOT	!true // false
??	Nullish coalescing: devuelve el derecho si el izquierdo es null/undefined	null ?? "default" // "default"
\|\|	OR logico: devuelve el primero truthy	"" \|\| "hola" // "hola"
?.	Optional chaining: accede seguro sin error si es null/undefined	user?.address?.city
?: (ternario)	Operador condicional (if/else en una linea)	edad >= 18 ? "mayor" : "menor"
typeof	Devuelve el tipo del valor como string	typeof null // "object" (bug historico)

Metodos de String

Metodo	Descripción	Ejemplo
.length	Cantidad de caracteres (propiedad, no metodo)	"hola".length // 4
.slice(start, end?)	Extrae parte del string (end exclusivo, negativos cuentan desde atras)	"hola mundo".slice(0, 4) // "hola"
.substring(start, end?)	Similar a slice pero no acepta negativos	"hola".substring(1) // "ola"
.replace(search, repl)	Reemplaza la primera ocurrencia (usa regex para global)	"aab".replace("a", "x") // "xab"
.replaceAll(search, repl)	Reemplaza todas las ocurrencias	"aab".replaceAll("a", "x") // "xxb"
.toUpperCase()	Convierte a mayusculas	"hola".toUpperCase() // "HOLA"
.toLowerCase()	Convierte a minusculas	"HOLA".toLowerCase() // "hola"
.trim()	Elimina espacios en blanco al inicio y final	" hola ".trim() // "hola"
.trimStart() / .trimEnd()	Elimina espacios solo al inicio / solo al final	" hola ".trimStart() // "hola "
.includes(str)	Verifica si contiene la subcadena (true/false)	"hola".includes("ol") // true
.startsWith(str)	Verifica si empieza con la subcadena	"hola".startsWith("ho") // true
.endsWith(str)	Verifica si termina con la subcadena	"hola".endsWith("la") // true
.indexOf(str)	Posicion de la primera ocurrencia (-1 si no existe)	"hola".indexOf("l") // 2
.split(sep)	Divide el string en un array	"a,b,c".split(",") // ["a","b","c"]
.repeat(n)	Repite el string n veces	"ab".repeat(3) // "ababab"
.padStart(len, str)	Rellena al inicio hasta alcanzar len caracteres	"5".padStart(3, "0") // "005"
.padEnd(len, str)	Rellena al final hasta alcanzar len caracteres	"hi".padEnd(5, ".") // "hi..."
.charAt(idx)	Caracter en la posicion indicada	"hola".charAt(1) // "o"
.charCodeAt(idx)	Codigo Unicode del caracter en la posicion	"A".charCodeAt(0) // 65
.match(regex)	Busca coincidencias con una expresion regular	"hola123".match(/\d+/) // ["123"]

Metodos de Array

Metodo	Descripción	Ejemplo
.push(...items)	Agrega elementos al final. Devuelve la nueva longitud	[1].push(2) // [1, 2]
.pop()	Elimina y devuelve el ultimo elemento	[1,2,3].pop() // 3
.shift()	Elimina y devuelve el primer elemento	[1,2,3].shift() // 1
.unshift(...items)	Agrega elementos al inicio. Devuelve la nueva longitud	[2,3].unshift(1) // [1,2,3]
.splice(start, del, ...add)	Elimina/inserta elementos en una posicion (muta el array original)	[1,2,3].splice(1,1,"x") // [1,"x",3]
.slice(start, end?)	Devuelve una copia de una porcion (no muta)	[1,2,3,4].slice(1,3) // [2,3]
.concat(...arrays)	Une arrays y devuelve uno nuevo (no muta)	[1].concat([2],[3]) // [1,2,3]
.indexOf(val)	Primer indice del valor (-1 si no existe)	[1,2,3].indexOf(2) // 1
.includes(val)	Verifica si el valor existe (true/false)	[1,2,3].includes(2) // true
.find(fn)	Primer elemento que cumple la condicion (el elemento, no el indice)	[1,2,3].find(x => x > 1) // 2
.findIndex(fn)	Primer indice que cumple la condicion	[1,2,3].findIndex(x => x > 1) // 1
.filter(fn)	Nuevo array con los elementos que cumplen la condicion	[1,2,3,4].filter(x => x > 2) // [3,4]
.map(fn)	Nuevo array transformando cada elemento	[1,2,3].map(x => x * 2) // [2,4,6]
.reduce(fn, init?)	Reduce el array a un unico valor (acumulador)	[1,2,3].reduce((a,b) => a+b) // 6
.some(fn)	true si AL MENOS UN elemento cumple la condicion	[1,2,3].some(x => x > 5) // false
.every(fn)	true si TODOS los elementos cumplen la condicion	[1,2,3].every(x => x > 0) // true
.forEach(fn)	Ejecuta fn por cada elemento (no devuelve nada, no se puede break)	[1,2].forEach(x => console.log(x))
.sort(fn?)	Ordena el array IN-PLACE (muta!). Pasar comparador para numeros	[3,1,2].sort((a,b) => a-b) // [1,2,3]
.reverse()	Invierte el array IN-PLACE (muta!)	[1,2,3].reverse() // [3,2,1]
.flat(depth?)	Aplana arrays anidados (1 nivel por defecto)	[1,[2,[3]]].flat(2) // [1,2,3]
.flatMap(fn)	map() + flat() en un solo paso	[1,2].flatMap(x => [x, x*2]) // [1,2,2,4]
.join(sep?)	Une todos los elementos en un string	[1,2,3].join("-") // "1-2-3"
.fill(val, start?, end?)	Llena el array con un valor (muta)	[1,2,3].fill(0) // [0,0,0]
Array.from(iter, fn?)	Crea un array desde un iterable (map opcional en el segundo arg)	Array.from("abc") // ["a","b","c"]
Array.isArray(val)	Verifica si un valor es un array	Array.isArray([]) // true
.length	Cantidad de elementos (propiedad)	[1,2,3].length // 3
...spread	Spread: expande un array en elementos individuales	Math.max(...[1,5,3]) // 5

Metodos de Object

Metodo / Sintaxis	Descripción	Ejemplo
obj.prop / obj["prop"]	Acceder a una propiedad (notacion de punto o corchetes)	user.name; user["name"]
obj.prop = val	Asignar o crear una propiedad	user.edad = 25;
"prop" in obj	Verifica si una propiedad existe (incluye heredadas)	"name" in user // true
obj.hasOwnProperty("p")	Verifica si una propiedad es propia (no heredada)	user.hasOwnProperty("name") // true
delete obj.prop	Elimina una propiedad del objeto	delete user.edad;
Object.keys(obj)	Array con todas las claves propias (enumerables)	Object.keys({a:1,b:2}) // ["a","b"]
Object.values(obj)	Array con todos los valores propios	Object.values({a:1,b:2}) // [1,2]
Object.entries(obj)	Array de pares [clave, valor]	Object.entries({a:1}) // [["a",1]]
Object.assign(target, ...src)	Copia propiedades de un objeto a otro (shallow merge)	Object.assign({}, {a:1}, {b:2})
{ ...obj }	Spread: clona o mergea objetos (shallow copy, ES6+)	const clone = { ...original }
const { a, b } = obj	Destructuring: extrae propiedades en variables	const { nombre, edad } = user;
const { a: alias } = obj	Destructuring con renombrado	const { nombre: n } = user;
const { a = def } = obj	Destructuring con valor por defecto	const { rol = "user" } = user;
Object.freeze(obj)	Congela el objeto: no se puede modificar, agregar ni eliminar propiedades	Object.freeze(config);
Object.is(a, b)	Comparacion mas precisa que === (NaN === NaN, -0 !== +0)	Object.is(NaN, NaN) // true
JSON.stringify(obj)	Convierte un objeto a string JSON	JSON.stringify({a:1}) // '{"a":1}'
JSON.parse(str)	Convierte un string JSON a objeto	JSON.parse('{"a":1}') // {a:1}

Sintaxis ES6+ Moderna

Caracteristica	Descripción	Ejemplo
Arrow functions	Funciones cortas con this heredado del contexto lexico	const sumar = (a, b) => a + b;
Template literals	Strings con interpolacion y multilinea usando backticks	`Hola ${nombre}, tenes ${edad}`
Destructuring arrays	Extrae elementos por posicion	const [a, , c] = [1, 2, 3]; // a=1, c=3
Destructuring objects	Extrae propiedades por nombre	const { nombre, email } = user;
Spread (...)	Expande arrays/objetos en elementos individuales	const arr = [...arr1, ...arr2];
Rest (...)	Agrupa argumentos restantes en un array	function fn(a, ...rest) { }
Default parameters	Valores por defecto en parametros de funcion	function fn(x = 10, y = 20) { }
Optional chaining ?.	Acceso seguro a propiedades anidadas (no lanza error si es null)	obj?.a?.b?.c
Nullish coalescing ??	Valor por defecto solo para null/undefined (no para 0 o "")	const x = null ?? "default";
import / export	Modulos ES: importar y exportar entre archivos	export const PI = 3.14; import { PI } from "./math.js";
Class	Azúcar sintáctico sobre funciones constructoras y prototipos	class Perro { constructor(nombre) { this.nombre = nombre; } }
Promise	Objeto que representa un valor futuro (resuelve o rechaza)	new Promise((resolve, reject) => { })
async / await	Azúcar sintáctico para escribir Promises como código síncrono	const data = await fetch(url);
for...of	Itera sobre valores de iterables (arrays, strings, Maps, Sets)	for (const item of [1,2,3]) { }
for...in	Itera sobre claves enumerables de un objeto (no usar para arrays)	for (const key in obj) { }
Map	Coleccion de pares clave-valor (cualquier tipo como clave)	const m = new Map(); m.set("a", 1);
Set	Coleccion de valores unicos (sin duplicados)	const s = new Set([1,2,2,3]); // Set {1,2,3}
Symbol	Valor primitivo unico, usado como clave de propiedad	const ID = Symbol("id");
try / catch / finally	Manejo de errores: intenta, captura excepciones, siempre ejecuta finally	try { JSON.parse(str); } catch(e) { } finally { }
throw new Error()	Lanza una excepcion personalizada	throw new Error("algo salio mal");

DOM

Metodo / Propiedad	Descripción	Ejemplo
document.querySelector(sel)	Primer elemento que matchea el selector CSS	document.querySelector(".card h2")
document.querySelectorAll(sel)	Todos los elementos que matchean (NodeList)	document.querySelectorAll("li.item")
document.getElementById(id)	Elemento por ID (mas rapido que querySelector)	document.getElementById("app")
.createElement(tag)	Crea un nuevo elemento HTML	const div = document.createElement("div");
.appendChild(node)	Agrega un nodo como ultimo hijo	parent.appendChild(div);
.removeChild(node)	Elimina un nodo hijo	parent.removeChild(child);
.remove()	Elimina el elemento directamente (mas simple)	element.remove();
.textContent	Texto del elemento (seguro, sin XSS)	el.textContent = "Hola";
.innerHTML	HTML interno del elemento (PELIGRO: XSS si usas datos del usuario)	el.innerHTML = "<b>Hola</b>";
.classList.add/remove/toggle	Manipula clases CSS del elemento	el.classList.toggle("active");
.style.prop	Estilos inline del elemento (camelCase)	el.style.backgroundColor = "red";
.getAttribute / setAttribute	Lee / escribe atributos HTML	el.setAttribute("data-id", "5");
.dataset	Acceso a data-* attributes	el.dataset.userId; // data-user-id
.parentElement	Elemento padre	el.parentElement
.children	Elementos hijos (solo elementos, no texto)	el.children
.closest(sel)	Ascendiente mas cercano que matchea el selector	btn.closest(".card")

Eventos

Metodo / Evento	Descripción	Ejemplo
.addEventListener(evt, fn)	Registra un listener para un evento	btn.addEventListener("click", fn);
.removeEventListener(evt, fn)	Elimina un listener (misma referencia de funcion)	btn.removeEventListener("click", fn);
event.target	Elemento que disparo el evento (donde se originó)	e.target.classList.add("active");
event.currentTarget	Elemento que tiene el listener (donde se registró)	e.currentTarget // el boton
event.preventDefault()	Evita la accion por defecto del navegador (submit, link)	form.addEventListener("submit", e => e.preventDefault());
event.stopPropagation()	Detiene la propagacion del evento (bubbling)	e.stopPropagation();
click	Click del mouse (o tap en movil)	el.addEventListener("click", fn);
input / change	input se dispara en cada cambio; change al perder foco	input.addEventListener("input", fn);
submit	Formulario enviado	form.addEventListener("submit", fn);
keydown / keyup	Tecla presionada / soltada	document.addEventListener("keydown", fn);
scroll	Scroll en la ventana o un elemento	window.addEventListener("scroll", fn);
resize	Ventana redimensionada	window.addEventListener("resize", fn);
load / DOMContentLoaded	load: todo cargado. DOMContentLoaded: solo el HTML listo	document.addEventListener("DOMContentLoaded", fn);
mouseenter / mouseleave	Mouse entra / sale de un elemento (no bubbling)	el.addEventListener("mouseenter", fn);
event delegation	Un solo listener en el padre para muchos hijos	ul.addEventListener("click", e => { if(e.target.tagName==="LI") ... })

Asincronía y Fetch

Metodo / Sintaxis	Descripción	Ejemplo
new Promise((resolve, reject) => {})	Crea una nueva Promise	const p = new Promise((res, rej) => { });
.then(fn) / .catch(fn)	Maneja el resultado exitoso / error de una Promise	p.then(val => { }).catch(err => { });
.finally(fn)	Se ejecuta siempre al final (exito o error)	p.finally(() => console.log("fin"));
Promise.all([...])	Espera a que TODAS se resuelvan. Si una falla, todo falla	Promise.all([p1, p2, p3])
Promise.allSettled([...])	Espera a todas, devuelve resultados individuales	Promise.allSettled([p1, p2])
Promise.race([...])	La primera en resolver o rechazar gana	Promise.race([fetch(url), timeout(5000)])
Promise.any([...])	La primera en RESOLVER gana (ignora rechazos)	Promise.any([source1, source2])
async function fn() {}	Declara una funcion que devuelve una Promise	async function getData() { }
await expr	Pausa hasta que la Promise se resuelva (solo dentro de async)	const data = await fetch(url);
fetch(url, options)	Peticion HTTP basada en Promises (GET por defecto)	const res = await fetch("https://api.com/data");
response.ok	true si el status es 200-299 (SIEMPRE verificar, fetch no falla en 4xx/5xx)	if (!res.ok) throw new Error(res.status);
response.json()	Parsea el body como JSON (devuelve Promise)	const data = await res.json();
response.text()	Devuelve el body como string	const html = await res.text();
response.status	Codigo de estado HTTP (200, 404, 500...)	console.log(res.status);
AbortController	Cancela peticiones fetch en curso	const ctrl = new AbortController(); fetch(url, { signal: ctrl.signal }); ctrl.abort();

Almacenamiento

Metodo / API	Descripción	Ejemplo
localStorage.setItem(k, v)	Guarda un valor (siempre string). Persiste permanentemente	localStorage.setItem("user", JSON.stringify({name:"Ana"}));
localStorage.getItem(k)	Lee un valor. Devuelve null si no existe	JSON.parse(localStorage.getItem("user"))
localStorage.removeItem(k)	Elimina un item especifico	localStorage.removeItem("user");
localStorage.clear()	Elimina TODO el almacenamiento del dominio	localStorage.clear();
localStorage.key(i) / .length	Clave en posicion i / cantidad de items	localStorage.length
sessionStorage.*	Misma API que localStorage pero se borra al cerrar la pestana	sessionStorage.setItem("draft", "hola");
document.cookie	Lee/escribe cookies (string: "nombre=valor; otra=valor"). Se envia al servidor en cada request	document.cookie = "tema=dark; path=/; max-age=31536000";
indexedDB.open(name, ver)	Abre o crea una base de datos del lado del cliente (asincrona, objetos estructurados, indices)	const req = indexedDB.open("MiDB", 1);
fetch(url).then(r => r.json())	Datos remotos: pide JSON a una API y convierte la respuesta a objetos JS. Combina con localStorage para cache	const data = await (await fetch("https://api.example.com/data")).json();