Javascript

JavaScript Vanilla ES6+ - Reglas

JavaScript vanilla ES6+ es el enfoque preferido.

1. Instalación y Versión

Versión mínima

| Tecnología | Versión Mínima | | ---------- | ----------------- | | JavaScript | ES2020+ (moderno) | | Node.js | 18+ |

---

2. Cuándo USAR JavaScript

| Caso | Justificación | | --------------------------- | ---------------------------------------- | | Interactividad dinámica | Modales, acordeones, tabs | | Manipulación del DOM | Crear/actualizar contenido dinámicamente | | Fetch/AJAX | Obtener/enviar datos sin recargar | | Validación cliente | Validación en tiempo real | | APIs del navegador | LocalStorage, Geolocation, etc. |

---

3. Cuándo NO USAR JavaScript

| En lugar de... | Usar... | | ------------------- | -------------------------- | | Animaciones simples | CSS Transitions/Animations | | Tooltips simples | CSS-only o title attribute | | Modales simples | HTML ` | | Acordeones simples | HTML / | | Carousels simples | CSS scroll snap | | Dropdowns simples | HTML ` |

---

4. APIs Preferidas

| En lugar de... | Usar... | | ----------------------------- | ------------------------------------------ | | var | const (por defecto), let (si reasigna) | | function | Arrow functions cuando corresponda | | Callbacks | async/await + Promise | | $.ajax | fetch | | for loops | forEach, map, filter, reduce | | Strings concat | Template literals ` hello ${name} | | setTimeout` para animaciones | CSS transitions | | Animaciones con JS | Web Animations API | | Detectar elementos en vista | IntersectionObserver |

---

5. Selección DOM

// Selección simple
const element = document.querySelector(".class");
const elements = document.querySelectorAll(".class");

// Por ID (más rápido)
const el = document.getElementById("my-id");

// Con dataset
element.dataset.property = "value";
const value = element.dataset.property;

---

6. Manipulación del DOM

Crear elementos

// Crear elemento
const div = document.createElement("div");
div.className = "card";
div.textContent = "Contenido";

// Crear con innerHTML (solo si no hay datos de usuario)
container.innerHTML = 'Contenido seguro';

// Evitar XSS con textContent
const userInput = 'alert("xss")';
element.textContent = userInput; // Seguro
element.innerHTML = userInput; // Peligroso

Agregar elementos

// Append (al final)
parent.appendChild(element);
parent.append("Texto", element);

// Prepend (al inicio)
parent.prepend(element);

// Before/After
sibling.before(element);
sibling.after(element);

// Reemplazar
oldElement.replaceWith(newElement);

// Remover
element.remove();
element.parentNode.removeChild(element);

Templates

// Usar template para estructuras complejas
const template = document.querySelector("#card-template");
const card = template.content.cloneNode(true);
card.querySelector(".title").textContent = "Nuevo título";
document.querySelector(".container").appendChild(card);

---

7. Eventos

Event listener

// Basic
element.addEventListener("click", (event) => {
  console.log(event.target);
});

// Con opciones
element.addEventListener("click", handler, { once: true, passive: true });

// Remover listener
element.removeEventListener("click", handler);

Evitar onclick en HTML

Guardar
Acción

Guardar
Acción

  document.querySelectorAll("[data-action]").forEach((el) => {
    el.addEventListener("click", (e) => {
      e.preventDefault();
      // acción...
    });
  });

Eventos de teclado

// Keyboard accessible
element.addEventListener("keydown", (event) => {
  if (event.key === "Enter" || event.key === " ") {
    event.preventDefault();
    // acción...
  }
});

---

8. Módulos ES (ESM)

Estructura de archivos

src/
├── js/
│   ├── main.js        # Entry point
│   ├── editor.js      # Lógica del editor
│   └── utils.js       # Funciones helper

Export/Import

// editor.js
export function initEditor() {
  // ...
}

export const EDITOR_CONFIG = {
  maxLength: 10000,
};

// main.js
import { initEditor } from "./editor.js";

document.addEventListener("DOMContentLoaded", () => {
  initEditor();
});

Configuración en HTML

---

9. Fetch API

Solicitud básica

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
    return null;
  }
}

Con headers

async function postData(url, data) {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer token123",
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

Abort controller (cancelar petición)

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal })
  .then((response) => response.json())
  .catch((error) => {
    if (error.name === "AbortError") {
      console.log("Request cancelled");
    }
  });

// Cancelar después de 5 segundos
setTimeout(() => controller.abort(), 5000);

Retry automático

async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i  setTimeout(r, 1000 * (i + 1)));
    }
  }
}

---

10. Programación Defensiva

Validar inputs

function processData(data) {
  if (!data || typeof data !== "object") {
    console.error("Invalid data");
    return null;
  }
  // procesar...
}

Optional chaining y nullish

// Optional chaining
const value = obj?.nested?.property;
const arr = data?.items?.[0];
const method = obj?.doSomething?.();

// Nullish coalescing
const name = user.name ?? "Anonymous";
const count = items.length ?? 0;

Validar elementos

// Verificar que elemento existe antes de usar
const button = document.querySelector(".btn-submit");
if (button) {
  button.addEventListener("click", handleSubmit);
}

---

11. Storage

localStorage

// Guardar
localStorage.setItem("user", JSON.stringify({ name: "John" }));

// Leer
const user = JSON.parse(localStorage.getItem("user") || "{}");

// Remover
localStorage.removeItem("user");

// Verificar disponibilidad
const hasStorage = () => {
  try {
    localStorage.setItem("test", "test");
    localStorage.removeItem("test");
    return true;
  } catch (e) {
    return false;
  }
};

sessionStorage

// Similar a localStorage pero se limpia al cerrar pestaña
sessionStorage.setItem("tempData", "value");
const temp = sessionStorage.getItem("tempData");

---

12. Date/Time (Intl API)

Formatear fechas

const date = new Date();

// Formato local
new Intl.DateTimeFormat("es-ES", {
  year: "numeric",
  month: "long",
  day: "numeric",
}).format(date);

// Formato corto
new Intl.DateTimeFormat("en-US", {
  month: "short",
  day: "numeric",
}).format(date);

Formatear números

// Moneda
new Intl.NumberFormat("es-ES", {
  style: "currency",
  currency: "EUR",
}).format(1234.56);

// Porcentaje
new Intl.NumberFormat("en-US", {
  style: "percent",
}).format(0.75);

---

13. Intersection Observer

Detectar cuando un elemento entra en el viewport:

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        // O cargar contenido lazy
      }
    });
  },
  {
    root: null,
    rootMargin: "0px",
    threshold: 0.1,
  },
);

observer.observe(document.querySelector(".lazy-load"));

---

14. Web Animations API

element.animate(
  [
    { opacity: 0, transform: "translateY(20px)" },
    { opacity: 1, transform: "translateY(0)" },
  ],
  {
    duration: 300,
    easing: "ease-out",
    fill: "forwards",
  },
);

---

15. Performance

Evitar Reflows/Repaints

// ❌ Malo - múltiples reflows
element.style.width = "100px";
element.style.height = "100px";
element.style.padding = "10px";

// ✅ Bueno - usar CSS classes o cssText
element.style.cssText = "width: 100px; height: 100px; padding: 10px;";

// ✅ Mejor - usar classList
element.classList.add("active");

Debounce

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

// Uso
const debouncedSearch = debounce(search, 300);
input.addEventListener("input", debouncedSearch);

Throttle

function throttle(fn, limit) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// Uso
const throttledScroll = throttle(handleScroll, 100);
window.addEventListener("scroll", throttledScroll);

---

16. Prohibiciones

• ❌ NO usar: Vue, Svelte, Angular (sin autorización)
• ❌ NO usar: React (sin cargar skill react)
• ❌ NO usar: TypeScript para vanilla (sin cargar skill typescript)
• ❌ No usar var
• ❌ No dejar console.log, debugger en código final
• ❌ No usar jQuery para selección básica (usar vanilla)
• ❌ No usar JavaScript para animaciones simples (usar CSS)
• ❌ No usar onclick en HTML (usar addEventListener)
• ❌ No usar innerHTML con datos de usuario (riesgo XSS)

---

17. Referencias

> Nota: Para HTML semántico, ver [HTML](../html/SKILL.md) > Nota: Para estilos CSS, ver [CSS](../css/SKILL.md)

---

18. Dependencias Comunes

JavaScript vanilla típicamente no requiere dependencias. Para proyectos específicos, considerar:

| Paquete | Uso | | --------- | --------------------------- | | date-fns | Fechas | | lodash-es | Utilidades (tree-shakeable) |

---

Última actualización: 2026-07

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: 14BryanEspinoza
• Source: 14BryanEspinoza/agent-stack
• License: MIT

Install and usage instructions live in the source repository linked above.