Chuleta JavaScript

Resumen rápido de sintaxis, métodos y conceptos clave.

💬 Comentarios

// De una sola línea
/*
  Bloque de varias
  líneas
*/

📦 Variables

var x = 1; // ❌ Obsoleto
let y = 2; // ✅ Modificable
const Z = 3; // ✅ Fija (Constante)
Arrays:
let lista = []; // Vacío
let nums = [1, 2, 3];

🧬 Tipos de Datos

🧮 Aritmética

📥 Asignación

⚖️ Comparación

🧠 Lógica

🔀 Condicionales (If/Else)

Para lógica compleja y bloques de código.

if (condición) {
  // código si true
} else if (otra) {
  // código si otra
} else {
  // código si no
}

⚡ Operador Ternario

condición ? si_true : si_false

let tipo = edad >= 18
  ? "Adulto" // Si cumple
  : "Menor"; // Si no
✔ Úsalo para: Asignar valores rápidos (como en el ejemplo).
❌ Evita para: Lógica compleja o muchas líneas.

🚦 Switch

Evalúa una expresión contra múltiples casos.

switch(valor) {
  case 1:
    ...; break; // 🛑 Importante
  case 2:
    ...; break;
  default: // Si nada coincide
    ...; // ℹ️ No necesita break al final
}
⚠️ Ojo al Break: Si lo olvidas, ejecutará TAMBIÉN los siguientes casos ("Fall-through") hasta encontrar un break o el final.

🔁 Bucles (Loops)

For (Clásico)

Cuando sabes cuántas veces repetir.

for (let i=0; i<10; i++) {
  console.log(i);
}

While / Do While

Mientras se cumpla una condición.

while (condición) { ... }
do {
  ...
} while (condición);

For...Of (Moderno)

Ideal para Arrays e iterables.

const frutas = ["🍎","🍌"];
for (const fruta of frutas) {
  console.log(fruta);
}

For...In

Para recorrer propiedades de Objetos.

const persona = {nombre:"Javi"};
for (const clave in persona) {
  console.log(clave); // "nombre"
}

𝑓(x) Funciones

Declaración Clásica:
function suma(a, b) {
  return a + b;
}
Arrow Function (Flecha):
const suma = (a, b) => a + b;

📝 Template String

Usa comillas invertidas (backticks) para interpolar.

const nombre = "Javi";
const saludo = `Hola ${nombre}!`;

1. Arrays (Listas)

Métodos esenciales para manipular colecciones de datos.

Método Descripción (El "Por qué") Ejemplo
length Propiedad. Devuelve la cantidad de elementos. Útil para saber el tamaño de la lista. [1,2].length // 2
push() Añade al final. Útil para acumular datos. arr.push('x')
pop() Elimina y devuelve el último. Útil en estructuras tipo pila (LIFO). arr.pop()
unshift() Añade al principio. Útil para colas prioritarias. arr.unshift('a')
shift() Elimina y devuelve el primero. Útil para procesar colas (FIFO). arr.shift()
map() Transforma cada elemento y devuelve una nueva lista. Ideal para convertir datos sin mutar el original. [1,2].map(x => x*2) // [2,4]
filter() Filtra elementos según una condición. Devuelve una nueva lista con los que cumplen. [1,5].filter(x => x>3) // [5]
find() Busca el primer elemento que cumpla la condición. [1,5].find(x => x>3) // 5
reduce() Reduce la lista a un único valor (suma, objeto, etc.). Muy potente para cálculos globales. [1,2].reduce((a,b)=>a+b) // 3
includes() Comprueba si un valor existe. Devuelve true/false. [1,2].includes(1) // true
slice() Corta una parte del array (copia). No modifica el original. [a,b,c].slice(1) // [b,c]
splice() Modifica el array añadiendo/quitando elementos en cualquier posición. Mutada el original. arr.splice(1, 1) // Elimina index 1

1.5. Sets (Conjuntos)

Colección de valores únicos.

Método / Propiedad Descripción Ejemplo
new Set() Crea un nuevo conjunto (vacío o desde un array). new Set([1, 1, 2]) // {1, 2}
add() Añade un valor (si ya existe, lo ignora). set.add(5)
delete() Borra un valor. set.delete(5)
has() Comprueba si existe el valor (más rápido que Array). set.has(5) // true
size Propiedad. Cantidad de elementos (como .length). set.size // 2
[...set] Convierte Set a Array (Spread operator). [...new Set([1,1,2])] // [1,2]

2. Strings (Texto)

Métodos para procesar y limpiar cadenas de texto.

Método Descripción (El "Por qué") Ejemplo
length Propiedad. Longitud de la cadena. "Hola".length // 4
toUpperCase() / toLowerCase() Transforma a mayúsculas/minúsculas. Clave para comparaciones insensibles a mayúsculas. "Hola".toUpperCase() // "HOLA"
trim() Elimina espacios al principio y final. Ideal para limpiar inputs de usuarios. " abc ".trim() // "abc"
includes() Verifica si contiene una subcadena. "Hola".includes("ol") // true
replace() Reemplaza la primera ocurrencia. ⚠️ No modifica el original, devuelve uno nuevo. let nuevo = t.replace("a", "b")
replaceAll() Reemplaza todas las ocurrencias. ⚠️ Igual: requiere guardar el resultado en una variable. let nuevo = t.replaceAll(" ", "")
split() Convierte texto en array usando un separador. Útil para procesar CSV o frases. "a,b".split(",") // ["a","b"]
slice() Extrae una parte del texto. "Hola".slice(0,2) // "Ho"

3. Math (Matemáticas)

Operaciones numéricas comunes.

Método Descripción Ejemplo
Math.round() Redondeo estándar al entero más cercano. Math.round(4.7) // 5
Math.floor() Redondeo hacia abajo (suelo). Math.floor(4.9) // 4
Math.ceil() Redondeo hacia arriba (techo). Math.ceil(4.1) // 5
Math.random() Número aleatorio entre 0 (incluido) y 1 (excluido). Base para cualquier azar. Math.random() // 0.123...
Math.max() / min() Devuelve el valor máximo o mínimo de una lista de argumentos. Math.max(1, 5, 2) // 5
Math.abs() Valor absoluto (positivo). Math.abs(-5) // 5

4. Object (Objetos)

Para trabajar con la estructura de objetos.

Método Descripción Ejemplo
Object.keys() Devuelve un array con las claves (nombres de propiedades). Object.keys({a:1}) // ["a"]
Object.values() Devuelve un array con los valores. Object.values({a:1}) // [1]
Object.entries() Devuelve array de arrays [clave, valor]. Útil para iterar. Object.entries({a:1}) // [["a",1]]

5. Conversión y Tipos

Método / Operador Descripción Ejemplo
typeof Operador. Devuelve el tipo de dato. ⚠️ typeof null es "object" (error histórico). typeof undefined // "undefined"
isNaN() Comprueba si el valor NO es un número válido. isNaN("texto") // true
parseInt() / parseFloat() Convierte strings a números enteros o decimales. parseInt("10px") // 10
JSON.stringify() Convierte objeto a string JSON. Para enviar datos al servidor. JSON.stringify({a:1})
JSON.parse() Convierte string JSON a objeto JS. Para recibir datos. JSON.parse('{"a":1}')

5.5. Inputs HTML (Lectura de Datos)

Propiedades correctas para leer formularios (No uses siempre .value).

Tipo de Input Propiedad a usar Tipo devuelto
<input type="text"> elemento.value String
<input type="number"> elemento.valueAsNumber Number (¡Ojo! .value devuelve string)
<input type="checkbox"> elemento.checked Boolean (true/false)
<input type="date"> elemento.valueAsDate Date Object
<input type="file"> elemento.files FileList (Array)

6. Window / BOM (Navegador)

Acciones globales y control de la ventana del navegador. El objeto window es implícito.

Método / Propiedad Descripción Ejemplo
alert() Muestra un mensaje de alerta (bloqueante). alert("¡Hola!")
confirm() Pide confirmación (Aceptar/Cancelar). Devuelve true/false. if (confirm("¿Seguro?")) ...
prompt() Pide un dato al usuario. Devuelve string o null. let nombre = prompt("Tu nombre")
setTimeout() Ejecuta una función una vez después de X ms. Devuelve un identificador. let timer = setTimeout(func, 1000)
clearTimeout() Cancela la ejecución usando la variable que guardaste del setTimeout. clearTimeout(timer)
setInterval() Ejecuta una función repetidamente cada X ms. Devuelve un identificador. let timer = setInterval(func, 1000)
clearInterval() Detiene la repetición usando la variable que guardaste del setInterval. clearInterval(timer)
requestAnimationFrame() Ejecuta una función antes del siguiente repintado. Óptimo para animaciones suaves (60fps). let id = requestAnimationFrame(animar)
cancelAnimationFrame() Cancela una animación creada con requestAnimationFrame. cancelAnimationFrame(id)
location Propiedad (objeto). Controla la URL actual. .href redirige, .reload() recarga. location.href = "https://google.com"
localStorage Propiedad (objeto). Almacena datos persistentes en el navegador. localStorage.setItem("clave", "valor")
console.log() Imprime mensajes en la consola de desarrollo (F12). console.log("Depurando...")
open() / close() Abre o cierra una nueva pestaña/ventana. window.open("url")
innerWidth / innerHeight Ancho y alto útil de la ventana (viewport). let ancho = window.innerWidth
scrollTo() Hace scroll a unas coordenadas X, Y. window.scrollTo(0, 0) // Ir arriba

7. Document (El Documento)

Punto de entrada al DOM. Se usa para buscar elementos o crear nuevos.

Método / Propiedad Descripción Ejemplo
document.write() Escribe directamente en el documento. ⚠️ Peligroso: Si se usa después de cargar la página, la borra por completo. Evitar. document.write("Texto")
getElementById() Selecciona un elemento por su atributo ID. Rápido y único. document.getElementById("mi-id")
querySelector() Selecciona el primer elemento que coincida con el selector CSS. document.querySelector(".clase p")
querySelectorAll() Selecciona todos los elementos que coincidan (NodeList). document.querySelectorAll("div")
createElement() Crea un nuevo elemento HTML en memoria (aún no visible). document.createElement("div")
body / head / title Acceso directo a partes clave del documento. document.title = "Nuevo Título"

8. DOM Manipulation (Elementos)

Métodos y propiedades que se aplican a elementos individuales (nodos) una vez seleccionados.

Método / Propiedad Descripción Ejemplo
innerHTML Propiedad. Lee o reemplaza el HTML interno. ⚠️ Cuidado con XSS (Inyección de código malicioso). el.innerHTML = "Negrita"
textContent Propiedad. Lee o reemplaza solo el TEXTO (ignora etiquetas HTML). Más seguro. el.textContent = "Solo texto"
style Propiedad (objeto). Modifica estilos CSS en línea. (CamelCase). el.style.backgroundColor = "red"
classList.add() Añade una clase CSS. el.classList.add("activo")
classList.remove() Elimina una clase CSS. el.classList.remove("oculto")
classList.toggle() Alterna una clase (si está la quita, si no, la pone). el.classList.toggle("dark-mode")
classList.contains() Devuelve true si tiene la clase. if(el.classList.contains("ok"))...
getAttribute() Obtiene el valor de un atributo HTML (no necesariamente estándar). el.getAttribute("data-id")
setAttribute() Define o modifica un atributo. el.setAttribute("src", "img.jpg")
removeAttribute() Elimina un atributo por completo. el.removeAttribute("disabled")
value Propiedad. Obtiene el valor escrito en inputs de formulario. input.value
append() / appendChild() Inserta contenido/elementos al final del elemento. padre.append(hijo)
prepend() Inserta contenido/elementos al principio. padre.prepend(hijo)
remove() Elimina el propio elemento del DOM. el.remove()
addEventListener() Escucha eventos (clicks, teclas, etc.) y ejecuta una función. el.addEventListener("click", func)
parentElement Propiedad. Accede al padre del elemento. el.parentElement
children Propiedad. Lista de hijos (elementos). el.children[0]

9. Dates (Fechas)

Métodos y propiedades que se aplican a elementos individuales (nodos) una vez seleccionados.

Método / Propiedad Descripción Ejemplo
new Date() Crea un objeto Date con la fecha y hora actuales. let d = new Date()
new Date("YYYY-MM-DD") Crea un objeto Date a partir de una cadena de fecha. new Date("2023-10-26")
getFullYear() Obtiene el año (4 dígitos). d.getFullYear() // 2023
getMonth() Obtiene el mes (0-11). ⚠️ Enero es 0. d.getMonth() // 9 (Octubre)
getDate() Obtiene el día del mes (1-31). d.getDate() // 26
getHours() / getMinutes() / getSeconds() Obtiene la hora, minutos, segundos. d.getHours() // 14
getDay() Obtiene el día de la semana (0-6). ⚠️ Domingo es 0. d.getDay() // 4 (Jueves)
getTime() Milisegundos desde 1 Enero 1970 (Epoch). Útil para comparar fechas. d.getTime()
toLocaleString() Formatea la fecha a la configuración regional del usuario. d.toLocaleString('es-ES')
Date.now() Milisegundos actuales (más rápido que new Date().getTime()). Date.now()

10. Expresiones Regulares (RegEx)

Patrones para búsqueda y validación de texto.

Método Uso Resultado
/regex/.test(str) ¿Cumple el patrón? (Boolean) /^\d+$/.test("123") // true
str.match(/regex/) Extrae coincidencias (Array) "A1".match(/\d/) // ["1"]
str.replace(/re/, "x") Sustituye texto "Hi".replace(/i/, "o") // "Ho"

Metacaracteres: \d (dígito), \w (alfanumérico), \s (espacio), ^ (inicio), $ (fin), + (1 o más), * (0 o más), ? (opcional).

11. Validación de Formularios

Técnicas para asegurar la calidad de los datos.

🛠 Herramientas

  • checkValidity(): Valida si el input cumple sus atributos (required, min, etc).
  • setCustomValidity("msg"): Define un mensaje de error personalizado (vacío = válido).
  • reportValidity(): Muestra el mensaje de error al usuario inmediatamente.

💡 Trucos y Tips

  • Usa el evento 'input' para validación en tiempo real (mientras escriben).
  • Usa el evento 'change' o 'blur' para validación al terminar de editar.
  • novalidate en el <form> para desactivar la validación nativa y usar la tuya por JS.

❌ Errores a Evitar

  • Solo validar en cliente: El backend SIEMPRE debe volver a validar.
  • Bloquear con alert(): Usa mensajes visuales cerca del input, no alertas intrusivas.
  • Regex ilegibles: Comenta tus regex complejas o divídelas.
Volver a JS