In JavaScript, ES6 arrow functions behave fundamentally differently from regular function declarations with respect to the this keyword. While regular functions determine their this binding dynamically at call time based on how they are invoked, arrow functions have no [[ThisMode]] binding of their own—they inherit this lexically from the enclosing scope in which they were defined.

This distinction directly impacts higher-order utility wrappers such as debounce and throttle that forward execution context via func.apply(this, args).

How func.apply(this, args) Interacts with Arrow Functions

• Regular Functions (Dynamic Context): When func is a standard function expression or method, invoking func.apply(this, args) inside the debounced wrapper binds this inside func to whatever receiver object invoked the debounced wrapper.
• Arrow Functions (Lexical Context): When func is an arrow function, the ECMAScript runtime completely ignores the thisArg passed to Function.prototype.apply, call, or bind. Instead, this remains permanently locked to the lexical scope where the arrow function was created.

Code Comparison: Object Method vs. Arrow Property in debounce

function debounce(func, delayMs) {
  let timeoutId;
  return function (...args) {
    const context = this;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delayMs);
  };
}

const searchController = {
  queryPrefix: 'catalog:',
  regularHandler: function (term) {
    console.log(`${this.queryPrefix}${term}`);
  },
  arrowHandler: (term) => {
    // 'this' is captured from the outer module/global scope, NOT searchController
    console.log(`${this?.queryPrefix}${term}`);
  }
};

const debouncedRegular = debounce(searchController.regularHandler, 300);
const debouncedArrow = debounce(searchController.arrowHandler, 300);

debouncedRegular.call(searchController, 'laptops'); // Logs "catalog:laptops" after 300ms
debouncedArrow.call(searchController, 'laptops');   // Logs "undefinedlaptops" after 300ms

Architectural Rule: If a debounced callback must read instance properties via this when attached as an object method or DOM listener, define the callback as a regular function—or define the arrow function inside a class constructor/method where the enclosing lexical this is already the class instance.

Implementing Leading-Edge (Immediate) Execution in debounce

Standard trailing-edge debouncing waits until user input pauses for delayMs before firing. For interactive UI triggers like form submit buttons where the first click should respond instantaneously while blocking rapid double-clicks, we can add an immediate boolean parameter:

function debounceWithImmediate(func, delayMs, immediate = false) {
  let timeoutId = null;

  return function (...args) {
    const context = this;
    const shouldCallImmediately = immediate && timeoutId === null;

    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      timeoutId = null;
      if (!immediate) {
        func.apply(context, args);
      }
    }, delayMs);

    if (shouldCallImmediately) {
      func.apply(context, args);
    }
  };
}

const triggerSave = debounceWithImmediate(
  function (docId) {
    console.log(`Saving document ${docId}`);
  },
  500,
  true
);

triggerSave('doc-101'); // Executes immediately on first call
triggerSave('doc-101'); // Suppressed (within 500ms cooldown window)

Implementing Rate-Limited Execution with throttle

Whereas debouncing postpones execution until activity stops, throttling guarantees that a function executes at most once every limitMs interval during continuous high-frequency events such as window.scroll, mousemove, or requestAnimationFrame telemetry sampling:

function throttle(func, limitMs) {
  let inThrottle = false;

  return function (...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limitMs);
    }
  };
}

const reportScrollDepth = throttle(function (scrollY) {
  console.log(`Scroll position sampled at: ${scrollY}px`);
}, 200);

Comparison Matrix: Trailing Debounce, Leading Debounce & Throttle