Errores Comunes

1. Coordenadas: CSS vs JS

CSS (Posicionamiento):

right: 0;
// Distancia: Está PEGADO al borde derecho

JS (Rectángulo):

rect.right
// Coordenada x: Es igual a rect.left + ancho
// Mide la distancia desde la IZQUIERDA hasta el final del elemento

2. Errores de Tipos y Lógica

Concatenación Inesperada ("1" + 1)

El operador + sirve para sumar y para unir texto. Si uno de los dos es texto, JS convierte todo a texto.

let edad = prompt("Edad?"); 
// prompt devuelve STRING
console.log(edad + 1); 
// Si escribe 20, sale "201"

let edad = Number(prompt("Edad?"));
console.log(edad + 1);
// Ahora sale 21

Comparar Arrays u Objetos directamente

Dos objetos/arrays distintos nunca son iguales, aunque tengan lo mismo dentro (se comparan por referencia).

if ([1,2] === [1,2]) {
  // ❌ NUNCA entra aquí
}

// Hay que comparar sus valores
// o usar JSON.stringify (truco rápido)
if (JSON.stringify(a) === JSON.stringify(b))...

Return multilínea roto

Si pones un salto de línea justo después de return, JS inserta un punto y coma automático y devuelve undefined.

return
{
  nombre: "Pepe"
}
// Devuelve undefined

return {
  nombre: "Pepe"
}
// O usar paréntesis si bajas línea

3. Bucles y Arrays

Modificar el array mientras lo recorres

Si borras elementos de un array dentro de un for (avanzando), los índices se desplazan y te saltas el siguiente elemento.

let nums = [1, 2, 2, 3];
for(let i=0; i<nums.length; i++) {
  if(nums[i]===2) nums.splice(i,1);
}
// Resultado: [1, 2, 3] ❌
// (Se saltó el segundo 2)

let nums = [1, 2, 2, 3];

// Solución: Crear uno nuevo
let limpios = nums.filter(n => n!==2);

// Resultado: [1, 3] ✅

Alternativa: Recorrer el bucle hacia atrás (i--)

4. Errores con Asincronía (Async/Await)

El misterio de [object Promise]

Si olvidas el await al llamar a una función asíncrona, obtienes la Promesa (el "ticket"), no el dato.

async function getDato() { return 10; }

let valor = getDato();
console.log(valor); 
// Muestra: Promise {<fulfilled>: 10}
// ¡No puedes operar con esto!

async function getDato() { return 10; }

let valor = await getDato();
console.log(valor); 
// Muestra: 10
// ✅ Ahora sí es el número

El bucle que NO espera (forEach)

forEach no sabe trabajar con promesas. Lanza todas las operaciones a la vez y no espera a que terminen.

items.forEach(async (item) => {
  await procesar(item);
});
console.log("¡Terminado!");
// ❌ "¡Terminado!" sale ANTES 
// de que termine de procesar

// Usa for...of para secuencial
for (const item of items) {
  await procesar(item);
}

// O Promise.all para paralelo
await Promise.all(items.map(procesar));

5. Referencias y Copias (El Fantasma)

Modificar el original sin querer (Referencia)

En JS, los objetos y arrays se pasan por referencia. Si asignas b = a, ambos apuntan al mismo sitio.

let user = { nombre: "Ana" };
let admin = user; // Copia referencia

admin.nombre = "Luisa";
// ¡HA CAMBIADO USER TAMBIÉN!
console.log(user.nombre); // "Luisa" ??

let user = { nombre: "Ana" };
// Copia real (Spread Operator)
let admin = { ...user }; 

admin.nombre = "Luisa";
console.log(user.nombre); // "Ana" ✅

Creer que 'const' congela el objeto

const impide reasignar la variable, pero NO impide modificar el contenido del objeto.

const coche = { marca: "Ford" };
coche = { marca: "Fiat" }; 
// ❌ Error: Assignment to constant variable

// PERO...

const coche = { marca: "Ford" };
coche.marca = "Ferrari"; 
// ✅ Esto SÍ funciona.
// Si quieres congelar: Object.freeze(coche)

6. Arrays Traicioneros

.sort() ordena alfabéticamente (1, 10, 2)

Por defecto, sort() convierte todo a string. Por eso "10" va antes que "2".

const nums = [1, 20, 5, 100];
nums.sort();
// Resultado: [1, 100, 20, 5] 
// ❌ ¡Caos total!

const nums = [1, 20, 5, 100];
// Hay que dar una función de comparación
nums.sort((a, b) => a - b);
// Resultado: [1, 5, 20, 100] ✅

7. Matemáticas Extrañas

0.1 + 0.2 !== 0.3

Los ordenadores trabajando en binario no tienen precisión infinita para decimales.

console.log(0.1 + 0.2);
// 0.30000000000000004
// ???

// Solución: Redondear o trabajar con enteros
let res = (0.1 + 0.2).toFixed(2); // "0.30"
// O multiplicar x10, sumar y dividir /10

NaN no es igual a nada (ni a sí mismo)

Es el único valor en JS que no es igual a sí mismo.

if (resultado === NaN) { ... }
// ❌ Esto SIEMPRE es falso

if (Number.isNaN(resultado)) { ... }
// ✅ Forma correcta de comprobarlo