JavaScript this — React Handler Silent Failure

// ── Default Binding ──────────────────────────────────────────
// Called as a plain function — no object in front of it.
function describeWeather() {
  // In non-strict mode, 'this' here is the global object.
  // In strict mode ('use strict'), 'this' is undefined.
  console.log('Weather reporter this:', this === globalThis);
}

describeWeather(); // true (non-strict, browser or Node)

// ── Implicit Binding ─────────────────────────────────────────
// 'this' is determined by what's to the LEFT of the dot at call time.
const coffeeMachine = {
  brand: 'BrewMaster 3000',
  describe() {
    // 'this' is coffeeMachine because we called coffeeMachine.describe()
    console.log(`Machine brand: ${this.brand}`);
  }
};

coffeeMachine.describe(); // Machine brand: BrewMaster 3000

// ── The Trap: Losing Implicit Binding ────────────────────────
// We pull the method out and store it as a plain variable.
const standAloneDescribe = coffeeMachine.describe;

// Now there's NO dot — default binding kicks in.
// In strict mode this is undefined → TypeError crash.
// In non-strict mode this is globalThis → this.brand is undefined.
standAloneDescribe(); // Machine brand: undefined

// ── call: invoke immediately with a specific 'this' ──────────
const userProfile = {
  username: 'alex_codes',
  memberSince: 2021
};

function greetUser(greeting, punctuation) {
  // 'this' will be whatever we pass as the first arg to .call()
  console.log(`${greeting}, ${this.username}! Member since ${this.memberSince}${punctuation}`);
}

// Force 'this' to be userProfile, pass the rest as normal args
greetUser.call(userProfile, 'Welcome back', '!');
// Welcome back, alex_codes! Member since 2021!

// ── apply: same idea, but arguments go in an array ───────────
greetUser.apply(userProfile, ['Hello', '.']);
// Hello, alex_codes! Member since 2021.

// ── Borrowing array methods with call ────────────────────────
// arguments is array-LIKE but doesn't have .map, .filter etc.
function listArguments() {
  // Borrow Array's join method and run it with 'arguments' as 'this'
  const joined = Array.prototype.join.call(arguments, ' | ');
  console.log('Arguments joined:', joined);
}

listArguments('HTML', 'CSS', 'JavaScript');
// Arguments joined: HTML | CSS | JavaScript

// ── bind: create a permanently bound function ─────────────────
const notificationService = {
  serviceName: 'AlertHub',
  send(message) {
    // Without bind, 'this' would be lost inside setTimeout
    console.log(`[${this.serviceName}] ${message}`);
  }
};

// bind returns a NEW function — this is forever locked to notificationService
const boundSend = notificationService.send.bind(notificationService);

// Even inside setTimeout (where 'this' would normally be global), it works.
setTimeout(boundSend, 100, 'Server connection established.');
// [AlertHub] Server connection established.

// ── bind with pre-filled arguments (partial application) ─────
function formatPrice(currency, amount) {
  return `${currency}${amount.toFixed(2)} charged to ${this.username}`;
}

const formatInGBP = formatPrice.bind(userProfile, '£');
console.log(formatInGBP(49.9));   // £49.90 charged to alex_codes
console.log(formatInGBP(199));    // £199.00 charged to alex_codes

// ── The classic pre-ES6 problem arrow functions solve ────────
const orderQueue = {
  restaurantName: 'The Code Bistro',
  pendingOrders: ['Burger', 'Salad', 'Pizza'],

  // Regular function — creates its OWN 'this' binding
  printOrdersOldWay() {
    const self = this; // Capture outer 'this' before entering callback

    this.pendingOrders.forEach(function(order) {
      // Inside this regular function callback, 'this' is NOT orderQueue
      // That's why we had to use 'self' as a workaround
      console.log(`[Old Way] ${self.restaurantName}: ${order}`);
    });
  },

  // Arrow function inside — captures 'this' from printOrdersModern's context
  printOrdersModern() {
    // 'this' here is orderQueue (implicit binding from the dot call)
    this.pendingOrders.forEach((order) => {
      // Arrow function inherits 'this' from printOrdersModern — it's orderQueue
      console.log(`[Modern] ${this.restaurantName}: ${order}`);
    });
  }
};

orderQueue.printOrdersOldWay();
orderQueue.printOrdersModern();

// ── Arrow functions as METHODS — what goes wrong ──────────────
const userAccount = {
  accountHolder: 'Jordan',

  // DON'T do this — arrow function as a method
  greetArrow: () => {
    // 'this' here is captured from the surrounding scope of the object LITERAL
    // which is the global scope (or module scope) — NOT userAccount
    console.log(`Arrow method this.accountHolder: ${this?.accountHolder}`);
  },

  // DO this — regular function as a method
  greetRegular() {
    // 'this' is userAccount because we call it with userAccount.greetRegular()
    console.log(`Regular method this.accountHolder: ${this.accountHolder}`);
  }
};

userAccount.greetArrow();   // Arrow method this.accountHolder: undefined
userAccount.greetRegular(); // Regular method this.accountHolder: Jordan

// ── Arrow functions correctly used inside a class ─────────────
class CountdownTimer {
  constructor(label, seconds) {
    this.label = label;      // 'this' is the new instance
    this.seconds = seconds;
  }

  start() {
    // Arrow function captures 'this' = the CountdownTimer instance
    const tick = () => {
      this.seconds -= 1;
      console.log(`${this.label}: ${this.seconds}s remaining`);
    };

    // No binding needed — arrow function keeps 'this' correctly
    const interval = setInterval(() => {
      tick();
      if (this.seconds <= 0) clearInterval(interval);
    }, 1000);
  }
}

const timer = new CountdownTimer('Deploy Build', 3);
timer.start();
// (after 1s) Deploy Build: 2s remaining
// (after 2s) Deploy Build: 1s remaining
// (after 3s) Deploy Build: 0s remaining

// ── new Binding — what 'new' does behind the scenes ──────────
class ShoppingCart {
  constructor(ownerName) {
    // At this point, 'this' is a brand-new empty object created by 'new'
    this.owner = ownerName;  // Attaches 'owner' to that new object
    this.items = [];          // Each instance gets its OWN items array
    this.total = 0;
    console.log(`Cart created for: ${this.owner}`);
  }

  addItem(productName, price) {
    // 'this' is the specific ShoppingCart instance this was called on
    this.items.push({ productName, price });
    this.total += price;
    console.log(`Added ${productName} (£${price}) → Cart total: £${this.total.toFixed(2)}`);
  }

  getSummary() {
    return `${this.owner}'s cart: ${this.items.length} item(s), Total: £${this.total.toFixed(2)}`;
  }
}

const aliceCart = new ShoppingCart('Alice');  // new creates a fresh object for Alice
const bobCart   = new ShoppingCart('Bob');    // Completely separate object for Bob

aliceCart.addItem('JavaScript Book', 29.99);
aliceCart.addItem('Mechanical Keyboard', 89.99);
bobCart.addItem('Webcam', 49.99);

console.log(aliceCart.getSummary());
console.log(bobCart.getSummary());

// ── The class callback trap — and two ways to fix it ──────────
class NotificationBell {
  constructor(soundName) {
    this.soundName = soundName;

    // FIX OPTION 1: Bind in the constructor
    // this.ring is now a bound copy — safe to use as a callback
    this.ring = this.ring.bind(this);
  }

  ring() {
    console.log(`🔔 Playing sound: ${this.soundName}`);
  }
}

const alertBell = new NotificationBell('chime');

// Safe to pass as a callback — 'this' is locked to alertBell
setTimeout(alertBell.ring, 50);

// FIX OPTION 2: Class field arrow function (modern approach)
class MessageAlert {
  constructor(text) {
    this.text = text;
  }

  // Class field arrow captures 'this' at construction time
  // No need to bind manually — works safely as a callback
  show = () => {
    console.log(`📢 Alert: ${this.text}`);
  };
}

const loginAlert = new MessageAlert('Login successful');
setTimeout(loginAlert.show, 100); // Works perfectly — no bind needed

// ── Systematic Debugging ────────────────────────────────────

const userService = {
  name: 'UserService',
  fetchUser(id) {
    // Step 1: Log this at the call site
    console.log('this inside fetchUser:', this);
    console.trace(); // Shows the call stack

    // If this is wrong, check where this function is being called
    return { id, name: 'Alice' };
  }
};

// Direct call — this is userService
userService.fetchUser(1); // this: {name: 'UserService', fetchUser: f}

// Extracting without binding — this becomes undefined (strict) or global
const fetch = userService.fetchUser;
fetch(2); // this: undefined (strict) or Window

// Fix: bind
const boundFetch = userService.fetchUser.bind(userService);
boundFetch(3); // this: userService

// ── Using debugger to inspect ────────────────────────────────
function problematicHandler(event) {
  debugger; // Execution pauses here — inspect 'this' in dev tools
  console.log('Clicked:', this); // Often becomes the DOM element
}

document.querySelector('button')?.addEventListener('click', problematicHandler);

// ── React DevTools check ─────────────────────────────────────
// Open React DevTools, Components tab, select component
// Verify that the handler function shows 'bound' or arrow in its name

// ── Quick wrap test ──────────────────────────────────────────
// If this.block fails as a callback, try:
setTimeout(() => userService.fetchUser(4), 100);
// If that works, you have a binding issue. Temporarily fix with arrow, then bind permanently.