Arrow Functions in JavaScript Explained — Syntax, `this`, and Pitfalls

// ── REGULAR FUNCTION ──────────────────────────────────────────
// The classic way — verbose but familiar
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 the word 'function' and the name
// Step 2: Add '=>' between the parameters and the opening brace
const greetUserArrow = (userName) => {
  return `Hello, ${userName}! Welcome to TheCodeForge.`;
};

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


// ── SHORTHAND RULES (arrow functions have shortcuts) ───────────

// RULE 1: If there's only ONE parameter, drop the parentheses
const greetUserShort = userName => {
  return `Hello, ${userName}! Welcome to TheCodeForge.`;
};

// RULE 2: If the function body is a single return expression,
// drop the curly braces AND the word 'return' — it's implied
const greetUserShortest = userName =>
  `Hello, ${userName}! Welcome to TheCodeForge.`;

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


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


// RULE 4: Returning an object literal? Wrap it in parentheses
// or JavaScript thinks the curly braces are the function body
const buildUserProfile = (name, age) => ({ name: name, age: age });
console.log(buildUserProfile('Jordan', 28)); // { name: 'Jordan', age: 28 }

// Imagine we fetched this list of products from an e-commerce API
const products = [
  { name: 'Wireless Keyboard', price: 49.99, inStock: true },
  { name: 'USB-C Hub',         price: 29.99, inStock: false },
  { name: 'Mechanical Mouse',  price: 74.99, inStock: true },
  { name: 'Monitor Stand',     price: 39.99, inStock: true },
  { name: 'Laptop Sleeve',     price: 19.99, inStock: false },
];


// ── .filter() — keep only items that pass a test ───────────────
// Arrow function checks each product and keeps it if inStock is true
const availableProducts = products.filter(product => product.inStock);
console.log('In stock:', availableProducts.map(p => p.name));
// In stock: [ 'Wireless Keyboard', 'Mechanical Mouse', 'Monitor Stand' ]


// ── .map() — transform every item into something new ──────────
// We want just the names, uppercased, for a display banner
const productBannerNames = availableProducts.map(
  product => product.name.toUpperCase()
);
console.log('Banner names:', productBannerNames);
// Banner names: [ 'WIRELESS KEYBOARD', 'MECHANICAL MOUSE', 'MONITOR STAND' ]


// ── .find() — get the FIRST item that matches ─────────────────
const affordableProduct = products.find(product => product.price < 35);
console.log('First affordable item:', affordableProduct.name);
// First affordable item: USB-C Hub


// ── .reduce() — collapse the array into one value ────────────
// Calculate the total value of all in-stock products
const totalInventoryValue = products
  .filter(product => product.inStock)             // keep only in-stock
  .reduce((runningTotal, product) => runningTotal + product.price, 0); // sum prices

console.log(`Total inventory value: $${totalInventoryValue.toFixed(2)}`);
// Total inventory value: $164.97


// ── CHAINING — see how readable this flows ────────────────────
// Real task: Get names of in-stock products over $30, sorted A-Z
const premiumAvailableNames = products
  .filter(product => product.inStock && product.price > 30) // filter
  .map(product => product.name)                             // extract names
  .sort((a, b) => a.localeCompare(b));                      // sort A-Z

console.log('Premium available:', premiumAvailableNames);
// Premium available: [ 'Mechanical Mouse', 'Monitor Stand', 'Wireless Keyboard' ]

// ── THE CLASSIC `this` BUG with regular functions ─────────────
const countdownTimer = {
  startMessage: 'Launch sequence initiated',
  secondsRemaining: 3,

  startCountdown: function() {
    console.log(this.startMessage); // ✅ 'this' works here — called on the object

    setTimeout(function() {
      // ❌ PROBLEM: 'this' is now the global object, not countdownTimer
      // In a browser this would be 'window', in Node.js it's the global object
      // In strict mode ('use strict'), this is undefined — causes a crash
      console.log('Seconds remaining:', this.secondsRemaining); // undefined!
    }, 100);
  }
};

countdownTimer.startCountdown();
// Launch sequence initiated
// Seconds remaining: undefined  ← The bug!


// ── 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

    setTimeout(() => {
      // ✅ Arrow function has no own 'this' — it inherits from startCountdown
      // startCountdown's 'this' is rocketLaunchTimer — so this works!
      console.log('Seconds remaining:', this.secondsRemaining); // 3
    }, 100);
  }
};

rocketLaunchTimer.startCountdown();
// Launch sequence initiated
// Seconds remaining: 3  ← Fixed!


// ── WHEN NOT TO USE ARROW FUNCTIONS ───────────────────────────
// Object methods themselves should usually be regular functions
// because you WANT 'this' to refer to the object

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

  // ❌ Arrow function as an object method — 'this' won't be userAccount
  getBalanceBroken: () => {
    return `${this.username} has $${this.balance}`; // 'this' is global here!
  },

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

console.log(userAccount.getBalanceBroken()); // undefined has $undefined
console.log(userAccount.getBalance());       // codeforger_99 has $250

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

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


// ✅ USE ARROW FUNCTIONS FOR: promise .then() chains
// (Simulating a fetch call with a resolved promise)
Promise.resolve({ userId: 42, name: 'Morgan' })
  .then(user => user.name.toUpperCase())  // arrow function: clean
  .then(upperName => `Welcome, ${upperName}!`)
  .then(message => console.log(message)); // Welcome, MORGAN!


// ✅ USE ARROW FUNCTIONS FOR: event listener callbacks
// (Simulating a button click handler in a Node-like environment)
function createButton(label) {
  return {
    label,
    // Regular function for the method — so 'this' is the button
    onClick: function(eventData) {
      // Arrow function for the async callback inside — inherits 'this'
      setTimeout(() => {
        console.log(`Button '${this.label}' was clicked with data:`, eventData);
      }, 50);
    }
  };
}

const submitButton = createButton('Submit Order');
submitButton.onClick({ orderId: 'ORD-9901' });
// Button 'Submit Order' was clicked with data: { orderId: 'ORD-9901' }


// ❌ AVOID ARROW FUNCTIONS FOR: constructors
// This will throw a TypeError
const Animal = (species) => {
  this.species = species; // 'this' is not what you think here
};

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

// ✅ Use a regular function or class for constructors
function AnimalConstructor(species) {
  this.species = species;
}
const dog = new AnimalConstructor('Canis lupus familiaris');
console.log('Created animal:', dog.species); // Created animal: Canis lupus familiaris