▶ 1. Variables y Tipos de Datos
const clave
Variable que no se puede reasignar. Usar por
defecto siempre.
let
Variable que sí puede reasignarse. Usar solo
cuando el valor necesita cambiar.
var evitar
Forma antigua. Tiene comportamientos inesperados (scope y
hoisting). No usar en código moderno.
"texto" / 'texto'
Tipo string. Texto entre comillas simples o
dobles. Son equivalentes.
42 / 3.14
Tipo number. JavaScript no distingue entre
enteros y decimales.
true / false
Tipo boolean. Los dos únicos valores lógicos.
[1, "dos", true]
Tipo array. Lista ordenada. Puede mezclar tipos.
El índice empieza en 0.
{ clave: valor }
Tipo object. Colección de pares clave-valor. Las
claves son strings.
null
Ausencia intencional de valor. Lo asigna el
programador a propósito.
undefined
Variable declarada pero sin valor asignado.
JavaScript lo pone automáticamente.
typeof valor
Retorna el tipo del dato como string: "string",
"number", "boolean", "object", "undefined".
▶ 2. Operadores
=
Asignación. Guarda un valor en una variable. No
confundir con == (comparación).
=== clave
Igualdad estricta. Compara valor Y tipo.
Usar siempre en lugar de ==.
== evitar
Igualdad suelta. Convierte tipos antes de
comparar. Puede dar resultados inesperados.
!== / !=
Desigualdad estricta / suelta. Preferir siempre
!==.
> < >=
<=
Comparación numérica: mayor, menor, mayor o igual, menor o igual.
&& clave
AND lógico. Retorna true solo si
ambas condiciones son verdaderas.
||
OR lógico. Retorna true si
al menos una condición es verdadera.
!
NOT lógico. Niega el valor.
!true === false. Útil para invertir booleanos.
+ - * /
%
Aritméticos: suma, resta, multiplicación, división,
módulo (resto de la división).
**
Exponenciación. 2 ** 10 = 1024.
?? ES2020
Nullish coalescing. Retorna el lado derecho solo si el izquierdo
es null o undefined.
?. ES2020
Optional chaining. Accede a propiedades sin lanzar error si el
objeto es null/undefined.
▶ 3. Control de Flujo
if / else if / else
clave
Condicional básico. Ejecuta un bloque
si la condición es verdadera.
cond ? a : b clave
Operador ternario. if/else en una línea. Muy
usado en React para JSX.
switch (x) { case: }
Compara múltiples casos exactos. Recordar
break al final de cada caso.
for (let i=0; i<n; i++)
Bucle con índice numérico. El más clásico. Útil
cuando necesitas el número de posición.
for (const item of arr)
clave
Itera sobre los valores de un array u otro
iterable. Más limpio que el for clásico.
for (const key in obj)
Itera sobre las claves de un objeto. Combinar con
obj[key] para obtener el valor.
while (condicion)
Repite mientras la condición sea true. Cuidado
con los bucles infinitos.
break
Sale del bucle inmediatamente.
continue
Salta a la siguiente iteración sin ejecutar el
resto del bloque.
▶ 4. Funciones
function nombre(p) { }
Función declarada. Se puede llamar antes de
declararla (hoisting).
const fn = function(p) { }
Función expresión. Asignada a una variable. No
tiene hoisting.
const fn = (p) => { }
clave
Arrow function. La forma moderna. No tiene su
propio this. Muy usada en React.
const fn = (x) => x * 2
clave
Arrow con return implícito. Sin llaves = return
automático de la expresión.
return valor
Devuelve un valor y termina la función. Sin
return, la función devuelve undefined.
function fn(a = 0) { }
Parámetro con valor por defecto. Si no se pasa el
argumento, usa el default.
function fn(...args) { }
Rest params: agrupa todos los argumentos
restantes en un array.
fn(...array)
Spread en llamada: expande un array como
argumentos individuales de la función.
▶ 5. Arrays — Métodos Esenciales
.length clave
Cantidad de elementos del array. Propiedad, no
método (sin paréntesis).
.push(item)
Agrega un elemento al final.
Muta el array original. Retorna la nueva
longitud.
.pop()
Elimina y retorna el último elemento. Muta el
array.
.shift() / .unshift()
Elimina / agrega al inicio. Mutan el array y son
lentos en arrays grandes.
.map(fn) clave
Transforma cada elemento → retorna un
nuevo array. El más usado en React.
.filter(fn) clave
Filtra por condición → retorna un nuevo array con
los que pasan el test.
.find(fn)
Retorna el primer elemento que cumple la
condición (o undefined).
.findIndex(fn)
Retorna el índice del primer elemento que cumple
la condición (o -1).
.forEach(fn)
Itera el array ejecutando fn por cada elemento.
No retorna nada.
.reduce(fn, inicial)
Acumula todos los elementos en un valor único.
Ej: sumar todos los números.
.includes(item) clave
Retorna true/false si el elemento existe en el
array.
.slice(ini, fin)
Retorna un sub-array sin mutar el original. fin
es exclusivo.
.splice(ini, n)
Elimina o reemplaza n elementos desde ini.
Muta el array original.
.join(sep)
Une todos los elementos en un string con el
separador indicado.
.some(fn) / .every(fn)
some: true si al menos uno cumple.
every: true si todos cumplen.
.flat() / .flatMap(fn)
flat: aplana arrays anidados.
flatMap: map + flat en un paso.
.sort(fn) / .reverse()
Ordenar / invertir. Mutan el array. Para sort
numérico: (a, b) => a - b.
▶ 6. Objetos y Destructuring
obj.propiedad
Acceso con punto. La forma más común. La clave
debe ser un identificador válido.
obj['propiedad']
Acceso con corchetes. Necesario cuando la clave
es dinámica o tiene espacios.
const { a, b } = obj
clave
Destructuring de objeto. Extrae propiedades a
variables con el mismo nombre.
const { a: alias } = obj
Destructuring con renombre. La variable se llama
alias, no "a".
const { a = 0 } = obj
Destructuring con valor por defecto. Si "a" es
undefined, usa 0.
{ ...obj, k: v } clave
Spread: copia todas las propiedades de obj y
agrega/sobreescribe k. Muy usado en React para actualizar estado.
Object.keys(obj) clave
Array con todas las claves del objeto.
Object.values(obj)
Array con todos los valores del objeto.
Object.entries(obj)
Array de pares [clave, valor]. Útil para iterar
con .map() o for...of.
{ nombre }
Property shorthand. Si la variable y la clave
tienen el mismo nombre: { nombre: nombre }.
▶ 7. Strings — Métodos Esenciales
`Hola ${nombre}` clave
Template literal. Con backticks. Incrusta
variables y expresiones con ${}.
.length
Número de caracteres del string.
.toUpperCase() / .toLowerCase()
Convierte todo a MAYÚSCULAS / minúsculas. No
muta, retorna nuevo string.
.trim()
Elimina espacios al inicio y al final.
trimStart() y trimEnd() para un
solo extremo.
.includes(sub) clave
Retorna true/false si el string contiene el
substring.
.startsWith(sub) / .endsWith(sub)
Verifica si el string empieza / termina con el
substring dado.
.indexOf(sub)
Índice de la primera ocurrencia del substring.
Retorna -1 si no existe.
.slice(ini, fin)
Extrae una parte del string. fin es exclusivo.
Acepta índices negativos.
.replace(bus, rep)
Reemplaza la primera ocurrencia. Usar
.replaceAll() para todas.
.split(sep) clave
Divide el string en un array usando el separador.
Inverso de .join().
.charAt(i)
Carácter en la posición i. También se puede usar
str[i].
.padStart(n, char) / .padEnd(n, char)
Rellena el string hasta longitud n. Ej:
"5".padStart(2, "0") → "05".
▶ 8. DOM — Selección y Manipulación
document.querySelector()
clave
Primer elemento que coincide con el selector CSS.
Retorna null si no hay.
document.querySelectorAll()
clave
Todos los que coinciden. Retorna un NodeList.
Usar .forEach() para iterar.
document.getElementById()
Elemento por su ID. Más rápido que querySelector.
Sin el # en el argumento.
el.textContent clave
Lee o escribe el texto del elemento.
Seguro: no interpreta HTML.
el.innerHTML ¡XSS!
Lee o escribe el HTML interno.
Peligroso con datos del usuario. Puede ejecutar
scripts.
el.classList.add()
Agrega una clase CSS al elemento.
el.classList.remove()
Quita una clase CSS del elemento.
el.classList.toggle()
Alterna la clase: la agrega si no está, la quita
si está.
el.style.propiedad
CSS inline desde JS. La propiedad en
camelCase. Ej:
el.style.backgroundColor.
el.addEventListener()
clave
Escucha eventos. Ej:
el.addEventListener('click', fn). Eventos: click,
input, submit, keydown.
document.createElement()
Crea un nuevo elemento HTML en memoria (no lo
agrega al DOM aún).
padre.appendChild(hijo)
Agrega el hijo como último hijo del padre en el
DOM.
el.remove()
Elimina el elemento del DOM.
▶ 9. ES6+ — Features Modernas
const [a, b] = [1, 2]
clave
Destructuring de array. Los nombres pueden ser
cualquiera (por posición).
const [h, ...rest] = arr
Rest en destructuring: h = primer elemento, rest
= todos los demás como array.
[...arr1, ...arr2]
clave
Spread para unir arrays. Más limpio que
.concat(). No muta los originales.
export default fn
Exporta un valor por defecto del módulo. Un solo
export default por archivo.
export const fn = ...
Exporta con nombre. Un archivo puede tener
múltiples exports con nombre.
import { fn } from './mod'
Importa exports con nombre. Las llaves son
obligatorias.
import fn from './mod'
Importa el export default. Sin llaves. El nombre
puede ser cualquiera.
async function fn() { }
clave
Declara una función asíncrona. Siempre retorna
una Promise.
const data = await promesa
clave
Espera a que una Promise se resuelva. Solo se
puede usar dentro de async.
try { } catch (err) { }
Manejo de errores. Usar con async/await para
capturar fallos de red, etc.
fetch(url)
Petición HTTP. Retorna una Promise. Combinar con
async/await. Ej: await fetch(url).
structuredClone(obj)
nuevo
Copia profunda de un objeto o array. Nativo, sin
librerías externas.