10 trucos de JavaScript

por | Jul 6, 2026

10 Trucos Javascript

Aquí tienes 10 trucos de JavaScript realmente prácticos, explicados con claridad y con ejemplos que puedes usar directamente en tus proyectos. Cada truco empieza con un Guided Link para que puedas profundizar si lo necesitas.

1. Copiar texto al portapapeles

Ideal para botones “Copiar”.

js

navigator.clipboard.writeText("Hola Asturias");

La forma más sencilla y moderna de copiar texto al portapapeles en JavaScript es usando la API del navegador navigator.clipboard. Funciona en la mayoría de navegadores actuales y es limpia, segura y fácil de usar.

Funciona en navegadores modernos y evita tener que usar hacks con execCommand.

Método recomendado: navigator.clipboard.writeText()

Ejemplo básico

js

navigator.clipboard.writeText("Texto a copiar")
  .then(() => {
    console.log("Copiado al portapapeles");
  })
  .catch(err => {
    console.error("Error al copiar:", err);
  });

Este método devuelve una promesa, así que puedes usar .then() o async/await.

Ejemplo práctico con botón

html

<button id="copiar">Copiar</button>

<script>
document.getElementById("copiar").addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText("Hola FRANCISCO desde Asturias");
    alert("Texto copiado");
  } catch (e) {
    alert("No se pudo copiar");
  }
});
</script>

Requisitos importantes

  • Solo funciona en HTTPS (o localhost).
  • Debe ejecutarse por una acción del usuario (click, input, etc.).
  • Si el navegador es muy antiguo, necesitarás un fallback.

Alternativa para navegadores antiguos

Este truco usa un <textarea> temporal y document.execCommand("copy"):

js

function copiarFallback(texto) {
  const area = document.createElement("textarea");
  area.value = texto;
  document.body.appendChild(area);
  area.select();
  document.execCommand("copy");
  document.body.removeChild(area);
}

2. Convertir un array de objetos en un mapa

Perfecto para búsquedas rápidas.

js

const usuarios = [
  { id: 1, nombre: "Fran" },
  { id: 2, nombre: "Ana" }
];

const mapa = new Map(usuarios.map(u => [u.id, u]));
console.log(mapa.get(2).nombre); // "Ana"

3. Clonar objetos sin perder propiedades

Evita mutaciones accidentales.

js

const original = { nombre: "Fran", datos: { edad: 42 } };
const copia = structuredClone(original);

structuredClone es más seguro que JSON.parse(JSON.stringify()).

4. Esperar de forma elegante con async/await

Simula una pausa sin bloquear.

js

const esperar = ms => new Promise(r => setTimeout(r, ms));

async function demo() {
  console.log("Inicio");
  await esperar(1000);
  console.log("Fin");
}

5. Filtrar valores nulos o vacíos fácilmente

Limpia arrays sin complicarte.

js

const limpio = [0, null, "hola", undefined, 5].filter(Boolean);
// [0, "hola", 5]

6. Detectar si estás en móvil o escritorio

Útil para adaptar interfaces.

js

const esMovil = /Mobi|Android/i.test(navigator.userAgent);

Detectar si el usuario está en móvil, tablet o escritorio con JavaScript es muy útil para adaptar interfaces, cargar recursos ligeros o cambiar comportamientos. Aquí tienes las formas más prácticas, explicadas con claridad y listas para usar.

Detectar móvil con userAgent (método clásico y directo)

Funciona en todos los navegadores.

js

const esMovil = /Android|iPhone|iPad|iPod|Windows Phone|webOS/i.test(navigator.userAgent);

if (esMovil) {
  console.log("Estás en un móvil");
} else {
  console.log("Estás en un ordenador");
}

✔️ Simple ✔️ Compatible ❗ Puede fallar si el navegador oculta el userAgent (cada vez más común)

Detectar tipo de dispositivo por tamaño de pantalla

Muy útil para diseño responsive.

js

const esMovil = window.matchMedia("(max-width: 768px)").matches;

console.log(esMovil ? "Pantalla móvil" : "Pantalla grande");

✔️ Ideal para UI ✔️ No depende del navegador ❗ No detecta “dispositivo real”, solo tamaño

Detectar si el dispositivo tiene pantalla táctil

Perfecto para cambiar interacciones (hover vs tap).

js

const esTactil = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

console.log(esTactil ? "Dispositivo táctil" : "No táctil");

✔️ Muy fiable ✔️ Útil para UX ❗ Un portátil con pantalla táctil se detectará como táctil

Detectar móvil con navigator.userAgentData (moderno)

Disponible en Chrome, Edge y navegadores basados en Chromium.

js

if (navigator.userAgentData) {
  const esMovil = navigator.userAgentData.mobile;
  console.log(esMovil ? "Móvil" : "Escritorio");
}

✔️ Preciso ✔️ Futuro estándar ❗ No funciona en Safari ni Firefox (por ahora)

Función completa que combina varios métodos

La más robusta para proyectos reales.

js

function detectarDispositivo() {
  const ua = navigator.userAgent;
  const esMovilUA = /Android|iPhone|iPad|iPod|Windows Phone|webOS/i.test(ua);
  const esTactil = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  const esPantallaPequeña = window.matchMedia("(max-width: 768px)").matches;

  return esMovilUA || esTactil || esPantallaPequeña;
}

console.log(detectarDispositivo() ? "Móvil" : "Escritorio");

✔️ Muy fiable ✔️ Combina señales ✔️ Funciona en todos los navegadores

7. Crear un debounce para evitar spam de eventos

Perfecto para inputs o scroll.

js

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

window.addEventListener("resize", debounce(() => {
  console.log("Redimensionado");
}, 300));

8. Ordenar arrays de forma correcta

Evita el clásico error del orden lexicográfico.

js

const nums = [10, 2, 5];
nums.sort((a, b) => a - b); // [2, 5, 10]

9. Crear un generador de IDs únicos

Sin librerías externas.

js

const generarID = () => crypto.randomUUID();
console.log(generarID());

Aquí tienes varias formas prácticas y fiables de generar IDs únicos en JavaScript, explicadas para que elijas la que mejor encaje en tu proyecto. Cada técnica empieza con un Guided Link para que puedas profundizar si lo necesitas.

Métodos modernos y recomendados

crypto.randomUUID — La forma más segura y moderna

Genera un UUID v4 estándar, perfecto para bases de datos, claves internas, etc.

js

const id = crypto.randomUUID();
console.log(id);
// Ejemplo: "3f9c1b7a-2e4d-4c8b-9f0a-1c2d3e4f5a6b"

✔️ Seguro ✔️ Único ✔️ Sin dependencias ❗ Requiere navegadores modernos

Métodos prácticos para cualquier navegador

ID basado en timestamp

Rápido y compatible con todo.

js

const id = Date.now().toString(36);
console.log(id);
// Ejemplo: "l8h3k9"

✔️ Muy rápido ✔️ Compatible ❗ No es totalmente único si generas muchos IDs en el mismo milisegundo

ID con timestamp + aleatorio

Más seguro que el anterior.

js

const generarID = () =>
  Date.now().toString(36) + Math.random().toString(36).substring(2);

console.log(generarID());
// Ejemplo: "l8h3k9q2w9x8f"

✔️ Único en la práctica ✔️ Compatible con todos los navegadores ❗ No es criptográficamente seguro

Métodos para proyectos reales

ID incremental con cierre

Ideal para listas, tablas o elementos temporales.

js

const crearGeneradorID = () => {
  let contador = 0;
  return () => ++contador;
};

const generarID = crearGeneradorID();

console.log(generarID()); // 1
console.log(generarID()); // 2

✔️ Perfecto para UI ✔️ Control total ❗ No sirve para sistemas distribuidos

ID corto tipo “YouTube”

Muy útil para URLs amigables.

js

const generarID = (l = 8) =>
  Array.from(crypto.getRandomValues(new Uint8Array(l)))
       .map(b => b.toString(36))
       .join("");

console.log(generarID());
// Ejemplo: "k3f9z8q1"

✔️ IDs cortos ✔️ Muy aleatorio ❗ No es UUID estándar

10. Convertir un objeto en parámetros de URL

Muy útil para APIs.

js

const params = { nombre: "Fran", ciudad: "Oviedo" };
const query = new URLSearchParams(params).toString();
// nombre=Fran&ciudad=Oviedo

👁️ 16 visitas