1# Advanced Modern JavaScript Patterns
2 
3Advanced patterns covering functional programming, modern class features, ES6 modules, iterators, generators, modern operators, and performance optimization.
4 
5## Functional Programming Patterns
6 
7### 1. Array Methods
8 
9**Map, Filter, Reduce:**
10 
11```javascript
12const users = [
13  { id: 1, name: "John", age: 30, active: true },
14  { id: 2, name: "Jane", age: 25, active: false },
15  { id: 3, name: "Bob", age: 35, active: true },
16];
17 
18// Map - Transform array
19const names = users.map((user) => user.name);
20const upperNames = users.map((user) => user.name.toUpperCase());
21 
22// Filter - Select elements
23const activeUsers = users.filter((user) => user.active);
24const adults = users.filter((user) => user.age >= 18);
25 
26// Reduce - Aggregate data
27const totalAge = users.reduce((sum, user) => sum + user.age, 0);
28const avgAge = totalAge / users.length;
29 
30// Group by property
31const byActive = users.reduce((groups, user) => {
32  const key = user.active ? "active" : "inactive";
33  return {
34    ...groups,
35    [key]: [...(groups[key] || []), user],
36  };
37}, {});
38 
39// Chaining methods
40const result = users
41  .filter((user) => user.active)
42  .map((user) => user.name)
43  .sort()
44  .join(", ");
45```
46 
47**Advanced Array Methods:**
48 
49```javascript
50// Find - First matching element
51const user = users.find((u) => u.id === 2);
52 
53// FindIndex - Index of first match
54const index = users.findIndex((u) => u.name === "Jane");
55 
56// Some - At least one matches
57const hasActive = users.some((u) => u.active);
58 
59// Every - All match
60const allAdults = users.every((u) => u.age >= 18);
61 
62// FlatMap - Map and flatten
63const userTags = [
64  { name: "John", tags: ["admin", "user"] },
65  { name: "Jane", tags: ["user"] },
66];
67const allTags = userTags.flatMap((u) => u.tags);
68 
69// From - Create array from iterable
70const str = "hello";
71const chars = Array.from(str);
72const numbers = Array.from({ length: 5 }, (_, i) => i + 1);
73 
74// Of - Create array from arguments
75const arr = Array.of(1, 2, 3);
76```
77 
78### 2. Higher-Order Functions
79 
80**Functions as Arguments:**
81 
82```javascript
83// Custom forEach
84function forEach(array, callback) {
85  for (let i = 0; i < array.length; i++) {
86    callback(array[i], i, array);
87  }
88}
89 
90// Custom map
91function map(array, transform) {
92  const result = [];
93  for (const item of array) {
94    result.push(transform(item));
95  }
96  return result;
97}
98 
99// Custom filter
100function filter(array, predicate) {
101  const result = [];
102  for (const item of array) {
103    if (predicate(item)) {
104      result.push(item);
105    }
106  }
107  return result;
108}
109```
110 
111**Functions Returning Functions:**
112 
113```javascript
114// Currying
115const multiply = (a) => (b) => a * b;
116const double = multiply(2);
117const triple = multiply(3);
118 
119console.log(double(5)); // 10
120console.log(triple(5)); // 15
121 
122// Partial application
123function partial(fn, ...args) {
124  return (...moreArgs) => fn(...args, ...moreArgs);
125}
126 
127const add = (a, b, c) => a + b + c;
128const add5 = partial(add, 5);
129console.log(add5(3, 2)); // 10
130 
131// Memoization
132function memoize(fn) {
133  const cache = new Map();
134  return (...args) => {
135    const key = JSON.stringify(args);
136    if (cache.has(key)) {
137      return cache.get(key);
138    }
139    const result = fn(...args);
140    cache.set(key, result);
141    return result;
142  };
143}
144 
145const fibonacci = memoize((n) => {
146  if (n <= 1) return n;
147  return fibonacci(n - 1) + fibonacci(n - 2);
148});
149```
150 
151### 3. Composition and Piping
152 
153```javascript
154// Function composition
155const compose =
156  (...fns) =>
157  (x) =>
158    fns.reduceRight((acc, fn) => fn(acc), x);
159 
160const pipe =
161  (...fns) =>
162  (x) =>
163    fns.reduce((acc, fn) => fn(acc), x);
164 
165// Example usage
166const addOne = (x) => x + 1;
167const double = (x) => x * 2;
168const square = (x) => x * x;
169 
170const composed = compose(square, double, addOne);
171console.log(composed(3)); // ((3 + 1) * 2)^2 = 64
172 
173const piped = pipe(addOne, double, square);
174console.log(piped(3)); // ((3 + 1) * 2)^2 = 64
175 
176// Practical example
177const processUser = pipe(
178  (user) => ({ ...user, name: user.name.trim() }),
179  (user) => ({ ...user, email: user.email.toLowerCase() }),
180  (user) => ({ ...user, age: parseInt(user.age) }),
181);
182 
183const user = processUser({
184  name: "  John  ",
185  email: "[email protected]",
186  age: "30",
187});
188```
189 
190### 4. Pure Functions and Immutability
191 
192```javascript
193// Impure function (modifies input)
194function addItemImpure(cart, item) {
195  cart.items.push(item);
196  cart.total += item.price;
197  return cart;
198}
199 
200// Pure function (no side effects)
201function addItemPure(cart, item) {
202  return {
203    ...cart,
204    items: [...cart.items, item],
205    total: cart.total + item.price,
206  };
207}
208 
209// Immutable array operations
210const numbers = [1, 2, 3, 4, 5];
211 
212// Add to array
213const withSix = [...numbers, 6];
214 
215// Remove from array
216const withoutThree = numbers.filter((n) => n !== 3);
217 
218// Update array element
219const doubled = numbers.map((n) => (n === 3 ? n * 2 : n));
220 
221// Immutable object operations
222const user = { name: "John", age: 30 };
223 
224// Update property
225const olderUser = { ...user, age: 31 };
226 
227// Add property
228const withEmail = { ...user, email: "[email protected]" };
229 
230// Remove property
231const { age, ...withoutAge } = user;
232 
233// Deep cloning (simple approach)
234const deepClone = (obj) => JSON.parse(JSON.stringify(obj));
235 
236// Better deep cloning
237const structuredClone = (obj) => globalThis.structuredClone(obj);
238```
239 
240## Modern Class Features
241 
242```javascript
243// Class syntax
244class User {
245  // Private fields
246  #password;
247 
248  // Public fields
249  id;
250  name;
251 
252  // Static field
253  static count = 0;
254 
255  constructor(id, name, password) {
256    this.id = id;
257    this.name = name;
258    this.#password = password;
259    User.count++;
260  }
261 
262  // Public method
263  greet() {
264    return `Hello, ${this.name}`;
265  }
266 
267  // Private method
268  #hashPassword(password) {
269    return `hashed_${password}`;
270  }
271 
272  // Getter
273  get displayName() {
274    return this.name.toUpperCase();
275  }
276 
277  // Setter
278  set password(newPassword) {
279    this.#password = this.#hashPassword(newPassword);
280  }
281 
282  // Static method
283  static create(id, name, password) {
284    return new User(id, name, password);
285  }
286}
287 
288// Inheritance
289class Admin extends User {
290  constructor(id, name, password, role) {
291    super(id, name, password);
292    this.role = role;
293  }
294 
295  greet() {
296    return `${super.greet()}, I'm an admin`;
297  }
298}
299```
300 
301## Modules (ES6)
302 
303```javascript
304// Exporting
305// math.js
306export const PI = 3.14159;
307export function add(a, b) {
308  return a + b;
309}
310export class Calculator {
311  // ...
312}
313 
314// Default export
315export default function multiply(a, b) {
316  return a * b;
317}
318 
319// Importing
320// app.js
321import multiply, { PI, add, Calculator } from "./math.js";
322 
323// Rename imports
324import { add as sum } from "./math.js";
325 
326// Import all
327import * as Math from "./math.js";
328 
329// Dynamic imports
330const module = await import("./math.js");
331const { add } = await import("./math.js");
332 
333// Conditional loading
334if (condition) {
335  const module = await import("./feature.js");
336  module.init();
337}
338```
339 
340## Iterators and Generators
341 
342```javascript
343// Custom iterator
344const range = {
345  from: 1,
346  to: 5,
347 
348  [Symbol.iterator]() {
349    return {
350      current: this.from,
351      last: this.to,
352 
353      next() {
354        if (this.current <= this.last) {
355          return { done: false, value: this.current++ };
356        } else {
357          return { done: true };
358        }
359      },
360    };
361  },
362};
363 
364for (const num of range) {
365  console.log(num); // 1, 2, 3, 4, 5
366}
367 
368// Generator function
369function* rangeGenerator(from, to) {
370  for (let i = from; i <= to; i++) {
371    yield i;
372  }
373}
374 
375for (const num of rangeGenerator(1, 5)) {
376  console.log(num);
377}
378 
379// Infinite generator
380function* fibonacci() {
381  let [prev, curr] = [0, 1];
382  while (true) {
383    yield curr;
384    [prev, curr] = [curr, prev + curr];
385  }
386}
387 
388// Async generator
389async function* fetchPages(url) {
390  let page = 1;
391  while (true) {
392    const response = await fetch(`${url}?page=${page}`);
393    const data = await response.json();
394    if (data.length === 0) break;
395    yield data;
396    page++;
397  }
398}
399 
400for await (const page of fetchPages("/api/users")) {
401  console.log(page);
402}
403```
404 
405## Modern Operators
406 
407```javascript
408// Optional chaining
409const user = { name: "John", address: { city: "NYC" } };
410const city = user?.address?.city;
411const zipCode = user?.address?.zipCode; // undefined
412 
413// Function call
414const result = obj.method?.();
415 
416// Array access
417const first = arr?.[0];
418 
419// Nullish coalescing
420const value = null ?? "default"; // 'default'
421const value = undefined ?? "default"; // 'default'
422const value = 0 ?? "default"; // 0 (not 'default')
423const value = "" ?? "default"; // '' (not 'default')
424 
425// Logical assignment
426let a = null;
427a ??= "default"; // a = 'default'
428 
429let b = 5;
430b ??= 10; // b = 5 (unchanged)
431 
432let obj = { count: 0 };
433obj.count ||= 1; // obj.count = 1
434obj.count &&= 2; // obj.count = 2
435```
436 
437## Performance Optimization
438 
439```javascript
440// Debounce
441function debounce(fn, delay) {
442  let timeoutId;
443  return (...args) => {
444    clearTimeout(timeoutId);
445    timeoutId = setTimeout(() => fn(...args), delay);
446  };
447}
448 
449const searchDebounced = debounce(search, 300);
450 
451// Throttle
452function throttle(fn, limit) {
453  let inThrottle;
454  return (...args) => {
455    if (!inThrottle) {
456      fn(...args);
457      inThrottle = true;
458      setTimeout(() => (inThrottle = false), limit);
459    }
460  };
461}
462 
463const scrollThrottled = throttle(handleScroll, 100);
464 
465// Lazy evaluation
466function* lazyMap(iterable, transform) {
467  for (const item of iterable) {
468    yield transform(item);
469  }
470}
471 
472// Use only what you need
473const numbers = [1, 2, 3, 4, 5];
474const doubled = lazyMap(numbers, (x) => x * 2);
475const first = doubled.next().value; // Only computes first value
476```
477 
478## Common Pitfalls
479 
4801. **this binding confusion**: Use arrow functions or bind()
4812. **Async/await without error handling**: Always use try/catch
4823. **Promise creation unnecessary**: Don't wrap already async functions
4834. **Mutation of objects**: Use spread operator or Object.assign()
4845. **Forgetting await**: Async functions return promises
4856. **Blocking event loop**: Avoid synchronous operations
4867. **Memory leaks**: Clean up event listeners and timers
4878. **Not handling promise rejections**: Use catch() or try/catch
488