notes

Definition:

• Arrow functions do not have their own this, arguments, super, or new.target.
• They inherit this from lexical scope.

Common Interview Questions:

• Why can't arrow functions be used as constructors?
• Difference between arrow and normal functions?

Definition:

A closure allows a function to retain access to outer scope variables even after execution.

• Function declarations → Fully hoisted
• var → Hoisted as undefined
• let & const → Temporal Dead Zone

console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError
let b = 10;
                    

• Promise states: Pending, Fulfilled, Rejected
• async/await improves readability
• Difference between Promise.all and Promise.allSettled

Pure Function:

• It depends only on its input parameters and not on any external variable , a function accessing outer variable is not a pure JS function.
• Always returns the same output for the same input.
• Has no side effects (does not modify external state).

function add(a, b) {
  return a + b;
}
                    

Impure Function:

• May produce different output for same input.
• Has side effects (modifies external variables, DOM, API calls, etc.).

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}
                    

Interview Focus:

• Why are pure functions preferred in functional programming?
• How do pure functions improve testability and predictability?

Definition: Debouncing ensures a function runs only after a specified period of inactivity since the last call.

Use cases:

• Search-as-you-type to reduce API calls.
• Window resize or scroll handlers.
• Form input validation.

Debounce vs Throttle:

• Debounce waits until the user stops triggering events.
• Throttle executes at most once per interval during a burst of events.

// Simple debounce implementation
function debounce(fn, delay) {
  let timerId;
  return function (...args) {
    const context = this;
    clearTimeout(timerId);
    timerId = setTimeout(() => fn.apply(context, args), delay);
  };
}

// Example: Debounce input handler
const input = document.querySelector('#search');
const onInput = debounce((e) => {
  console.log('Searching for:', e.target.value);
  // fetch(`/api/search?q=${encodeURIComponent(e.target.value)}`)
}, 300);

input.addEventListener('input', onInput);