function processData(items) {
  if (!items || !items.length) {
// ↑ [The entire guard clause]
//   ↑ [The check for a null or undefined input]
//              ↑ [The specific check for zero length]
    return []; // ← [The early return value for the "empty" case]
  }

  // ... all the complex processing logic for the "happy path" goes here
  // This code only runs if the guard clause is passed.
  return items.map(item => item.id);
}

"Let's trace exactly what happens when this code runs with an empty array: processData([])

Step 1: The `processData` function is called, and the `items` parameter is initialized with an empty array `[]`.

Step 2: JavaScript encounters the `if` statement. It first evaluates the left side of the `||` (OR) operator: `!items`. Since `items` is an empty array `[]`, which is a truthy value, `!items` evaluates to `false`.

Step 3: Because the left side was `false`, the `||` operator proceeds to evaluate the right side: `!items.length`. The `.length` of an empty array is `0`. `!0` evaluates to `true` because `0` is a falsy value.

Step 4: The overall condition of the `if` statement becomes `false || true`, which resolves to `true`. The code block inside the `if` statement is executed.

Step 5: The `return [];` statement is executed. The function immediately exits and returns a new empty array. None of the complex processing logic below the guard clause is ever reached or executed.

// A function to display a welcome message for the first user
function displayWelcome(users) {
  // Guard clause: If the users array is empty, do nothing.
  if (!users.length) {
    console.log("No users to welcome.");
    return; // Exit the function early
  }

  // This line only runs if the array is not empty
  console.log(`Welcome, ${users[0].name}!`);
}

// Test cases
displayWelcome([{name: "Alice"}]);
displayWelcome([]);
// Expected output:
// Welcome, Alice!
// No users to welcome.

// Real-world scenario: Calculating an average score from an array of numbers
function calculateAverage(scores) {
  // If scores is not an array or is empty, we can't divide by zero.
  // Returning 0 is a safe default.
  if (!Array.isArray(scores) || !scores.length) {
    return 0;
  }

  const sum = scores.reduce((total, score) => total + score, 0);
  return sum / scores.length;
}

const studentScores1 = [88, 92, 100, 76, 95];
const studentScores2 = [];

console.log(`Average 1: ${calculateAverage(studentScores1)}`);
console.log(`Average 2: ${calculateAverage(studentScores2)}`);
// Expected output:
// Average 1: 90.2
// Average 2: 0

// What happens when input is null, undefined, or not an array?
function getSummaries(articles) {
  // This comprehensive guard clause handles multiple edge cases.
  // 1. Checks for null/undefined
  // 2. Checks if it's actually an array
  // 3. Checks if it's empty
  if (!articles || !Array.isArray(articles) || !articles.length) {
    return "<p>No articles found.</p>";
  }

  return articles.map(a => `<h3>${a.title}</h3>`).join('');
}

const validArticles = [{ title: "JS Patterns" }, { title: "Performance" }];
console.log('Valid:', getSummaries(validArticles));
console.log('Empty:', getSummaries([]));
console.log('Null:', getSummaries(null));
console.log('Wrong Type:', getSummaries({ title: "Not an array" }));
// Expected output:
// Valid: <h3>JS Patterns</h3><h3>Performance</h3>
// Empty: <p>No articles found.</p>
// Null: <p>No articles found.</p>
// Wrong Type: <p>No articles found.</p>

// Combining .length check with Object property checks
function createHeader(config) {
  // Guard clause for the main config object
  if (!config) {
    return "<header></header>";
  }

  let navLinks = '';
  // Combine with a .length check for a nested array property
  if (config.navItems && config.navItems.length) {
    const links = config.navItems.map(item => `<li>${item}</li>`).join('');
    navLinks = `<ul>${links}</ul>`;
  }

  // Use optional chaining as another form of "guarding"
  const title = config.site?.title ?? 'Default Title';

  return `<header><h1>${title}</h1><nav>${navLinks}</nav></header>`;
}

const fullConfig = { site: { title: "My Site" }, navItems: ["Home", "About"] };
const minimalConfig = { site: { title: "Basic Site" } };
console.log(createHeader(fullConfig));
// Expected output: <header><h1>My Site</h1><nav><ul><li>Home</li><li>About</li></ul></nav></header>

console.log(createHeader(minimalConfig));
// Expected output: <header><h1>Basic Site</h1><nav></nav></header>

// Production-level implementation in a data processing pipeline
async function processUserActivity(userIds) {
  // 1. Guard clause for input validation.
  if (!userIds || !userIds.length) {
    console.warn("processUserActivity called with no user IDs.");
    return { success: true, processed: 0, errors: [] };
  }

  // 2. Filter out invalid IDs before making an expensive API call.
  const validIds = userIds.filter(id => typeof id === 'number' && id > 0);

  // 3. A second guard clause after filtering.
  if (!validIds.length) {
    console.error("No valid user IDs remained after filtering.");
    return { success: false, processed: 0, errors: ["Invalid ID format for all inputs."] };
  }

  try {
    // 4. Heavy logic (API calls, DB writes) only happens if all checks pass.
    // const results = await batchUpdateUsers(validIds);
    console.log(`Simulating processing for ${validIds.length} users...`);
    return { success: true, processed: validIds.length, errors: [] };
  } catch (e) {
    // Error handling for the main logic
    return { success: false, processed: 0, errors: [e.message] };
  }
}

processUserActivity([101, 102, 103]);
processUserActivity([]);
processUserActivity(['a', null, -5]);
// Expected output:
// Simulating processing for 3 users...
// processUserActivity called with no user IDs.
// No valid user IDs remained after filtering.

const userList = [];

// ❌ ANTI-PATTERN - Nested "happy path" logic
function generateUserReportNested(users) {
  let report = "User Report:\n";
  if (users && users.length > 0) {
    // The core logic is indented, making it harder to read.
    for (const user of users) {
      report += `- ${user.name}\n`;
    }
    // What if we add more logic? It gets deeper.
  } else {
    // The "do nothing" case requires an else block.
    report = "No users found.";
  }
  return report;
}
console.log("Anti-Pattern:", generateUserReportNested(userList));


// ✅ CORRECT APPROACH - Early return guard clause
function generateUserReportGuard(users) {
  // Handle the invalid case first and exit.
  if (!users || !users.length) {
    return "No users found.";
  }

  // The "happy path" is flat and easy to read.
  let report = "User Report:\n";
  for (const user of users) {
    report += `- ${user.name}\n`;
  }
  return report;
}
console.log("Correct Pattern:", generateUserReportGuard(userList));

function processItems(items) {
  // This check is INSUFFICIENT for empty arrays!
  if (!items) {
    console.log("No items provided.");
    return;
  }
  // This line will still run for an empty array!
  console.log(`Processing first item: ${items[0].name}`);
}

processItems([]); // Throws TypeError: Cannot read properties of undefined (reading 'name')

function processItemsFixed(items)
 {
  // The correct check is for the .length property
  if (!items || !items.length) {
    console.log("Cannot process: items are null, undefined, or empty.");
    return;
  }
  console.log(`Processing first item: ${items[0].name}`);
}

processItemsFixed([]); // Correctly logs the message and returns.

function getFirstElement(data) {
  // This will throw an error if `data` is null or undefined.
  if (!data.length) {
    return "No data.";
  }
  return data[0];
}

getFirstElement(null); // TypeError: Cannot read properties of null (reading 'length')

function getFirstElementFixed(data) {
  // Use a "short-circuiting" check.
  // If `!data` is true, the `!data.length` part is never even evaluated.
  if (!data || !data.length) {
    return "No data.";
  }
  return data[0];
}

console.log(getFirstElementFixed(null)); // "No data."
console.log(getFirstElementFixed([])); // "No data."

function getUsers(ids) {
  if (!ids.length) {
    // Returns a string on failure
    return "No IDs provided";
  }
  // Implicitly returns undefined if logic completes
  // const users = db.fetch(ids);
  // console.log(users);
}

const result = getUsers([]);
// The calling code expects an array, but gets a string.
// This will throw an error.
// result.forEach(user => console.log(user));
// TypeError: result.forEach is not a function

/**
 * @returns {Array<User>} Always returns an array of users.
 */
function getUsersFixed(ids) {
  if (!ids || !ids.length) {
    // Return the "empty" version of the expected data type.
    return [];
  }

  const users = [{id: 1, name: 'A'}, {id: 2, name: 'B'}]; // mock fetch
  return users.filter(u => ids.includes(u.id));
}

const result = getUsersFixed([]);
// This works perfectly, as `forEach` on an empty array does nothing.
result.forEach(user => console.log(user.name));
console.log("Result length:", result.length); // Result length: 0

function printLabels(labels) {
  console.log("Printing labels:");
  labels.forEach((label, index) => {
    console.log(`${index + 1}. ${label}`);
  });
}

// Test cases
printLabels(["High Priority", "Urgent"]);
printLabels([]); // This line currently breaks

function createProductList(products) {
  // Add your guard clause here

  // This is the "happy path" logic
  const items = products.map(p => `  <li>${p.name} ($${p.price})</li>`).join('\n');
  return `<ul>\n${items}\n</ul>`;
}

// Test cases
const productData = [{name: 'Laptop', price: 1200}, {name: 'Mouse', price: 25}];
console.log(createProductList(productData));
console.log(createProductList([]));
console.log(createProductList(null));

function findAdmin(users) {
  // Implement the function here
}

// Test cases
const userSet1 = [{name: 'Bob', role: 'user'}, {name: 'Alice', role: 'admin'}, {name: 'Charlie', role: 'user'}];
const userSet2 = [{name: 'David', role: 'user'}, {name: 'Eve', role: 'guest'}];
const userSet3 = [];

console.log(findAdmin(userSet1)); // Should be {name: 'Alice', role: 'admin'}
console.log(findAdmin(userSet2)); // Should be null
console.log(findAdmin(userSet3)); // Should be null
console.log(findAdmin());       // Should be null

// A mock for DOM elements
const mockElements = [
  { id: 'el1', style: {}, innerText: '' },
  { id: 'el2', style: {}, innerText: '' },
];

function applyBulkSettings(settings, elements) {
  // Your guard clauses go here. Check both `settings` and `elements`.

  // Main logic
  console.log(`Applying ${Object.keys(settings).length} settings to ${elements.length} elements.`);
  for (const element of elements) {
    for (const key in settings) {
      // e.g., element.style.color = 'red';
      element.style[key] = settings[key];
    }
  }
}

// Test cases
applyBulkSettings({ color: 'blue', 'font-size': '16px' }, mockElements);
applyBulkSettings(null, mockElements);
applyBulkSettings({ color: 'red' }, []);
applyBulkSettings({}, mockElements);

function processAndValidate(records) {
  // Your implementation here. Use multiple guards.
}

const records1 = [
  { id: 1, data: 'A' },
  null,
  { id: 2, data: 'B' },
  { data: 'C' }, // no id
  { id: -5, data: 'D' }, // invalid id
  { id: 3, data: 'E' },
  undefined
];

console.log(processAndValidate(records1)); // Expected: [1, 2, 3]
console.log(processAndValidate([]));        // Expected: []
console.log(processAndValidate(null));      // Expected: []
console.log(processAndValidate([ { data: 'x' }, null ])); // Expected: []

// Before running an expensive data transformation
function getActiveUsersReport(users) {
  if (!users || !users.length) {
    return { title: "User Report", data: [], timestamp: Date.now() };
  }
  // ... expensive filter, map, reduce operations here
}

// In a UI framework component
function UserList({ userList }) {
  if (!userList.length) {
    return <p>No users to display.</p>;
  }
  return (
    <ul>
      {userList.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

// Before sending a batch request
async function archiveItems(itemIds) {
  if (!itemIds || !itemIds.length) {
    console.log("No items to archive. Skipping API call.");
    return;
  }
  await api.post('/archive-batch', { ids: itemIds });
}

// A function that REQUIRES a non-empty array to function
function initializePayment(products) {
  if (!Array.isArray(products) || !products.length) {
    // This is a critical failure, not a "do nothing" case.
    throw new Error("Cannot initialize payment with an empty cart.");
  }
  // ... proceed with critical logic
}

// Array methods like map, filter, and reduce handle empty arrays gracefully.
function toUpperCase(strings) {
  // No guard clause is needed here.
  // .map() on an empty array returns an empty array, which is correct.
  return strings.map(s => s.toUpperCase());
}

const result = toUpperCase([]); // result is []

// In a dedicated config file (e.g., config.js)

const config = {
  // Use the OR (||) operator for a simple default value
  port: process.env.PORT || 3000,
//      ↑ [Access environment variables via the global `process.env` object]
//                           ↑ [The default value used if the env var is not set]

  // Use type casting and more robust default logic
  api: {
    url: process.env.API_URL,      // ← [A required value without a default]
    timeout: Number(process.env.API_TIMEOUT) || 5000,
//           ↑ [Explicitly cast the string from env var to a number]
  },

  loggingLevel: process.env.LOG_LEVEL || 'info',
};

export default config;

"Let's trace what happens when Node.js starts and this config file is loaded, assuming we ran `PORT=8080 node server.js`:

Step 1: The script starts. Node.js populates the `process.env` object with all the environment variables from the shell. In this case, `process.env` will contain a property `PORT` with the string value `'8080'`.

Step 2: The `config` object is created. The first property, `port`, is evaluated. JavaScript sees `process.env.PORT || 3000`.

Step 3: `process.env.PORT` is looked up and found to be the string `'8080'`. Since a non-empty string is a truthy value, the `||` (OR) operator short-circuits and resolves to `'8080'`. The `port` property is assigned this value.

Step 4: The `api.timeout` property is evaluated: `Number(process.env.API_TIMEOUT) || 5000`. The script looks for `API_TIMEOUT` in `process.env`. It's not found, so `process.env.API_TIMEOUT` is `undefined`.

Step 5: `Number(undefined)` is executed, which results in `NaN` (Not a Number). `NaN` is a falsy value.

Step 6: The expression becomes `NaN || 5000`. Since the left side is falsy, the `||` operator returns the right side, `5000`. The `timeout` property is assigned the value `5000`. The configuration object is now fully constructed and ready for use.

// Set an environment variable before running this file:
// In your terminal: `export GREETING="Hello World"` (macOS/Linux) or `set GREETING=Hello World` (Windows)
// Then run: `node yourfile.js`

// Access the environment variable, providing a fallback
const message = process.env.GREETING || "Default Greeting";

// Use the configured value
console.log(message);

// To test the default, run without setting the variable: `node yourfile.js`
// Expected output (if set): Hello World
// Expected output (if not set): Default Greeting

// Real-world scenario: Configuring database connection
// Run with: `DB_HOST=proddb.example.com DB_USER=reporter node app.js`

const dbConfig = {
  host: process.env.DB_HOST || 'localhost',
  user: process.env.DB_USER, // Required, no default
  password: process.env.DB_PASSWORD, // Required, no default
  database: process.env.DB_NAME || 'default_db',
  port: Number(process.env.DB_PORT) || 5432,
};

// A function that validates the configuration
function connectToDatabase(config) {
  if (!config.user || !config.password) {
    // Fail fast if required secrets are missing
    throw new Error('DB_USER and DB_PASSWORD environment variables are required.');
  }
  console.log(`Connecting to ${config.database} on ${config.host}:${config.port} as ${config.user}...`);
  // ... actual connection logic would go here
}

try {
    connectToDatabase(dbConfig);
} catch (e) {
    console.error(e.message);
}

// What happens with boolean values? 'false' is a truthy string.
// Run with: `ENABLE_CACHE=false DEBUG_MODE=true`

const appSettings = {
  // This is a common bug: 'false' is a truthy string, so `|| true` is never reached.
  enableCacheWrong: process.env.ENABLE_CACHE || true,

  // Correct way to handle booleans from environment variables
  enableCacheCorrect: process.env.ENABLE_CACHE === 'true',

  // Debug mode can be enabled by just setting the variable to anything
  debugMode: Boolean(process.env.DEBUG_MODE),
};

console.log(`Wrong cache check: ${appSettings.enableCacheWrong}`); // 'false'
console.log(`Correct cache check: ${appSettings.enableCacheCorrect}`); // false
console.log(`Debug mode: ${appSettings.debugMode}`); // true

// Combining environment configs with a local config file for development overrides
// Imagine a `local.config.js` file (not checked into git)
let localConfig = {};
try {
  // This allows developers to have a local override file
  localConfig = require('./local.config.js');
} catch (e) {
  // It's okay if it doesn't exist
}

const config = {
  // Env var takes highest precedence, then local file, then hardcoded default
  logLevel: process.env.LOG_LEVEL || localConfig.logLevel || 'info',
  apiKey: process.env.API_KEY || localConfig.apiKey, // No final default for secrets
};

// Simulate localConfig having a value
localConfig.logLevel = 'debug';

console.log(`Log Level: ${config.logLevel}`);
// To test, run with `LOG_LEVEL=warn node app.js` -> Log Level: warn
// Without env var -> Log Level: debug

// Production-level implementation with validation and type safety
// A library like 'dotenv' is often used to load vars from a .env file for development
// `npm install dotenv` and create a `.env` file with `API_URL=https://api.myapp.com`
require('dotenv').config();

const config = {
  env: process.env.NODE_ENV || 'development',
  port: parseInt(process.env.PORT, 10) || 3001,
  api: {
    url: process.env.API_URL,
    key: process.env.API_KEY,
  }
};

// A function to validate the loaded configuration
function validateConfig(cfg) {
  const required = ['NODE_ENV', 'API_URL', 'API_KEY'];
  const missing = [];
  // For simplicity, checking the source `process.env` directly
  required.forEach(key => {
    if (!process.env[key]) {
      missing.push(key);
    }
  });

  if (missing.length > 0) {
    throw new Error(`FATAL: Missing required environment variables: ${missing.join(', ')}`);
  }
  // Check if URL is valid
  try {
    new URL(cfg.api.url);
  } catch(e) {
    throw new Error(`FATAL: Invalid API_URL: ${cfg.api.url}`);
  }
}

try {
  validateConfig(config);
  console.log(`Configuration loaded successfully for environment: ${config.env}`);
  console.log(`API URL: ${config.api.url}`);
} catch (error) {
  console.error(error.message);
  process.exit(1); // Exit the process on config failure
}

// ❌ ANTI-PATTERN - Sprinkling `process.env` throughout the codebase
function fetchUsers() {
  // Accessing env var deep inside application logic
  const url = process.env.USER_API_URL;
  // return fetch(url);
  console.log(`Anti-pattern fetches from: ${url}`);
}
function getAnalytics() {
    // Another access point, easy to miss
    const key = process.env.ANALYTICS_KEY;
    console.log(`Anti-pattern uses key starting with: ${key ? key.slice(0,2) : 'N/A'}`);
}
process.env.USER_API_URL = 'http://users.service';
process.env.ANALYTICS_KEY = 'xyz123';
fetchUsers();
getAnalytics();


// ✅ CORRECT APPROACH - Centralized configuration object
const appConfig = {
  userApi: {
    url: process.env.USER_API_URL_CORRECT
  },
  analytics: {
    key: process.env.ANALYTICS_KEY_CORRECT
  }
};
function fetchUsersWithConfig(config) {
  const url = config.userApi.url;
  console.log(`Correct pattern fetches from: ${url}`);
}
function getAnalyticsWithConfig(config) {
    const key = config.analytics.key;
    console.log(`Correct pattern uses key starting with: ${key ? key.slice(0,2) : 'N/A'}`);
}
process.env.USER_API_URL_CORRECT = 'http://users.service.central';
process.env.ANALYTICS_KEY_CORRECT = 'abc456';
fetchUsersWithConfig(appConfig);
getAnalyticsWithConfig(appConfig);

// In a central config file, often populated from environment variables
const config = {
  // Features are often a comma-separated string in env vars
  // e.g., `export FEATURES=new-dashboard,beta-checkout`
  enabledFeatures: (process.env.FEATURES || '').split(','),
//                 ↑ [The environment variable containing the feature list]
//                                                      ↑ [Default to empty string to prevent error on split]
//                                                            ↑ [Split the string into an array of feature names]
};

// In the application code
function isFeatureEnabled(featureName) {
// ↑ [Centralized helper function to check for a feature]
  return config.enabledFeatures.includes(featureName);
//        ↑ [Check if the array of enabled features contains the requested one]
}

// Usage
if (isFeatureEnabled('new-dashboard')) {
  // Show new dashboard
} else {
  // Show old dashboard
}

"Let's trace what happens when `isFeatureEnabled('beta-checkout')` is called, assuming the app started with `FEATURES=new-dashboard,beta-checkout,live-chat`.

Step 1: The application starts, and the `config.enabledFeatures` array is initialized. `process.env.FEATURES` is the string 'new-dashboard,beta-checkout,live-chat'.

Step 2: `'new-dashboard,beta-checkout,live-chat'.split(',')` is executed, which produces the array: `['new-dashboard', 'beta-checkout', 'live-chat']`. This array is stored in `config.enabledFeatures`.

Step 3: Later, the code calls `isFeatureEnabled('beta-checkout')`. The `featureName` parameter inside the function is `'beta-checkout'`.

Step 4: The expression `config.enabledFeatures.includes('beta-checkout')` is evaluated.

Step 5: The `.includes()` method checks the `['new-dashboard', 'beta-checkout', 'live-chat']` array. It finds an exact match for the string `'beta-checkout'`.

Step 6: The `.includes()` method returns `true`. The `isFeatureEnabled` function returns `true`, and the code inside the corresponding `if` block is executed. If we had called `isFeatureEnabled('admin-panel')`, it would have returned `false`.

// Simulate environment variable for simplicity
process.env.ACTIVE_FEATURES = 'showWelcomeBanner';

// Create a simple feature flag set
const activeFeatures = new Set((process.env.ACTIVE_FEATURES || '').split(','));

// Check if a feature is enabled
function hasFeature(feature) {
    return activeFeatures.has(feature); // .has() is O(1) for Sets
}

// Use the flag to control application behavior
if (hasFeature('showWelcomeBanner')) {
    console.log("Welcome to our new site!");
}
if (!hasFeature('darkMode')) {
    console.log("Dark mode is not yet available.");
}
// Expected output:
// Welcome to our new site!
// Dark mode is not yet available.

// Real-world scenario: Toggling a new API endpoint implementation
const features = {
  // Imagine this comes from a config file or service
  useNewPricingAlgorithm: process.env.FEATURES?.includes('new-pricing') || false,
};

function calculatePrice(product, user) {
  if (features.useNewPricingAlgorithm) {
    // Call the new, experimental pricing logic
    console.log("Using NEW pricing algorithm.");
    return product.basePrice * user.discountRate * 0.9;
  } else {
    // Use the old, stable pricing logic
    console.log("Using STABLE pricing algorithm.");
    return product.basePrice * user.discountRate;
  }
}

const product = { basePrice: 100 };
const user = { discountRate: 0.8 };

// Run with `node app.js`
console.log(`Price 1: ${calculatePrice(product, user)}`);

// Run with `FEATURES=new-pricing node app.js`
process.env.FEATURES = 'new-pricing';
console.log(`Price 2: ${calculatePrice(product, user)}`);

// Edge Case: Handling flags with different data types (e.g., percentages for rollouts)
function getFeatureValue(featureName) {
  // A more advanced flag system might return values, not just booleans
  // e.g., `export CONFIG_JSON='{"discountRate": 0.15, "useNewApi": true}'`
  const flags = JSON.parse(process.env.CONFIG_JSON || '{}');
  return flags[featureName]; // Returns the value, or undefined
}

// Simulate env var
process.env.CONFIG_JSON = '{"discountRate": 0.15, "timeout": 500}';

const discount = getFeatureValue('discountRate') ?? 0; // Use nullish coalescing for default
const useNewApi = getFeatureValue('useNewApi') ?? false;
const timeout = getFeatureValue('timeout') ?? 1000;


console.log(`Discount to apply: ${discount * 100}%`);
console.log(`Use new API: ${useNewApi}`);
console.log(`API Timeout: ${timeout}ms`);
// Expected:
// Discount to apply: 15%
// Use new API: false
// API Timeout: 500ms

// Combining Feature Flags with Environment-Based Configuration
const config = {
  env: process.env.NODE_ENV || 'development',
  features: new Set((process.env.FEATURES || '').split(',')),
};

function getApiUrl() {
  // In development, we might use a mock server unless a feature flag is on
  if (config.env === 'development' && !config.features.has('use-real-api')) {
    return 'http://localhost:4000/mock-api';
  }

  // Otherwise, use the production API
  return 'https://api.production.com';
}

console.log(`API URL for dev: ${getApiUrl()}`); // http://localhost:4000/mock-api

// Simulate enabling the flag
config.features.add('use-real-api');
console.log(`API URL for dev with flag: ${getApiUrl()}`); // https://api.production.com

// Simulate production environment
config.env = 'production';
console.log(`API URL for prod: ${getApiUrl()}`); // https://api.production.com

// Production-level implementation with user-specific flags (canary releases)
class FeatureFlagClient {
  constructor(flags) {
    // In a real app, this would fetch from a service like LaunchDarkly
    this.flags = flags || {};
  }

  // Check a flag for a specific user context
  isEnabled(featureName, userContext) {
    const flag = this.flags[featureName];
    if (!flag) return false;
    if (!flag.enabled) return false;

    // Check if user is in the specific rollout group
    if (flag.userIds && flag.userIds.includes(userContext.id)) {
      return true;
    }

    // Check if user's account tier is in the rollout
    if (flag.tiers && flag.tiers.includes(userContext.tier)) {
      return true;
    }

    // Check percentage-based rollout
    if (flag.percentage > 0 && (userContext.id % 100) < flag.percentage) {
      return true;
    }

    return false;
  }
}

const mockFlagConfig = {
  'new-checkout': {
    enabled: true,
    percentage: 10, // 10% of users
    tiers: ['premium'], // and all premium users
  }
};

const ffClient = new FeatureFlagClient(mockFlagConfig);

const standardUser = { id: 34, tier: 'free' }; // 34 % 100 is not < 10
const premiumUser = { id: 50, tier: 'premium' };
const luckyUser = { id: 107, tier: 'free' }; // 107 % 100 is 7, which is < 10

console.log(`Standard user sees new checkout: ${ffClient.isEnabled('new-checkout', standardUser)}`);
console.log(`Premium user sees new checkout: ${ffClient.isEnabled('new-checkout', premiumUser)}`);
console.log(`Lucky user sees new checkout: ${ffClient.isEnabled('new-checkout', luckyUser)}`);

// ❌ ANTI-PATTERN - Decentralized and inconsistent flag checking
function showNewProfilePage() {
    // String literal 'newProfile' used directly, prone to typos
    if ((process.env.FLAGS || '').includes('newProfile')) {
        console.log("Showing (potentially broken) new profile page");
    }
}
function getProfileData() {
    // A typo! 'new-Profile' vs 'newProfile'. This logic is now divergent.
    if ((process.env.FLAGS || '').includes('new-Profile')) {
        return { data: 'from new endpoint' };
    }
    return { data: 'from old endpoint' };
}
showNewProfilePage(); // This will work with `FLAGS=newProfile`
console.log(getProfileData()); // This will NOT work with `FLAGS=newProfile`


// ✅ CORRECT APPROACH - Centralized, constant-driven helper
const FEATURES = {
    NEW_PROFILE_PAGE: 'new-profile-page',
    BETA_ANALYTICS: 'beta-analytics',
};
const enabledFeatures = new Set((process.env.APP_FEATURES || '').split(','));

function isFeatureOn(featureConstant) {
    return enabledFeatures.has(featureConstant);
}

// All code uses the constant and the helper, ensuring consistency.
if (isFeatureOn(FEATURES.NEW_PROFILE_PAGE)) {
    console.log("Showing new profile page");
}
if (isFeatureOn(FEATURES.NEW_PROFILE_PAGE)) {
    console.log("Fetching data for new profile page");
}

async function withRetry(fn, maxRetries = 3, initialDelay = 1000) {
// ↑ [Wrapper function that takes the operation to retry]
//      ↑ [The function to execute, e.g., an API call]
//          ↑ [Max number of attempts]
//                           ↑ [The base delay in ms]

  for (let i = 0; i < maxRetries; i++) {
// ↑ [Loop to control the number of retry attempts]
    try {
      return await fn(); // Attempt the operation
//    ↑ [If `fn()` succeeds, return its result and exit the loop]
    } catch (error) {
      if (i === maxRetries - 1) throw error; // If this was the last attempt, re-throw the error
//                                ↑ [Give up and let the caller handle the final failure]

      // Calculate delay with exponential backoff and jitter
      const delay = initialDelay * Math.pow(2, i) + Math.random() * 100;
//                  ↑ [The delay doubles with each failed attempt (i=0, 1, 2...)]
//                                                    ↑ [Adds a small random delay to prevent thundering herds]

      // Wait for the calculated delay before the next iteration
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
}

"Let's trace what happens when we call `withRetry(failingApiCall)` where `failingApiCall` is a function that always throws an error.

Step 1: `withRetry` is called. The `for` loop begins with `i = 0`. `maxRetries` is 3.

Step 2: Inside the `try` block, `await fn()` is executed. `failingApiCall` runs and throws an error.

Step 3: The `catch (error)` block is immediately executed. The condition `i === maxRetries - 1` (is 0 === 2?) is `false`.

Step 4: The delay is calculated. `delay = 1000 * Math.pow(2, 0) + (random) = 1000 * 1 + (random)`. The code waits for approximately 1 second.

Step 5: The loop continues to its second iteration, `i = 1`. `await fn()` is called again and fails again.

Step 6: The `catch` block runs. The condition `i === maxRetries - 1` (is 1 === 2?) is `false`.

Step 7: The new delay is calculated. `delay = 1000 * Math.pow(2, 1) + (random) = 2000 + (random)`. The code waits for approximately 2 seconds.

Step 8: The loop continues to its final iteration, `i = 2`. `await fn()` is called a third time and fails.

Step 9: The `catch` block runs. The condition `i === maxRetries - 1` (is 2 === 2?) is `true`. The `throw error;` statement is executed, causing the `withRetry` function itself to fail with the last error it caught. The promise returned by `withRetry` is rejected.

// A simple function that might fail
let attempts = 0;
function maybeSucceed() {
  return new Promise((resolve, reject) => {
    attempts++;
    console.log(`Attempt #${attempts}...`);
    if (attempts >= 3) {
      console.log('Success!');
      resolve({ data: "Finally worked" });
    } else {
      console.log('Failed.');
      reject(new Error('Network error')); // Simulate a failure
    }
  });
}

// A basic retry function (no exponential backoff yet)
async function retry(fn, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      return await fn();
    } catch (e) {
      if (i === retries - 1) throw e;
    }
  }
}

retry(maybeSucceed);
// Expected output:
// Attempt #1...
// Failed.
// Attempt #2...
// Failed.
// Attempt #3...
// Success!

// Real-world scenario: Fetching data from a flaky API
async function withRetry(fn, maxRetries = 3, delayMs = 500) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn();
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      // Using a fixed delay for simplicity here
      console.log(`Attempt ${i + 1} failed. Retrying in ${delayMs}ms...`);
      await new Promise(resolve => setTimeout(resolve, delayMs));
    }
  }
}

let fetchAttempts = 0;
function fetchImportantData() {
  fetchAttempts++;
  if (fetchAttempts < 3) {
    return Promise.reject("API is temporarily down");
  }
  return Promise.resolve({ userId: 123, name: "Alice" });
}

// Wrap the API call in the retry logic
withRetry(fetchImportantData, 4)
  .then(data => console.log("Data fetched successfully:", data))
  .catch(err => console.error("Failed to fetch data after all retries:", err));

// What happens if the error is not retry-able (e.g., 404 Not Found)?
async function smartRetry(fn, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn();
    } catch (error) {
      // Check for a specific property on the error object
      if (error.isRetryable === false) {
        console.log("Non-retryable error. Aborting.");
        throw error; // Abort immediately
      }
      if (i === maxRetries - 1) throw error;
      const delay = 100 * Math.pow(2, i);
      console.log(`Retryable error occurred. Retrying in ${delay}ms...`);
      await new Promise(r => setTimeout(r, delay));
    }
  }
}

function apiCall(status) {
    if (status === 404) {
        const err = new Error("Not Found");
        err.isRetryable = false; // Add metadata to the error
        return Promise.reject(err);
    }
    return Promise.reject(new Error("Server Error"));
}

smartRetry(() => apiCall(503)); // Will retry
smartRetry(() => apiCall(404)); // Will abort immediately

// Combining exponential backoff retry with a request timeout (using AbortController)
async function withRetryAndTimeout(fn, maxRetries = 3, timeout = 2000) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), timeout);

      // Pass the signal to the function being run (e.g., fetch)
      const result = await fn(controller.signal);
      clearTimeout(timeoutId); // Clear the timeout if it succeeds
      return result;
    } catch (error) {
      if (error.name === 'AbortError') console.log('Request timed out.');
      if (i === maxRetries - 1) throw error;

      const delay = 500 * Math.pow(2, i);
      await new Promise(r => setTimeout(r, delay));
    }
  }
}

// A mock fetch that can be slow
function slowFetch(signal) {
    return new Promise((resolve, reject) => {
        // This fetch takes 3 seconds, which is longer than our timeout
        setTimeout(() => resolve({data: 'ok'}), 3000);
        signal.addEventListener('abort', () => reject(new AbortError()));
    });
}
// This will time out, retry, time out, etc.
withRetryAndTimeout(slowFetch).catch(e => console.error("Final error:", e.name));

// Production-level implementation as a configurable class
class ResilientClient {
  constructor(options) {
    this.maxRetries = options.maxRetries ?? 3;
    this.initialDelay = options.initialDelay ?? 500;
  }

  async request(apiCallFn) {
    for (let i = 0; i < this.maxRetries; i++) {
      try {
        return await apiCallFn();
      } catch (error) {
        // Only retry on specific network/server errors
        if (!this.isRetryable(error)) {
          throw error;
        }
        if (i === this.maxRetries - 1) {
          console.error('Final attempt failed.');
          throw error;
        }

        const delay = this.initialDelay * Math.pow(2, i) + (Math.random() - 0.5) * 100;
        console.warn(`Attempt ${i + 1} failed. Retrying in ${delay.toFixed(0)}ms...`);
        await new Promise(res => setTimeout(res, delay));
      }
    }
  }

  isRetryable(error) {
    // In a real app, you'd check error codes or types
    const retryableErrors = ['ECONNRESET', 'ETIMEDOUT', '503'];
    return retryableErrors.some(code => error.message.includes(code));
  }
}

let failCount = 0;
function flakyDbQuery() {
    failCount++;
    if (failCount <= 2) return Promise.reject(new Error("Server Error 503"));
    return Promise.resolve({ id: 1 });
}

const client = new ResilientClient({ maxRetries: 5 });
client.request(flakyDbQuery).then(result => console.log('DB Query Succeeded:', result));

// ❌ ANTI-PATTERN - "Retry storm" with no delay
async function retryStorm(fn) {
  let retries = 5;
  while (retries > 0) {
    try {
      console.log('Trying...');
      return await fn();
    } catch (e) {
      retries--;
      if (retries === 0) throw e;
      // No waiting! This will hammer the server.
    }
  }
}

// ✅ CORRECT APPROACH - Controlled, delayed retries
async function controlledRetry(fn) {
    let retries = 5;
    for (let i = 0; i < retries; i++) {
        try {
            console.log('Trying with delay...');
            return await fn();
        } catch (e) {
            if (i === retries - 1) throw e;
            // Introduce a delay that increases with each failure
            const delay = 100 * Math.pow(2, i);
            await new Promise(res => setTimeout(res, delay));
        }
    }
}

async function fetchWithFallback(url, fallbackValue) {
// ↑ [The function attempts a primary action]
//      ↑ [The source for the primary data (e.g., API endpoint)]
//          ↑ [The default/cached value to use on failure]
  try {
    const response = await fetch(url);
    if (!response.ok) {
      // Handle HTTP errors like 404 or 500 as failures
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json(); // ← [The "happy path" - return live data]
  } catch (error) {
    // This block executes on network errors or HTTP errors
    console.warn(`Primary fetch failed: ${error.message}. Using fallback.`);
    return fallbackValue; // ← [The "sad path" - return the fallback data]
  }
}

"Let's trace what happens when `fetchWithFallback` is called with a URL that is offline.

Step 1: The `fetchWithFallback` function is called. The `try` block begins execution.

Step 2: `await fetch(url)` is executed. Because the server is offline, the `fetch` call fails at the network level and immediately throws a `TypeError` (e.g., 'Failed to fetch').

Step 3: Execution control jumps directly to the `catch (error)` block. The `error` variable now holds the `TypeError` object.

Step 4: The `console.warn` message is printed to the log, indicating that the primary method failed and a fallback is being used.

Step 5: The function executes `return fallbackValue;`. The `fallbackValue` (e.g., a default user profile object) is returned to the caller.

Step 6: The calling code receives the `fallbackValue` as if the operation had succeeded, allowing the application to continue running smoothly instead of crashing.

// A simple function that might fail
function getUsername(id) {
  if (id === 1) {
    return "Alice";
  }
  // Simulate a failure for any other ID
  throw new Error("User not found");
}

function getUsernameWithFallback(id) {
  try {
    // Attempt the primary operation
    return getUsername(id);
  } catch (e) {
    // If it fails, return a safe default
    return "Guest";
  }
}

console.log(`User 1: ${getUsernameWithFallback(1)}`);
console.log(`User 2: ${getUsernameWithFallback(2)}`);
// Expected output:
// User 1: Alice
// User 2: Guest

// Real-world scenario: Loading user preferences from localStorage, falling back to defaults
const defaultPreferences = { theme: 'light', notifications: 'enabled' };

function loadUserPreferences() {
  try {
    const prefsString = localStorage.getItem('user-prefs');
    // The operation can fail if storage is empty or contains invalid JSON
    if (prefsString) {
      return JSON.parse(prefsString);
    }
    // If no prefs are stored, that's a reason to use fallback
    throw new Error('No preferences stored.');
  } catch (error) {
    console.warn('Could not load preferences, using defaults.', error.message);
    return defaultPreferences;
  }
}

// In a real browser, `localStorage.getItem` would be used. We'll simulate it.
// const localStorage = { getItem: () => '{"theme":"dark"}' }; // Success case
const localStorage = { getItem: () => '{"theme":' }; // Broken JSON case

const prefs = loadUserPreferences();
console.log('Loaded theme:', prefs.theme);

// Edge Case: The fallback operation itself could fail.
let fallbackCache = { user: 'Cached User Data' };

async function fetchWithSmartFallback(url) {
  try {
    // const response = await fetch(url);
    throw new Error("API is down"); // Simulate API failure
  } catch (primaryError) {
    console.warn("Primary source failed. Attempting to use fallback cache.");
    try {
      if (fallbackCache) {
        return fallbackCache;
      }
      throw new Error("Fallback cache is empty or invalid.");
    } catch (fallbackError) {
      // If even the fallback fails, return a "last resort" minimal object
      console.error("CRITICAL: Fallback also failed!", fallbackError.message);
      return { error: true, message: "Service unavailable." };
    }
  }
}

fetchWithSmartFallback('api/data').then(data => console.log('Final data:', data));
fallbackCache = null; // Now simulate the cache also being unavailable
fetchWithSmartFallback('api/data').then(data => console.log('Final data:', data));