JavaScript es un lenguaje flexible y potente que permite a los desarrolladores web hacer cosas asombrosas. Te listo 15 trucos útiles con pequeños snippets de código que puedes empezar a usar de inmediato.

1. Detectar el Navegador

Es útil saber qué navegador está usando el visitante para adaptar ciertas funcionalidades.

const detectBrowser = () => {
  const { userAgent } = navigator;
  if (userAgent.includes("Firefox")) return "Mozilla Firefox";
  if (userAgent.includes("OPR") || userAgent.includes("Opera")) return "Opera";
  if (userAgent.includes("Trident")) return "Microsoft Internet Explorer";
  if (userAgent.includes("Edge")) return "Microsoft Edge";
  if (userAgent.includes("Chrome")) return "Google Chrome";
  if (userAgent.includes("Safari")) return "Apple Safari";
  return "Unknown";
};

console.log(`Browser: ${detectBrowser()}`);

Este snippet detecta el navegador del usuario.

2. Evitar el Cierre de una Página

Puedes avisar al usuario antes de que cierre o recargue una página.

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = '';
});

Usa este evento para mostrar una confirmación antes de cerrar la página.

3. Desactivar el Click Derecho

Esto puede ayudar a proteger el contenido de tu página.

document.addEventListener('contextmenu', (event) => event.preventDefault());

Evita que el menú contextual aparezca cuando se hace clic derecho.

4. Copiar Texto al Portapapeles

Copia texto de manera programática usando JavaScript.

const textToCopy = '¡Hola, Mundo!';
navigator.clipboard.writeText(textToCopy).then(() => {
  console.log('Texto copiado al portapapeles');
}).catch(err => {
  console.error('Error al copiar el texto: ', err);
});

Este snippet copia el texto al portapapeles del usuario.

5. Filtrar Objetos en un Array

Filtra un array de objetos según una propiedad específica.

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const filteredUsers = users.filter(user => user.age > 30);
console.log(filteredUsers);

Encuentra usuarios mayores de 30 años.

6. Crear Retrasos con Promesas

A veces necesitas añadir un pequeño retraso en tu código.

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
delay(2000).then(() => console.log('2 segundos han pasado'));

Crea retrasos manejables con promesas en JavaScript.

7. Comprobar si un Elemento está en Vista

Comprueba si un elemento está visible en la ventana gráfica del usuario.

const isInViewport = el => {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

Esta función verifica si el elemento está en la ventana gráfica.

8. Formatear una Fecha

Formatea una fecha en un formato legible.

const formatDate = date => {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Date(date).toLocaleDateString('es-ES', options);
};
console.log(formatDate('2023-10-10'));

Esto devuelve la fecha en el formato '10 de octubre de 2023'.

9. Intercambiar Dos Variables

Intercambia el valor de dos variables sin necesidad de una tercera variable temporal.

[a, b] = [b, a];
console.log(a, b);

Útil para intercambiar valores de forma rápida.

10. Ordenar un Array por Propiedad

Ordena un array de objetos por una propiedad específica.

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];
users.sort((a, b) => a.age - b.age);
console.log(users);

Ordena los usuarios por edad.

11. Desactivar Entrada de Teclado

Puedes evitar que los usuarios escriban en un campo de entrada.

const input = document.querySelector('input');
input.addEventListener('keydown', (event) => event.preventDefault());

Útil en casos donde se necesita desactivar temporalmente la entrada.

12. Verificar si un String es un JSON Válido

Determina rápidamente si un string es un JSON válido.

const isValidJSON = str => {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
};
console.log(isValidJSON('{ "name": "John" }'));

Evalúa si el string es un JSON correcto.

13. Obtener el Valor Máximo de un Array

Encuentra el valor máximo de un array de números.

const array = [10, 5, 15, 20];
const max = Math.max(...array);
console.log(max);

El resultado será 20.

14. Obtener Parámetros de URL

Extrae parámetros de una URL de manera sencilla.

const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get('paramName');
console.log(paramValue);

Puedes acceder a los valores de los parámetros de la URL.

15. Scroll Suave a un Elemento

Desplázate suavemente a un elemento específico en la página.

document.querySelector('#element').scrollIntoView({
  behavior: 'smooth'
});

Ideal para mejorar la experiencia de usuario en la navegación.