Arrow Functions in JavaScript — The `this` Method Trap

// ── REGULAR FUNCTION ──────────────────────────────────────────────────────
function greetUser(userName) {
  return `Hello, ${userName}! Welcome to TheCodeForge.`;
}

console.log(greetUser('Alex'));  // Hello, Alex! Welcome to TheCodeForge.


// ── ARROW FUNCTION — STEP-BY-STEP CONVERSION ──────────────────────────────

// Step 1: Remove 'function' keyword and name, add '=>' after the parameters
const greetUserArrow = (userName) => {
  return `Hello, ${userName}! Welcome to TheCodeForge.`;
};

console.log(greetUserArrow('Alex'));  // Same output


// ── SHORTHAND RULES — EACH ONE IS INDEPENDENT ─────────────────────────────

// RULE 1: Single parameter — parentheses are optional (style choice)
const greetSingleParam = userName => {
  return `Hello, ${userName}! Welcome to TheCodeForge.`;
};

// RULE 2: Single expression body — drop braces AND the return keyword together
// The expression's value is returned implicitly
const greetImplicit = userName =>
  `Hello, ${userName}! Welcome to TheCodeForge.`;

console.log(greetImplicit('Sam'));  // Hello, Sam! Welcome to TheCodeForge.

// RULE 3: Zero parameters — empty parentheses are required
const sayHello = () => 'Hello, world!';
console.log(sayHello());  // Hello, world!

// RULE 4: Returning an object literal — wrap in parentheses
// Without parens, JS reads '{' as the start of a function body, not an object
const buildUserProfile = (name, age) => ({ name: name, age: age });
console.log(buildUserProfile('Jordan', 28));  // { name: 'Jordan', age: 28 }

// ── THE BRACE TRAP — most common arrow function mistake ────────────────────

// BROKEN: added braces for multi-line logic but forgot to restore return
const doubleAndLogBroken = n => {
  const result = n * 2;
  // Missing return — this silently returns undefined
};

// FIXED: braces require explicit return
const doubleAndLog = n => {
  const result = n * 2;
  return result;  // Explicit return is mandatory when braces are present
};

console.log('Broken:', doubleAndLogBroken(5));  // undefined
console.log('Fixed: ', doubleAndLog(5));        // 10

// ── SAMPLE DATA: product catalogue from an API response ───────────────────
const products = [
  { name: 'Wireless Keyboard', price: 49.99, inStock: true,  category: 'peripherals' },
  { name: 'USB-C Hub',         price: 29.99, inStock: false, category: 'peripherals' },
  { name: 'Mechanical Mouse',  price: 74.99, inStock: true,  category: 'peripherals' },
  { name: 'Monitor Stand',     price: 39.99, inStock: true,  category: 'accessories' },
  { name: 'Laptop Sleeve',     price: 19.99, inStock: false, category: 'accessories' },
];

// .filter() — keep only items that pass a test; original array is untouched
const availableProducts = products.filter(product => product.inStock);
console.log('In stock:', availableProducts.map(p => p.name));

// .map() — transform every item into a new shape
const productBannerNames = availableProducts.map(
  product => product.name.toUpperCase()
);
console.log('Banner names:', productBannerNames);

// .find() — returns the FIRST item that matches, or undefined if none do
const affordableProduct = products.find(product => product.price < 35);
console.log('First affordable item:', affordableProduct?.name ?? 'none found');

// .reduce() — collapse the array into a single accumulated value
const totalInventoryValue = products
  .filter(product => product.inStock)
  .reduce((runningTotal, product) => runningTotal + product.price, 0);
console.log(`Total inventory value: $${totalInventoryValue.toFixed(2)}`);

// CHAINING — filter, map, and sort in one readable pipeline
// Each method returns a new array; no mutation, no intermediate variables
const premiumAvailableNames = products
  .filter(product => product.inStock && product.price > 30)
  .map(product => product.name)
  .sort((a, b) => a.localeCompare(b));  // alphabetical sort

console.log('Premium available:', premiumAvailableNames);

// PROMISE CHAIN — arrow functions keep the data flow readable left-to-right
Promise.resolve([{ id: 1, score: 88 }, { id: 2, score: 45 }, { id: 3, score: 92 }])
  .then(results => results.filter(r => r.score >= 80))
  .then(passing => passing.map(r => r.id))
  .then(passingIds => console.log('Passing IDs:', passingIds));

// ── THE CLASSIC `this` BUG — regular function callback in setTimeout ───────

const countdownTimer = {
  startMessage: 'Launch sequence initiated',
  secondsRemaining: 3,

  startCountdown: function() {
    console.log(this.startMessage);  // ✅ works — 'this' is countdownTimer

    setTimeout(function() {
      // ❌ PROBLEM: setTimeout calls this function with no context
      // 'this' is now the global object (undefined in strict mode)
      console.log('Seconds remaining:', this.secondsRemaining);  // undefined
    }, 100);
  }
};

countdownTimer.startCountdown();
// Output:
// Launch sequence initiated
// Seconds remaining: undefined

console.log('--- fixed version ---');

// ── THE FIX — replace the callback with an arrow function ────────────────────

const rocketLaunchTimer = {
  startMessage: 'Launch sequence initiated',
  secondsRemaining: 3,

  startCountdown: function() {
    console.log(this.startMessage);  // ✅ 'this' is rocketLaunchTimer

    // Arrow function inherits 'this' from startCountdown's execution context
    // which is rocketLaunchTimer — it never changes, regardless of who calls it
    setTimeout(() => {
      console.log('Seconds remaining:', this.secondsRemaining);  // ✅ 3
    }, 100);
  }
};

rocketLaunchTimer.startCountdown();
// Output:
// Launch sequence initiated
// Seconds remaining: 3

console.log('--- method context demo ---');

// ── WHEN NOT TO USE ARROW FUNCTIONS — object methods ────────────────────────

const userAccount = {
  username: 'codeforger_99',
  balance: 250,

  // ❌ Arrow function as method — 'this' is the outer scope (undefined in strict mode)
  getBalanceBroken: () => {
    // 'this' is NOT userAccount here — it's whatever surrounded the object literal
    return `${this?.username ?? 'unknown'} has $${this?.balance ?? '??'}`;
  },

  // ✅ Regular function as method — 'this' IS userAccount when called as userAccount.getBalance()
  getBalance: function() {
    return `${this.username} has $${this.balance}`;
  },

  // ✅ Shorthand method syntax — equivalent to regular function, cleaner in object literals
  getBalanceShorthand() {
    return `${this.username} has $${this.balance}`;
  }
};

console.log(userAccount.getBalanceBroken());    // unknown has $??
console.log(userAccount.getBalance());          // codeforger_99 has $250
console.log(userAccount.getBalanceShorthand()); // codeforger_99 has $250

// ── BINDING IS IGNORED ON ARROW FUNCTIONS ────────────────────────────────────

const standalone = userAccount.getBalanceBroken;
const attemptedBind = standalone.bind(userAccount);
console.log(attemptedBind());  // Still: unknown has $?? — .bind() has no effect on arrow functions

// ── THE DECISION FRAMEWORK IN PRACTICE ────────────────────────────────────

// ✅ USE ARROW FUNCTIONS: array method callbacks
const temperatures = [22, 35, 18, 29, 41, 15];
const hotDays      = temperatures.filter(temp => temp > 30);
const doubled      = temperatures.map(temp => temp * 2);
console.log('Hot days:', hotDays);
console.log('Doubled: ', doubled);

// ✅ USE ARROW FUNCTIONS: promise .then() chains
Promise.resolve({ userId: 42, name: 'Morgan' })
  .then(user => user.name.toUpperCase())
  .then(upperName => `Welcome, ${upperName}!`)
  .then(message => console.log(message))
  .catch(err => console.error('Failed:', err.message));

// ✅ USE ARROW FUNCTIONS: callbacks inside methods — to inherit outer `this`
function createButton(label) {
  return {
    label,
    clickCount: 0,

    // Regular function for the method — 'this' is the button object
    onClick: function(eventData) {
      this.clickCount += 1;  // 'this' is the button — correct

      // Arrow function for the async callback — inherits 'this' from onClick
      setTimeout(() => {
        // 'this' is still the button — arrow function preserved it
        console.log(`'${this.label}' clicked ${this.clickCount}x:`, eventData);
      }, 50);
    }
  };
}

const submitButton = createButton('Submit Order');
submitButton.onClick({ orderId: 'ORD-9901' });

// ❌ AVOID ARROW FUNCTIONS: constructors
const ArrowAnimal = (species) => {
  this.species = species;  // 'this' is not the new instance — it's the outer scope
};

try {
  const cat = new ArrowAnimal('Felis catus');  // TypeError: not a constructor
} catch (error) {
  console.log('Arrow constructor error:', error.message);
}

// ✅ Regular function for constructors
function Animal(species) {
  this.species = species;
}
Animal.prototype.describe = function() {
  return `A ${this.species}`;
};

const dog = new Animal('Canis lupus familiaris');
console.log('Created:', dog.describe());

// ✅ ES6 class (preferred modern pattern for constructor use cases)
class Vehicle {
  constructor(make, model) {
    this.make  = make;
    this.model = model;
  }

  // Shorthand method — regular function, 'this' is the instance
  describe() {
    return `${this.make} ${this.model}`;
  }

  // Arrow class field — 'this' is lexically bound to the instance
  // Safe to pass as a callback without losing context
  describeAsCallback = () => {
    return `${this.make} ${this.model}`;
  };
}

const car = new Vehicle('Toyota', 'GR86');
console.log(car.describe());

// Passing the method as a callback — regular method loses 'this', arrow field doesn't
const regularCb  = car.describe;           // detached — 'this' will be undefined
const arrowCb    = car.describeAsCallback; // arrow field — 'this' is still the car

try { console.log(regularCb()); } catch (e) { console.log('Regular detached:', e.message); }
console.log('Arrow field detached:', arrowCb());