Unit 5: JavaScript Functions, Events & Form Validation

Why This Chapter Matters in 2025

In Unit 4 you learned the language of JavaScript. Now you learn the action. Functions, events, and form validation are what turn a static page into a living, breathing application. Without events, nothing happens when a user clicks a button. Without validation, garbage data enters your database. Without well-structured functions, your codebase collapses under its own weight.

Every tap on Swiggy, every swipe on CRED, every payment on Razorpay — all powered by event listeners wired to functions that validate data before sending it to the server. This unit teaches you how all three work together.

Prerequisite Checklist ✅

• ✅ Completed Unit 4 (JavaScript Core & ES6+ — you need const/let, arrow functions, template literals, destructuring)
• ✅ VS Code with Live Server extension
• ✅ Chrome DevTools — Console tab for debugging, Elements tab for inspecting event listeners
• ✅ A working HTML form from Unit 2/3 (we'll add JavaScript validation to it)

Learning Outcomes — Bloom's Taxonomy

Concept Explanations — Theory, Earned

3.1 Functions Deep Dive — Declarations, Expressions & Arrows

Unit 4 introduced arrow functions briefly. Now let's go deep — understanding the differences between the three function styles is a top interview question at every Indian tech company.

Three Ways to Define Functions

JavaScript
// ═══ FUNCTION DECLARATION — hoisted to top ═══
// You can call it BEFORE the declaration line
calculateGST(1000);  // ✅ Works — hoisted!

function calculateGST(price, rate = 0.18) {
  const gst = price * rate;
  const total = price + gst;
  return { price, gst, total };
}

// ═══ FUNCTION EXPRESSION — NOT hoisted ═══
// calculateDiscount(1000); // ❌ ReferenceError!

const calculateDiscount = function(price, percent = 10) {
  return price * (percent / 100);
};

// ═══ ARROW FUNCTION — INDUSTRY STANDARD ═══
// Concise, lexical `this`, perfect for callbacks
const add = (a, b) => a + b;                       // Implicit return
const greet = name => `Hello, ${name}!`;           // Single param: no parens
const getUser = () => ({ name: 'Rahul', age: 25 }); // Return object: wrap in ()

// Multi-line arrow function
const processOrder = (items, coupon) => {
  let total = items.reduce((sum, item) => sum + item.price, 0);
  if (coupon) total *= 0.9;
  return { subtotal: total, gst: total * 0.18 };
};

Default Parameters

JavaScript
// Default parameters — ES6+ (replaces the old `param || default` hack)
const createOrder = (
  item,
  qty = 1,
  currency = 'INR',
  gstRate = 0.18
) => {
  const subtotal = item.price * qty;
  const gst = subtotal * gstRate;
  return { item: item.name, qty, subtotal, gst, currency };
};

// All defaults used
createOrder({ name: 'Paneer Tikka', price: 250 });
// { item: 'Paneer Tikka', qty: 1, subtotal: 250, gst: 45, currency: 'INR' }

// Override specific defaults
createOrder({ name: 'Biryani', price: 350 }, 2, 'INR', 0.05);
// qty=2, gstRate=5%

3.2 Closures & Callbacks

Closures — Functions That Remember

A closure is a function that retains access to variables from its outer (enclosing) function's scope, even after the outer function has returned. This is one of the most powerful — and most asked — concepts in JavaScript.

JavaScript
// ═══ CLOSURE — The counter pattern ═══
function createCounter(initialValue = 0) {
  let count = initialValue;  // This variable is "closed over"

  return {
    increment() { return ++count; },
    decrement() { return --count; },
    getCount()  { return count; }
  };
}

const cart = createCounter();
cart.increment();  // 1
cart.increment();  // 2
cart.decrement();  // 1
cart.getCount();   // 1
// `count` is private — you can't access it directly!
console.log(cart.count);  // undefined ✅ (encapsulation)

JavaScript
// 🏢 REAL-WORLD CLOSURE: Debounce (used at Swiggy for search)
function debounce(fn, delay = 300) {
  let timer;  // Closed over — persists between calls

  return (...args) => {
    clearTimeout(timer);          // Cancel previous timer
    timer = setTimeout(() => {
      fn(...args);                 // Call after delay
    }, delay);
  };
}

// Usage at Swiggy — search only fires 300ms after user STOPS typing
const handleSearch = debounce((query) => {
  fetch(`/api/search?q=${query}`);
}, 300);

searchInput.addEventListener('input', (e) => {
  handleSearch(e.target.value);
});

Callbacks — Functions as Arguments

JavaScript
// A CALLBACK is a function passed to another function as an argument
// The receiving function "calls it back" when it's ready

// ═══ Synchronous callback ═══
const numbers = [10, 25, 5, 40, 15];

// sort() accepts a callback — the comparison function
numbers.sort((a, b) => a - b);
console.log(numbers);  // [5, 10, 15, 25, 40]

// ═══ Asynchronous callback ═══
setTimeout(() => {
  console.log('This runs after 2 seconds');
}, 2000);

// ═══ Custom function with callback ═══
const fetchData = (url, onSuccess, onError) => {
  fetch(url)
    .then(res => res.json())
    .then(data => onSuccess(data))
    .catch(err => onError(err));
};

fetchData(
  'https://api.example.com/users',
  (data) => console.log('Got users:', data),   // success callback
  (err)  => console.error('Failed:', err)       // error callback
);

3.3 Higher-Order Functions — map(), filter(), reduce()

A higher-order function (HOF) is a function that either (1) takes a function as an argument, or (2) returns a function. The "Big Three" array HOFs — map, filter, reduce — are the most used functions in modern JavaScript.

JavaScript
// 🏢 Sample data — Swiggy restaurant menu
const menu = [
  { name: 'Chicken Biryani',  price: 320, isVeg: false, rating: 4.5 },
  { name: 'Paneer Tikka',     price: 250, isVeg: true,  rating: 4.2 },
  { name: 'Masala Dosa',      price: 120, isVeg: true,  rating: 4.8 },
  { name: 'Butter Chicken',   price: 380, isVeg: false, rating: 4.6 },
  { name: 'Veg Thali',        price: 180, isVeg: true,  rating: 4.0 },
];

// ═══ map() — Transform each item (returns new array) ═══
const menuCards = menu.map(item => ({
  display: `${item.name} — ₹${item.price}`,
  badge: item.isVeg ? '🟢 VEG' : '🔴 NON-VEG'
}));
// [{ display: 'Chicken Biryani — ₹320', badge: '🔴 NON-VEG' }, ...]

// ═══ filter() — Keep items that pass a test ═══
const vegItems = menu.filter(item => item.isVeg);
// Only Paneer Tikka, Masala Dosa, Veg Thali

const premiumItems = menu.filter(item => item.price > 200 && item.rating >= 4.5);
// Chicken Biryani, Butter Chicken

// ═══ reduce() — Reduce array to a single value ═══
const totalPrice = menu.reduce((sum, item) => sum + item.price, 0);
// 320 + 250 + 120 + 380 + 180 = 1250

const avgRating = menu.reduce((sum, item) => sum + item.rating, 0) / menu.length;
// (4.5 + 4.2 + 4.8 + 4.6 + 4.0) / 5 = 4.42

// ═══ CHAINING — The real power ═══
// "Get formatted names of veg items sorted by rating"
const result = menu
  .filter(item => item.isVeg)
  .sort((a, b) => b.rating - a.rating)
  .map(item => `${item.name} (${item.rating}⭐)`);
// ['Masala Dosa (4.8⭐)', 'Paneer Tikka (4.2⭐)', 'Veg Thali (4.0⭐)']

const vegNames = [];
for (let i = 0; i < menu.length; i++) {
  if (menu[i].isVeg) {
    vegNames.push(menu[i].name);
  }
}

const vegNames = menu
  .filter(item => item.isVeg)
  .map(item => item.name);

// Cleaner, no mutation,
// easier to read

3.4 Event Handling — addEventListener()

Events are signals fired by the browser when something happens: a user clicks, types, scrolls, submits a form, or the page finishes loading. addEventListener() is the modern, industry-standard way to listen for events.

JavaScript
// ═══ addEventListener() — The modern way ═══
// Syntax: element.addEventListener(eventType, callbackFn, options)

const btn = document.querySelector('#submit-btn');

// Basic click handler
btn.addEventListener('click', (event) => {
  console.log('Button clicked!');
  console.log('Event target:', event.target);       // The element clicked
  console.log('Event type:', event.type);           // 'click'
  console.log('Timestamp:', event.timeStamp);      // When it happened
});

// Multiple listeners on the same element — all fire!
btn.addEventListener('click', () => console.log('Handler 1'));
btn.addEventListener('click', () => console.log('Handler 2'));
// Both fire — unlike onclick which overwrites

// Removing an event listener (must use named function)
const handleClick = () => console.log('Clicked!');
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick); // ✅ Must be same reference

3.5 Event Types & Event Delegation

Common Event Types

JavaScript
// ═══ KEYBOARD EVENTS ═══
const searchInput = document.querySelector('#search');

searchInput.addEventListener('keydown', (e) => {
  console.log('Key pressed:', e.key);    // 'Enter', 'a', 'Shift'
  console.log('Key code:', e.code);      // 'Enter', 'KeyA', 'ShiftLeft'

  if (e.key === 'Enter') {
    console.log('Search submitted!');
  }

  // Keyboard shortcuts
  if (e.ctrlKey && e.key === 'k') {
    e.preventDefault();  // Prevent browser default
    openSearchModal();
  }
});

// ═══ MOUSE EVENTS ═══
const card = document.querySelector('.product-card');

card.addEventListener('mouseover', () => {
  card.style.transform = 'scale(1.02)';
  card.style.boxShadow = '0 8px 24px rgba(0,0,0,0.12)';
});

card.addEventListener('mouseout', () => {
  card.style.transform = 'scale(1)';
  card.style.boxShadow = 'none';
});

// ═══ FOCUS / BLUR ═══
const emailField = document.querySelector('#email');

emailField.addEventListener('focus', () => {
  emailField.parentElement.classList.add('active-field');
});

emailField.addEventListener('blur', () => {
  emailField.parentElement.classList.remove('active-field');
  validateEmail(emailField.value);  // Validate when user leaves field
});

Preventing Default Behavior

JavaScript
// ═══ preventDefault() — Stop the browser's default action ═══

// 1. Prevent form submission (most common use)
const form = document.querySelector('#registration-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();   // Don't reload the page!

  // Validate, then submit via fetch()
  if (validateForm()) {
    submitViaAjax();
  }
});

// 2. Prevent link navigation
document.querySelector('a.no-nav').addEventListener('click', (e) => {
  e.preventDefault();   // Don't follow the href
  showModal();          // Do something else instead
});

// 3. Prevent right-click context menu (e.g., on image gallery)
document.querySelector('.gallery').addEventListener('contextmenu', (e) => {
  e.preventDefault();
  showCustomMenu(e.clientX, e.clientY);
});

Event Delegation — The Industry Pattern

Instead of adding an event listener to every child element, add ONE listener to the parent and use event.target to determine which child was clicked. This is crucial for dynamic content.

JavaScript
// 🏢 EVENT DELEGATION — Used everywhere at Flipkart, Swiggy

// ❌ BAD: Adding listener to each button (100 products = 100 listeners)
document.querySelectorAll('.add-to-cart').forEach(btn => {
  btn.addEventListener('click', (e) => { /* ... */ });
});

// ✅ GOOD: ONE listener on the parent container
const productList = document.querySelector('#product-list');

productList.addEventListener('click', (e) => {
  // Find the closest .add-to-cart button (even if user clicked an icon inside it)
  const btn = e.target.closest('.add-to-cart');
  if (!btn) return;  // Click wasn't on a button — ignore

  const productId = btn.dataset.id;
  addToCart(productId);
  console.log(`Added product ${productId} to cart`);
});

// ✅ Works for dynamically added products too!
// New products added via JS automatically get the listener

JavaScript
// ═══ Event Bubbling vs Capturing ═══

// Events have 3 phases:
// 1. CAPTURING: document → parent → target (top-down)
// 2. TARGET: event reaches the clicked element
// 3. BUBBLING: target → parent → document (bottom-up) ← DEFAULT

// By default, addEventListener listens during BUBBLING phase
parent.addEventListener('click', handler);         // Bubbling (default)
parent.addEventListener('click', handler, true);   // Capturing

// stopPropagation() — Stop the event from bubbling further
child.addEventListener('click', (e) => {
  e.stopPropagation();  // Parent's click handler won't fire
  console.log('Only child handles this');
});

3.6 HTML5 Form Validation API

HTML5 provides a built-in Constraint Validation API that lets you validate form fields without writing regex from scratch for common patterns. This API works with HTML attributes like required, minlength, maxlength, pattern, type="email", etc.

HTML
<!-- HTML5 validation attributes -->
<form id="signup-form" novalidate>
  <input type="text"     id="name"     required minlength="2" maxlength="50">
  <input type="email"    id="email"    required>
  <input type="tel"      id="phone"    required pattern="[6-9]\d{9}">
  <input type="password" id="password" required minlength="8">
  <button type="submit">Sign Up</button>
</form>

JavaScript
// ═══ checkValidity() — Returns true/false ═══
const form = document.querySelector('#signup-form');
const emailInput = document.querySelector('#email');

// Check single field
console.log(emailInput.checkValidity());  // true or false

// Check entire form
console.log(form.checkValidity());  // true only if ALL fields valid

// ═══ validity property — Detailed validation state ═══
const v = emailInput.validity;
console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required field is empty
console.log(v.typeMismatch);  // true if type="email" but value isn't email
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.patternMismatch); // true if doesn't match pattern attribute

// ═══ setCustomValidity() — Custom error messages ═══
const passwordInput = document.querySelector('#password');

passwordInput.addEventListener('input', () => {
  const val = passwordInput.value;

  if (val.length < 8) {
    passwordInput.setCustomValidity('Password must be at least 8 characters');
  } else if (!/[A-Z]/.test(val)) {
    passwordInput.setCustomValidity('Must include at least one uppercase letter');
  } else if (!/[0-9]/.test(val)) {
    passwordInput.setCustomValidity('Must include at least one number');
  } else {
    passwordInput.setCustomValidity('');  // ← Empty string = VALID
  }
});

// ═══ Form submit with validation ═══
form.addEventListener('submit', (e) => {
  e.preventDefault();

  if (!form.checkValidity()) {
    form.reportValidity();  // Shows browser's built-in error tooltips
    return;
  }

  // All valid — submit via fetch()
  console.log('Form is valid! Submitting...');
});

3.7 Regex-Based Custom Validation

While HTML5 validation handles basics, real-world forms need custom regex patterns — Indian phone numbers, PAN cards, Aadhaar numbers, IFSC codes, GST numbers, UPI IDs.

JavaScript
// ═══ INDIAN VALIDATION PATTERNS ═══

// Indian mobile number: starts with 6-9, followed by 9 digits
const PHONE_REGEX = /^[6-9]\d{9}$/;

// Email: basic pattern
const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// PAN Card: 5 letters, 4 digits, 1 letter
const PAN_REGEX = /^[A-Z]{5}[0-9]{4}[A-Z]$/;

// Aadhaar: 12 digits (with optional spaces every 4)
const AADHAAR_REGEX = /^\d{4}\s?\d{4}\s?\d{4}$/;

// IFSC Code: 4 letters, 0, 6 alphanumeric
const IFSC_REGEX = /^[A-Z]{4}0[A-Z0-9]{6}$/;

// UPI ID: username@bankname
const UPI_REGEX = /^[\w.-]+@[\w]+$/;

// Password: min 8 chars, 1 uppercase, 1 lowercase, 1 digit, 1 special
const PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

// ═══ Validation function ═══
const validateField = (value, regex, fieldName) => {
  if (!value.trim()) {
    return { valid: false, message: `${fieldName} is required` };
  }
  if (!regex.test(value)) {
    return { valid: false, message: `Invalid ${fieldName} format` };
  }
  return { valid: true, message: '' };
};

// Usage
validateField('9876543210', PHONE_REGEX, 'Phone');
// { valid: true, message: '' }

validateField('12345', PHONE_REGEX, 'Phone');
// { valid: false, message: 'Invalid Phone format' }

validateField('rahul@okhdfcbank', UPI_REGEX, 'UPI ID');
// { valid: true, message: '' }

3.8 Real-Time Input Feedback

Modern forms don't wait for submission to show errors. They validate as the user types using the input event, and show validation status on blur (when the user leaves the field). This is the UX pattern used by every major company.

JavaScript
// 🏢 REAL-TIME VALIDATION — The Flipkart/Razorpay pattern

const setupFieldValidation = (inputId, regex, errorMsg) => {
  const input = document.getElementById(inputId);
  const errorSpan = document.getElementById(`${inputId}-error`);

  // Real-time feedback as user types
  input.addEventListener('input', () => {
    const value = input.value.trim();

    if (value === '') {
      // Reset — user is still typing
      input.className = '';
      errorSpan.textContent = '';
    } else if (regex.test(value)) {
      // Valid ✅
      input.className = 'valid';
      errorSpan.textContent = '✅';
      errorSpan.style.color = '#16a34a';
    } else {
      // Invalid ❌ (but don't show full error yet — user is still typing)
      input.className = 'invalid';
      errorSpan.textContent = '';
    }
  });

  // Show full error message when user LEAVES the field
  input.addEventListener('blur', () => {
    const value = input.value.trim();
    if (value !== '' && !regex.test(value)) {
      errorSpan.textContent = errorMsg;
      errorSpan.style.color = '#dc2626';
      input.setAttribute('aria-invalid', 'true');
    } else {
      input.removeAttribute('aria-invalid');
    }
  });
};

// Setup validation for each field
setupFieldValidation('phone', /^[6-9]\d{9}$/, 'Enter a valid 10-digit Indian mobile number');
setupFieldValidation('email', /^[^\s@]+@[^\s@]+\.[^\s@]+$/, 'Enter a valid email address');
setupFieldValidation('pan',   /^[A-Z]{5}[0-9]{4}[A-Z]$/, 'PAN format: ABCDE1234F');

CSS
/* Visual feedback styles */
input.valid   { border: 2px solid #16a34a; background: #f0fdf4; }
input.invalid { border: 2px solid #dc2626; background: #fef2f2; }
.error-msg    { font-size: 0.82rem; min-height: 1.2em; margin-top: 4px; }

3.9 Accessibility in Forms — ARIA Labels

Accessible forms are not optional — they're legally required in many countries and are a core criterion in Google's Lighthouse audit. At companies like Flipkart and Razorpay, accessibility is part of the code review checklist.

HTML
<!-- ═══ ACCESSIBLE FORM — Best practices ═══ -->
<form id="payment-form" novalidate aria-label="Payment Details Form">

  <!-- 1. Always use <label> with for/id connection -->
  <div class="field-group">
    <label for="card-number">Card Number</label>
    <input
      type="text"
      id="card-number"
      inputmode="numeric"
      autocomplete="cc-number"
      aria-required="true"
      aria-describedby="card-number-hint card-number-error"
      placeholder="1234 5678 9012 3456"
    />
    <span id="card-number-hint" class="hint">Enter 16-digit card number</span>
    <span id="card-number-error" class="error" role="alert" aria-live="polite"></span>
  </div>

  <!-- 2. For inputs without visible labels, use aria-label -->
  <input type="search" aria-label="Search products" placeholder="Search..."/>

  <!-- 3. Submit button with clear text -->
  <button type="submit" aria-label="Pay ₹1,250">Pay ₹1,250</button>
</form>

JavaScript
// ═══ ARIA-aware validation ═══
const showError = (input, errorId, message) => {
  const errorEl = document.getElementById(errorId);
  errorEl.textContent = message;
  input.setAttribute('aria-invalid', 'true');
  input.classList.add('invalid');
};

const clearError = (input, errorId) => {
  const errorEl = document.getElementById(errorId);
  errorEl.textContent = '';
  input.setAttribute('aria-invalid', 'false');
  input.classList.remove('invalid');
};

// When the error message changes, aria-live="polite" announces it
// to screen reader users automatically — no extra JS needed!

Industry Problems — Case Studies

JavaScript
// Swiggy's search implementation (simplified)
const debounce = (fn, delay) => {
  let timer;  // Closure — persists between calls
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

const searchRestaurants = async (query) => {
  if (query.length < 2) return;

  const loader = document.querySelector('.search-loader');
  loader.style.display = 'block';

  try {
    const res = await fetch(`/api/restaurants/search?q=${encodeURIComponent(query)}`);
    const data = await res.json();
    renderResults(data.restaurants);
  } catch (err) {
    showError('Search failed. Please try again.');
  } finally {
    loader.style.display = 'none';
  }
};

// Debounced version — waits 300ms
const debouncedSearch = debounce(searchRestaurants, 300);

// Event listener on the search input
document.querySelector('#search-input')
  .addEventListener('input', (e) => debouncedSearch(e.target.value));

JavaScript
// Flipkart-style form validation
const validators = {
  name: {
    regex: /^[a-zA-Z\s]{2,50}$/,
    message: 'Name must be 2-50 characters, letters only'
  },
  email: {
    regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    message: 'Please enter a valid email address'
  },
  phone: {
    regex: /^[6-9]\d{9}$/,
    message: 'Enter 10-digit Indian mobile number (starting 6-9)'
  },
  password: {
    regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/,
    message: 'Min 8 chars: 1 uppercase, 1 lowercase, 1 digit, 1 special char'
  }
};

// Setup all fields with real-time + blur validation
Object.entries(validators).forEach(([field, { regex, message }]) => {
  const input = document.getElementById(field);
  const errorEl = document.getElementById(`${field}-error`);

  input.addEventListener('input', () => {
    if (regex.test(input.value)) {
      input.classList.replace('invalid', 'valid') || input.classList.add('valid');
      errorEl.textContent = '';
      input.setAttribute('aria-invalid', 'false');
    }
  });

  input.addEventListener('blur', () => {
    if (input.value && !regex.test(input.value)) {
      input.className = 'invalid';
      errorEl.textContent = message;
      input.setAttribute('aria-invalid', 'true');
    }
  });
});

JavaScript
// Razorpay-style payment form
const paymentForm = document.querySelector('#payment-form');

// Event delegation — handles all dynamic inputs
paymentForm.addEventListener('input', (e) => {
  const { id, value } = e.target;

  switch (id) {
    case 'upi-id':
      validateUPI(e.target, value);
      break;
    case 'card-number':
      e.target.value = formatCardNumber(value);
      validateCardNumber(e.target, value.replace(/\s/g, ''));
      break;
    case 'card-expiry':
      e.target.value = formatExpiry(value);
      break;
  }
});

// UPI validation
const validateUPI = (input, value) => {
  const isValid = /^[\w.-]+@[\w]+$/.test(value);
  input.className = value ? (isValid ? 'valid' : 'invalid') : '';
};

// Card number formatting: "4111111111111111" → "4111 1111 1111 1111"
const formatCardNumber = (value) => {
  return value
    .replace(/\D/g, '')          // Remove non-digits
    .slice(0, 16)               // Max 16 digits
    .replace(/(\d{4})/g, '$1 ') // Add space every 4
    .trim();
};

// Submit with full validation
paymentForm.addEventListener('submit', (e) => {
  e.preventDefault();
  if (!paymentForm.checkValidity()) {
    paymentForm.reportValidity();
    return;
  }
  processPayment();
});

Lab Exercises — Hands-On Practice

MCQ Assessment Bank — 15 Questions

Hover over any question to reveal the answer. Each question is tagged with Bloom's Taxonomy level.

Chapter Summary

// === FUNCTIONS ===
function greet(name) { return `Hi ${name}`; }   // Declaration (hoisted)
const greet = function(name) { return name; };   // Expression
const greet = (name) => `Hi ${name}`;            // Arrow (implicit return)
const fn = (x, y = 10) => x + y;                  // Default params

// === HIGHER-ORDER FUNCTIONS ===
arr.map(x => x * 2);                // Transform each element
arr.filter(x => x > 5);              // Keep matching elements
arr.reduce((acc, x) => acc + x, 0); // Reduce to single value

// === CLOSURES ===
function outer() {
  let count = 0;
  return () => ++count;  // Inner fn "closes over" count
}

// === EVENTS ===
el.addEventListener('click', handler);     // Add
el.removeEventListener('click', handler);  // Remove (needs ref)
e.preventDefault();                        // Stop default action
e.stopPropagation();                       // Stop bubbling
e.target.closest('.class');                // Event delegation helper

// === VALIDATION ===
input.checkValidity();                     // Returns boolean
input.setCustomValidity('Error msg');      // Set custom error
input.setCustomValidity('');               // Clear error = valid
form.reportValidity();                     // Show browser tooltips

// === REGEX (Indian) ===
/^[6-9]\d{9}$/                             // Phone
/^[A-Z]{5}[0-9]{4}[A-Z]$/                 // PAN
/^[\w.-]+@[\w]+$/                          // UPI ID
/^\d{4}\s?\d{4}\s?\d{4}$/                  // Aadhaar

Interview Preparation — Functions, Events & Validation Questions

These are real questions asked at TCS, Infosys, Wipro, Accenture, Flipkart, Swiggy, CRED, and startup interviews for frontend developer roles.

// Practical example: Debounce (used at Swiggy for search)
function debounce(fn, delay) {
  let timer;  // This is the "closed over" variable
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
// The returned function "remembers" `timer` between calls
// Even though debounce() has already returned

// If you click on a <span> inside a <button>:
// <button id="btn"><span>Click me</span></button>

btn.addEventListener('click', (e) => {
  console.log(e.target);        // <span> (what was actually clicked)
  console.log(e.currentTarget); // <button> (where listener is attached)
});

const orders = [
  { item: 'Pizza', price: 299, delivered: true },
  { item: 'Burger', price: 149, delivered: false },
  { item: 'Biryani', price: 349, delivered: true },
];

// filter: Keep only delivered orders
const delivered = orders.filter(o => o.delivered);

// map: Get formatted strings
const names = delivered.map(o => `${o.item} — ₹${o.price}`);

// reduce: Calculate total revenue of delivered orders
const revenue = delivered.reduce((sum, o) => sum + o.price, 0);
// 299 + 349 = 648

// Instead of 1000 listeners on 1000 list items:
const list = document.querySelector('ul#products');
list.addEventListener('click', (e) => {
  const item = e.target.closest('li');
  if (!item) return;
  console.log('Selected:', item.dataset.id);
});

// Real-time validation with accessibility
const input = document.getElementById('email');
const error = document.getElementById('email-error');

input.addEventListener('input', () => {
  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value)) {
    input.setAttribute('aria-invalid', 'false');
    input.classList.replace('invalid', 'valid');
    error.textContent = '';
  }
});

input.addEventListener('blur', () => {
  if (input.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value)) {
    input.setAttribute('aria-invalid', 'true');
    error.textContent = 'Please enter a valid email';
    // aria-live="polite" on error element announces this to screen readers
  }
});