10 Hacks de JavaScript que te ahorrarán tiempo

JavaScript puede ser tu mejor amigo o tu peor pesadilla. A veces parece magia, otras veces te encuentras atrapado en un error incomprensible. Pero los desarrolladores inteligentes no luchan solos: encuentran atajos, aprenden de otros y usan los mejores recursos.

Antes de que te quedes atascado otra vez, aquí tienes 10 hacks de JavaScript que te ahorrarán tiempo, esfuerzo y frustración.

1. Deja de Usar console.log Como un Novato

Todos lo hacemos: llenamos el código de console.log(). Pero hay una mejor manera:

console.table([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]);

Esto imprime una tabla formateada en lugar de un desastre ilegible. ¿Quieres más trucos de depuración? Echa un vistazo a StackOverflow Trending.

2. Destructura Como un Pro

En lugar de escribir esto:

const user = data.user;
const age = data.age;

Haz esto:

const { user, age } = data;

Es más limpio, rápido y reduce el código innecesario.

3. Reemplaza Bucles con .map(), .filter() y .reduce()

Olvida los aburridos for loops. JavaScript moderno ofrece mejores opciones:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

4. Evita Mutaciones de Objetos con Object.freeze()

Si no quieres que un objeto cambie accidentalmente:

const settings = Object.freeze({ theme: 'dark', layout: 'grid' });
settings.theme = 'light'; // No funcionará

Esto ayuda a evitar errores inesperados.

5. Usa Optional Chaining para Evitar Errores

En lugar de hacer esto:

if (user && user.profile && user.profile.image) {
  console.log(user.profile.image);
}

Haz esto:

console.log(user?.profile?.image);

Mucho más limpio, ¿verdad?

6. Convierte NodeLists en Arrays al Instante

document.querySelectorAll() devuelve una NodeList en lugar de un array. Convierte fácilmente:

const elements = [...document.querySelectorAll('div')];

Ahora puedes usar .map(), .filter(), y más.

7. Verifica Si un Objeto Tiene una Propiedad

En lugar de comprobar undefined, usa:

if ('name' in user) {
  console.log('El usuario tiene un nombre');
}

Más confiable y fácil de leer.

8. Optimiza el Rendimiento con requestAnimationFrame

En lugar de setTimeout o setInterval, usa:

function update() {
  // Lógica de animación
  requestAnimationFrame(update);
}
update();

Más fluido y eficiente.

9. Usa ?? en Lugar de || para Valores Nulos o Indefinidos

El operador de coalescencia nula (??) es mejor que || cuando necesitas un valor predeterminado, pero quieres conservar valores falsy como 0 o "":

const userInput = 0;
const value = userInput ?? 'Valor por defecto';
console.log(value); // 0 (en lugar de 'Valor por defecto')

10. Mantente Actualizado sin Sobrecarga de Información

JavaScript avanza rápido. En lugar de abrumarte, revisa la sección de Artículos para obtener solo los mejores análisis y tendencias.