1---
2name: modern-javascript-patterns
3description: Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.
4---
5 
6# Modern JavaScript Patterns
7 
8Comprehensive guide for mastering modern JavaScript (ES6+) features, functional programming patterns, and best practices for writing clean, maintainable, and performant code.
9 
10## When to Use This Skill
11 
12- Refactoring legacy JavaScript to modern syntax
13- Implementing functional programming patterns
14- Optimizing JavaScript performance
15- Writing maintainable and readable code
16- Working with asynchronous operations
17- Building modern web applications
18- Migrating from callbacks to Promises/async-await
19- Implementing data transformation pipelines
20 
21## ES6+ Core Features
22 
23### 1. Arrow Functions
24 
25**Syntax and Use Cases:**
26 
27```javascript
28// Traditional function
29function add(a, b) {
30  return a + b;
31}
32 
33// Arrow function
34const add = (a, b) => a + b;
35 
36// Single parameter (parentheses optional)
37const double = (x) => x * 2;
38 
39// No parameters
40const getRandom = () => Math.random();
41 
42// Multiple statements (need curly braces)
43const processUser = (user) => {
44  const normalized = user.name.toLowerCase();
45  return { ...user, name: normalized };
46};
47 
48// Returning objects (wrap in parentheses)
49const createUser = (name, age) => ({ name, age });
50```
51 
52**Lexical 'this' Binding:**
53 
54```javascript
55class Counter {
56  constructor() {
57    this.count = 0;
58  }
59 
60  // Arrow function preserves 'this' context
61  increment = () => {
62    this.count++;
63  };
64 
65  // Traditional function loses 'this' in callbacks
66  incrementTraditional() {
67    setTimeout(function () {
68      this.count++; // 'this' is undefined
69    }, 1000);
70  }
71 
72  // Arrow function maintains 'this'
73  incrementArrow() {
74    setTimeout(() => {
75      this.count++; // 'this' refers to Counter instance
76    }, 1000);
77  }
78}
79```
80 
81### 2. Destructuring
82 
83**Object Destructuring:**
84 
85```javascript
86const user = {
87  id: 1,
88  name: "John Doe",
89  email: "[email protected]",
90  address: {
91    city: "New York",
92    country: "USA",
93  },
94};
95 
96// Basic destructuring
97const { name, email } = user;
98 
99// Rename variables
100const { name: userName, email: userEmail } = user;
101 
102// Default values
103const { age = 25 } = user;
104 
105// Nested destructuring
106const {
107  address: { city, country },
108} = user;
109 
110// Rest operator
111const { id, ...userWithoutId } = user;
112 
113// Function parameters
114function greet({ name, age = 18 }) {
115  console.log(`Hello ${name}, you are ${age}`);
116}
117greet(user);
118```
119 
120**Array Destructuring:**
121 
122```javascript
123const numbers = [1, 2, 3, 4, 5];
124 
125// Basic destructuring
126const [first, second] = numbers;
127 
128// Skip elements
129const [, , third] = numbers;
130 
131// Rest operator
132const [head, ...tail] = numbers;
133 
134// Swapping variables
135let a = 1,
136  b = 2;
137[a, b] = [b, a];
138 
139// Function return values
140function getCoordinates() {
141  return [10, 20];
142}
143const [x, y] = getCoordinates();
144 
145// Default values
146const [one, two, three = 0] = [1, 2];
147```
148 
149### 3. Spread and Rest Operators
150 
151**Spread Operator:**
152 
153```javascript
154// Array spreading
155const arr1 = [1, 2, 3];
156const arr2 = [4, 5, 6];
157const combined = [...arr1, ...arr2];
158 
159// Object spreading
160const defaults = { theme: "dark", lang: "en" };
161const userPrefs = { theme: "light" };
162const settings = { ...defaults, ...userPrefs };
163 
164// Function arguments
165const numbers = [1, 2, 3];
166Math.max(...numbers);
167 
168// Copying arrays/objects (shallow copy)
169const copy = [...arr1];
170const objCopy = { ...user };
171 
172// Adding items immutably
173const newArr = [...arr1, 4, 5];
174const newObj = { ...user, age: 30 };
175```
176 
177**Rest Parameters:**
178 
179```javascript
180// Collect function arguments
181function sum(...numbers) {
182  return numbers.reduce((total, num) => total + num, 0);
183}
184sum(1, 2, 3, 4, 5);
185 
186// With regular parameters
187function greet(greeting, ...names) {
188  return `${greeting} ${names.join(", ")}`;
189}
190greet("Hello", "John", "Jane", "Bob");
191 
192// Object rest
193const { id, ...userData } = user;
194 
195// Array rest
196const [first, ...rest] = [1, 2, 3, 4, 5];
197```
198 
199### 4. Template Literals
200 
201```javascript
202// Basic usage
203const name = "John";
204const greeting = `Hello, ${name}!`;
205 
206// Multi-line strings
207const html = `
208  <div>
209    <h1>${title}</h1>
210    <p>${content}</p>
211  </div>
212`;
213 
214// Expression evaluation
215const price = 19.99;
216const total = `Total: $${(price * 1.2).toFixed(2)}`;
217 
218// Tagged template literals
219function highlight(strings, ...values) {
220  return strings.reduce((result, str, i) => {
221    const value = values[i] || "";
222    return result + str + `<mark>${value}</mark>`;
223  }, "");
224}
225 
226const name = "John";
227const age = 30;
228const html = highlight`Name: ${name}, Age: ${age}`;
229// Output: "Name: <mark>John</mark>, Age: <mark>30</mark>"
230```
231 
232### 5. Enhanced Object Literals
233 
234```javascript
235const name = "John";
236const age = 30;
237 
238// Shorthand property names
239const user = { name, age };
240 
241// Shorthand method names
242const calculator = {
243  add(a, b) {
244    return a + b;
245  },
246  subtract(a, b) {
247    return a - b;
248  },
249};
250 
251// Computed property names
252const field = "email";
253const user = {
254  name: "John",
255  [field]: "[email protected]",
256  [`get${field.charAt(0).toUpperCase()}${field.slice(1)}`]() {
257    return this[field];
258  },
259};
260 
261// Dynamic property creation
262const createUser = (name, ...props) => {
263  return props.reduce(
264    (user, [key, value]) => ({
265      ...user,
266      [key]: value,
267    }),
268    { name },
269  );
270};
271 
272const user = createUser("John", ["age", 30], ["email", "[email protected]"]);
273```
274 
275## Asynchronous Patterns
276 
277### 1. Promises
278 
279**Creating and Using Promises:**
280 
281```javascript
282// Creating a promise
283const fetchUser = (id) => {
284  return new Promise((resolve, reject) => {
285    setTimeout(() => {
286      if (id > 0) {
287        resolve({ id, name: "John" });
288      } else {
289        reject(new Error("Invalid ID"));
290      }
291    }, 1000);
292  });
293};
294 
295// Using promises
296fetchUser(1)
297  .then((user) => console.log(user))
298  .catch((error) => console.error(error))
299  .finally(() => console.log("Done"));
300 
301// Chaining promises
302fetchUser(1)
303  .then((user) => fetchUserPosts(user.id))
304  .then((posts) => processPosts(posts))
305  .then((result) => console.log(result))
306  .catch((error) => console.error(error));
307```
308 
309**Promise Combinators:**
310 
311```javascript
312// Promise.all - Wait for all promises
313const promises = [fetchUser(1), fetchUser(2), fetchUser(3)];
314 
315Promise.all(promises)
316  .then((users) => console.log(users))
317  .catch((error) => console.error("At least one failed:", error));
318 
319// Promise.allSettled - Wait for all, regardless of outcome
320Promise.allSettled(promises).then((results) => {
321  results.forEach((result) => {
322    if (result.status === "fulfilled") {
323      console.log("Success:", result.value);
324    } else {
325      console.log("Error:", result.reason);
326    }
327  });
328});
329 
330// Promise.race - First to complete
331Promise.race(promises)
332  .then((winner) => console.log("First:", winner))
333  .catch((error) => console.error(error));
334 
335// Promise.any - First to succeed
336Promise.any(promises)
337  .then((first) => console.log("First success:", first))
338  .catch((error) => console.error("All failed:", error));
339```
340 
341### 2. Async/Await
342 
343**Basic Usage:**
344 
345```javascript
346// Async function always returns a Promise
347async function fetchUser(id) {
348  const response = await fetch(`/api/users/${id}`);
349  const user = await response.json();
350  return user;
351}
352 
353// Error handling with try/catch
354async function getUserData(id) {
355  try {
356    const user = await fetchUser(id);
357    const posts = await fetchUserPosts(user.id);
358    return { user, posts };
359  } catch (error) {
360    console.error("Error fetching data:", error);
361    throw error;
362  }
363}
364 
365// Sequential vs Parallel execution
366async function sequential() {
367  const user1 = await fetchUser(1); // Wait
368  const user2 = await fetchUser(2); // Then wait
369  return [user1, user2];
370}
371 
372async function parallel() {
373  const [user1, user2] = await Promise.all([fetchUser(1), fetchUser(2)]);
374  return [user1, user2];
375}
376```
377 
378**Advanced Patterns:**
379 
380```javascript
381// Async IIFE
382(async () => {
383  const result = await someAsyncOperation();
384  console.log(result);
385})();
386 
387// Async iteration
388async function processUsers(userIds) {
389  for (const id of userIds) {
390    const user = await fetchUser(id);
391    await processUser(user);
392  }
393}
394 
395// Top-level await (ES2022)
396const config = await fetch("/config.json").then((r) => r.json());
397 
398// Retry logic
399async function fetchWithRetry(url, retries = 3) {
400  for (let i = 0; i < retries; i++) {
401    try {
402      return await fetch(url);
403    } catch (error) {
404      if (i === retries - 1) throw error;
405      await new Promise((resolve) => setTimeout(resolve, 1000 * (i + 1)));
406    }
407  }
408}
409 
410// Timeout wrapper
411async function withTimeout(promise, ms) {
412  const timeout = new Promise((_, reject) =>
413    setTimeout(() => reject(new Error("Timeout")), ms),
414  );
415  return Promise.race([promise, timeout]);
416}
417```
418 
419## Functional Programming Patterns
420 
421Functional programming in JavaScript centers on pure functions, immutability, and composable transformations.
422 
423Key topics covered in [references/advanced-patterns.md](references/advanced-patterns.md):
424- **Array methods** — `map`, `filter`, `reduce`, `find`, `findIndex`, `some`, `every`, `flatMap`, `Array.from`
425- **Higher-order functions** — custom `forEach`/`map`/`filter`, currying, partial application, memoization
426- **Composition and piping** — `compose`/`pipe` utilities with practical data transformation examples
427- **Pure functions and immutability** — immutable array/object operations, deep cloning with `structuredClone`
428 
429## Modern Class Features
430 
431ES2022 classes support private fields (`#field`), static fields, getters/setters, and private methods. See [references/advanced-patterns.md](references/advanced-patterns.md) for a full example with inheritance.
432 
433## Modules (ES6)
434 
435```javascript
436// Named exports
437export const PI = 3.14159;
438export function add(a, b) { return a + b; }
439 
440// Default export
441export default function multiply(a, b) { return a * b; }
442 
443// Import
444import multiply, { PI, add } from "./math.js";
445 
446// Dynamic import (code splitting)
447const { add } = await import("./math.js");
448```
449 
450For re-exports, namespace imports, and conditional dynamic loading see [references/advanced-patterns.md](references/advanced-patterns.md).
451 
452## Iterators and Generators
453 
454Generators (`function*`) and async generators (`async function*`) enable lazy sequences and async pagination. See [references/advanced-patterns.md](references/advanced-patterns.md) for custom iterator, range generator, fibonacci, and `for await...of` examples.
455 
456## Modern Operators
457 
458```javascript
459// Optional chaining — safe property access
460const city = user?.address?.city;
461const result = obj.method?.();
462 
463// Nullish coalescing — default only for null/undefined (not 0 or "")
464const value = null ?? "default"; // 'default'
465const zero = 0 ?? "default";    // 0
466 
467// Logical assignment
468a ??= "default";   // assign if null/undefined
469obj.count ||= 1;   // assign if falsy
470obj.count &&= 2;   // assign if truthy
471```
472 
473## Performance Optimization
474 
475See [references/advanced-patterns.md](references/advanced-patterns.md) for debounce, throttle, and lazy evaluation with generators.
476 
477## Best Practices
478 
4791. **Use const by default**: Only use let when reassignment is needed
4802. **Prefer arrow functions**: Especially for callbacks
4813. **Use template literals**: Instead of string concatenation
4824. **Destructure objects and arrays**: For cleaner code
4835. **Use async/await**: Instead of Promise chains
4846. **Avoid mutating data**: Use spread operator and array methods
4857. **Use optional chaining**: Prevent "Cannot read property of undefined"
4868. **Use nullish coalescing**: For default values
4879. **Prefer array methods**: Over traditional loops
48810. **Use modules**: For better code organization
48911. **Write pure functions**: Easier to test and reason about
49012. **Use meaningful variable names**: Self-documenting code
49113. **Keep functions small**: Single responsibility principle
49214. **Handle errors properly**: Use try/catch with async/await
49315. **Use strict mode**: `'use strict'` for better error catching
494 
495For common pitfalls (this binding, promise anti-patterns, memory leaks), see [references/advanced-patterns.md](references/advanced-patterns.md).
496