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