Escriba JavaScript más limpio y mantenible utilizando características ES6+ como async/await, destructuring, operadores spread y patrones de programación funcional.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "modern-javascript-patterns". Convert this callback to async/await: function getData(id, callback) { fetch('/api/' + id) .then(res => res.json()) .then(data => callback(null, data)) .catch(err => callback(err)); }
Resultado esperado:
Versión refactorizada con async/await:
async function getData(id) {
try {
const res = await fetch(`/api/${id}`);
const data = await res.json();
return data;
} catch (err) {
throw err;
}
}
Beneficios:
- Código más limpio con apariencia síncrona
- Mejor manejo de errores con try/catch
- Más fácil de depurar y mantener
Usando "modern-javascript-patterns". Apply destructuring to this code: const user = { name: 'John', age: 30, address: { city: 'NYC' } }; const name = user.name; const city = user.address.city;
Resultado esperado:
Refactorizado con destructuring:
const user = { name: 'John', age: 30, address: { city: 'NYC' } };
const { name, address: { city } } = user;
O con renombramiento:
const { name: userName, address: { city: userCity } } = user;
Auditoría de seguridad
SeguroAll 89 static findings are FALSE POSITIVES. The scanner misinterprets JavaScript code examples in markdown documentation as security risks. Backticks in code blocks are not shell commands. References to fetch() and dynamic import() are legitimate ES6+ patterns being taught. This is a safe educational skill about modern JavaScript patterns.
Problemas de riesgo alto (1)
Problemas de riesgo medio (2)
Problemas de riesgo bajo (2)
Puntuación de calidad
Lo que puedes crear
Modernización de Código Heredado
Refactorice código JavaScript heredado basado en callbacks para usar Promises y async/await para una mejor legibilidad y manejo de errores.
Aprendizaje de JavaScript Moderno
Comprenda y aplique características ES6+ como destructuring, operadores spread y módulos para escribir código más expresivo.
Mejoras en Revisión de Código
Aplique patrones modernos de JavaScript durante las revisiones de código para sugerir implementaciones más limpias y mantenibles.
Prueba estos prompts
Convierta esta función JavaScript basada en callbacks para usar sintaxis async/await. Muestre el código antes y después. [Inserte código callback aquí]
Refactorice este código JavaScript para usar destructuring de objetos y arrays. Haga el código más conciso y legible. [Inserte código con propiedades anidadas o arrays aquí]
Transforme este código JavaScript imperativo para usar programación funcional con map, filter y reduce. Muestre un enfoque de pipeline encadenable. [Inserte código de transformación basado en bucles aquí]
Muéstrame cómo implementar carga diferida con import() dinámico para este módulo de funcionalidad. Incluye manejo de errores y lógica de carga condicional.
Mejores prácticas
- Use const por defecto, let solo cuando se necesite reasignación
- Prefiera funciones flecha para callbacks para evitar problemas de enlace de this
- Use async/await en lugar de cadenas de Promises para mejor legibilidad
Evitar
- Usar var en lugar de const/let - carece de alcance de bloque
- Callback hell con funciones anónimas anidadas
- Mutación directa de objetos en lugar de usar patrones inmutables
Preguntas frecuentes
¿Cuál es la diferencia entre let y const?
¿Cuándo debo usar async/await en lugar de Promises?
¿Qué es el destructuring en JavaScript?
¿Cuáles son los beneficios de las funciones flecha?
¿Para qué se usa el operador spread?
¿Cómo ayudan las importaciones dinámicas al rendimiento?
Detalles del desarrollador
Autor
sickn33Licencia
MIT
Repositorio
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/modern-javascript-patternsRef.
main
Estructura de archivos