lifangda Modern JavaScript Patterns
Comprehensive guide for mastering modern JavaScript (ES6+) features, functional programming patterns, and best practices for writing clean, maintainable, and performant code.
When to Use This Skill
- Refactoring legacy JavaScript to modern syntax
- Implementing functional programming patterns
- Optimizing JavaScript performance
- Writing maintainable and readable code
- Working with asynchronous operations
- Building modern web applications
- Migrating from callbacks to Promises/async-await
- Implementing data transformation pipelines
ES6+ Core Features
Arrow Functions
// Concise syntax
const add = (a, b) => a + b;
const double = x => x * 2;
// Lexical 'this' binding
class Counter {
constructor() {
this.count = 0;
}
increment = () => {
this.count++; // 'this' refers to Counter instance
};
}
See detailed patterns: Arrow Functions & Syntax
Destructuring
// Object destructuring
const { name, email } = user;
const { address: { city } } = user; // Nested
// Array destructuring
const [first, second, ...rest] = numbers;
[a, b] = [b, a]; // Swap variables
// Function parameters
function greet({ name, age = 18 }) {
console.log(`Hello ${name}, you are ${age}`);
}
See detailed patterns: Destructuring Patterns
Spread and Rest Operators
// Spread operator
const combined = [...arr1, ...arr2];
const settings = { ...defaults, ...userPrefs };
// Rest parameters
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
See detailed patterns: Spread & Rest
Asynchronous JavaScript
Promises
// Creating promises
const fetchUser = (id) => {
return new Promise((resolve, reject) => {
// Async operation
if (success) resolve(data);
else reject(error);
});
};
// Promise combinators
Promise.all([p1, p2, p3]) // All must succeed
Promise.allSettled([p1, p2]) // Wait for all
Promise.race([p1, p2]) // First to complete
Promise.any([p1, p2]) // First to succeed
See detailed patterns: Promises & Async
Async/Await
async function fetchUserData(id) {
try {
const user = await fetchUser(id);
const posts = await fetchUserPosts(user.id);
return { user, posts };
} catch (error) {
console.error('Error:', error);
throw error;
}
}
// Parallel execution
const [user1, user2] = await Promise.all([
fetchUser(1),
fetchUser(2)
]);
See detailed patterns: Async/Await Patterns
Functional Programming
Array Methods
// Transform, filter, reduce
const names = users.map(u => u.name);
const active = users.filter(u => u.active);
const total = numbers.reduce((sum, n) => sum + n, 0);
// Advanced methods
const user = users.find(u => u.id === 2);
const hasActive = users.some(u => u.active);
const allAdults = users.every(u => u.age >= 18);
See detailed patterns: Functional Programming
Higher-Order Functions
// Currying
const multiply = a => b => a * b;
const double = multiply(2);
// Composition
const pipe = (...fns) => x =>
fns.reduce((acc, fn) => fn(acc), x);
const processUser = pipe(
trimName,
lowercaseEmail,
parseAge
);
See detailed patterns: Higher-Order Functions
Modern Language Features
Template Literals
const greeting = `Hello, ${name}!`;
const html = `
<div>
<h1>${title}</h1>
<p>${content}</p>
</div>
`;
// Tagged templates
const highlighted = highlight`Name: ${name}, Age: ${age}`;
Optional Chaining & Nullish Coalescing
// Optional chaining
const city = user?.address?.city;
const result = obj.method?.();
// Nullish coalescing
const value = input ?? 'default';
const name = user?.name ?? 'Anonymous';
See detailed patterns: Modern Operators
Classes and Modules
// Modern class syntax
class User {
#password; // Private field
static count = 0;
constructor(name) {
this.name = name;
}
get displayName() {
return this.name.toUpperCase();
}
}
// ES6 Modules
export const PI = 3.14159;
export default function multiply(a, b) {
return a * b;
}
import multiply, { PI } from './math.js';
See detailed patterns: Classes & Modules
Iterators & Generators
// Generator function
function* rangeGenerator(from, to) {
for (let i = from; i <= to; i++) {
yield i;
}
}
// Async generator
async function* fetchPages(url) {
let page = 1;
while (true) {
const data = await fetch(`${url}?page=${page}`);
if (data.length === 0) break;
yield data;
page++;
}
}
for await (const page of fetchPages('/api/users')) {
console.log(page);
}
See detailed patterns: Iterators & Generators
Performance Optimization
// Debounce
function debounce(fn, delay) {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn(...args), delay);
};
}
// Throttle
function throttle(fn, limit) {
let inThrottle;
return (...args) => {
if (!inThrottle) {
fn(...args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
See detailed patterns: Performance Optimization
Best Practices
- Use const by default: Only use let when reassignment is needed
- Prefer arrow functions: Especially for callbacks
- Use template literals: Instead of string concatenation
- Destructure objects and arrays: For cleaner code
- Use async/await: Instead of Promise chains
- Avoid mutating data: Use spread operator and array methods
- Use optional chaining: Prevent "Cannot read property of undefined"
- Prefer array methods: Over traditional loops
- Write pure functions: Easier to test and reason about
- Use modules: For better code organization
Common Pitfalls
- this binding confusion: Use arrow functions or bind()
- Async/await without error handling: Always use try/catch
- Mutation of objects: Use spread operator or Object.assign()
- Forgetting await: Async functions return promises
- Not handling promise rejections: Use catch() or try/catch
Resources
- MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript
- JavaScript.info: https://javascript.info/
- You Don't Know JS: https://github.com/getify/You-Dont-Know-JS
- Eloquent JavaScript: https://eloquentjavascript.net/
- ES6 Features: http://es6-features.org/