modern-javascript-patterns
Apply Modern JavaScript Patterns
Legacy JavaScript codebases are difficult to maintain and optimize. This skill provides comprehensive guidance on ES6+ features including arrow functions, destructuring, async/await, promises, functional programming patterns, and modern class features to write clean, efficient, and maintainable JavaScript code.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "modern-javascript-patterns". How do I destructure nested objects in JavaScript?
Expected outcome:
Nested object destructuring allows you to extract values from deeply nested objects:
```javascript
const user = {
id: 1,
name: 'Alice',
address: {
city: 'Boston',
country: 'USA'
}
};
// Nested destructuring
const {
name,
address: { city, country }
} = user;
console.log(city); // 'Boston'
console.log(country); // 'USA'
// With default values
const {
address: {
city = 'Unknown',
zipCode = '00000'
} = {}
} = user;
```
Using "modern-javascript-patterns". What's the difference between Promise.all and Promise.allSettled?
Expected outcome:
Promise.all fails fast - if any promise rejects, the entire operation fails. Promise.allSettled waits for all promises to settle regardless of outcome:
```javascript
// Promise.all - fails on first rejection
const users = await Promise.all([
fetchUser(1),
fetchUser(2)
]); // Throws if either fails
// Promise.allSettled - waits for all
const results = await Promise.allSettled([
fetchUser(1),
fetchUser(2)
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Success:', result.value);
} else {
console.log('Failed:', result.reason);
}
});
```
Security Audit
SafeThis is a documentation skill containing educational content about JavaScript ES6+ patterns. All static analysis findings are false positives. The 'weak cryptographic algorithm' flags are triggered by JavaScript template literals and class private field syntax (#). The 'shell backtick execution' flags are false positives from JavaScript template literals in code examples. The 'dynamic import()' detections are legitimate ES6 module examples being documented. No malicious code patterns exist.
Quality Score
What You Can Build
Refactor Legacy JavaScript Codebases
Migrate callback-based code to Promises and async/await patterns. Replace traditional functions with arrow functions to fix 'this' binding issues. Apply destructuring and spread operators to simplify data manipulation.
Learn Functional Programming in JavaScript
Understand how to use map, filter, and reduce for data transformation. Learn to create pure functions that avoid side effects. Apply function composition and piping for readable data processing pipelines.
Write Maintainable JavaScript Code
Apply modern JavaScript patterns for cleaner, more expressive code. Use proper module organization and ES6 class features. Implement performance optimizations like debouncing, throttling, and lazy evaluation.
Try These Prompts
How do I use [feature] in modern JavaScript? Can you show me examples of [use case]?
I have this legacy JavaScript code: [code snippet]. How can I refactor it to use modern ES6+ patterns? What specific features should I apply?
I need to implement [specific async task]. Should I use Promises, async/await, or a combination? Show me the best practice pattern for [scenario] with proper error handling.
I have an array of objects: [data structure]. How can I use functional programming to [transform/group/filter/aggregate] this data? Show me step-by-step how to compose functions for this task.
Best Practices
- Use const by default and only use let when reassignment is truly needed. This prevents accidental mutations and makes code intent clearer.
- Prefer arrow functions for callbacks and methods that need lexical 'this' binding. Use traditional functions only when you need dynamic 'this'.
- Apply destructuring and spread operators for cleaner data manipulation. Avoid direct property access and mutation when possible.
Avoid
- Avoid wrapping already async functions in new Promises. If a function already returns a Promise, use it directly with await.
- Do not mutate input data in functions. Always return new objects or arrays using spread operators to maintain immutability.
- Avoid callback pyramids and excessive Promise chaining. Use async/await for better readability and error handling.