ES6+ Features and Modern JavaScript

Q: Explain the spread and rest operators. When would you use each?

The spread (...) and rest (...) operators use the same syntax but serve different purposes depending on context.

Modern JavaScript: arrow functions, destructuring, spread/rest, modules, async/await, and key browser APIs.

Questions

12 total

12 questions in this section

Difficulty

Open as page

Arrow functions are a concise syntax for writing function expressions in ES6. Here are the key differences:

Syntax Differences:

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

// Arrow function
const add = (a, b) => a + b;

// Multiple parameters
const multiply = (a, b) => {
  return a * b;
};

// Single parameter (parentheses optional)
const square = x => x * x;

// No parameters
const getTime = () => new Date();

Key Differences:

this Binding:

const obj = {
  name: 'John',
  regularFunction: function() {
    console.log(this.name); // 'John' - this refers to obj
  },
  arrowFunction: () => {
    console.log(this.name); // undefined - this refers to global/window
  }
};

obj.regularFunction(); // 'John'
obj.arrowFunction(); // undefined

Arguments Object:

function regularFunction() {
  console.log(arguments); // Has arguments object
}

const arrowFunction = () => {
  console.log(arguments); // ReferenceError: arguments is not defined
};

Constructor Usage:

function RegularConstructor() {
  this.name = 'test';
}

const ArrowConstructor = () => {
  this.name = 'test';
};

new RegularConstructor(); // Works
new ArrowConstructor(); // TypeError: ArrowConstructor is not a constructor

Hoisting:

// Regular functions are hoisted
console.log(regularFunc()); // Works - 'Hello'

function regularFunc() {
  return 'Hello';
}

// Arrow functions are not hoisted
console.log(arrowFunc()); // ReferenceError: Cannot access 'arrowFunc' before initialization

const arrowFunc = () => 'Hello';

When to Use Each:

Use Arrow Functions When:

Writing short, simple functions
Working with array methods (map, filter, reduce)
Need lexical this binding
Writing functional programming style code

// Great for array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

Use Regular Functions When:

Need this to be dynamically bound
Need access to arguments object
Creating constructors
Need function hoisting
Writing methods in objects/classes

// Object methods should use regular functions
const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
    return this;
  },
  multiply: function(num) {
    this.value *= num;
    return this;
  }
};

Open as page

Destructuring assignment allows you to extract values from arrays or properties from objects into distinct variables.

Array Destructuring:

// Basic array destructuring
const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;
console.log(first); // 'red'
console.log(second); // 'green'
console.log(third); // 'blue'

// Skip elements
const [primary, , tertiary] = colors;
console.log(primary); // 'red'
console.log(tertiary); // 'blue'

// Default values
const [a, b, c, d = 'yellow'] = colors;
console.log(d); // 'yellow'

// Rest operator
const [head, ...tail] = colors;
console.log(head); // 'red'
console.log(tail); // ['green', 'blue']

// Swap variables
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2, 1

Object Destructuring:

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
  address: {
    city: 'New York',
    country: 'USA'
  }
};

// Basic object destructuring
const { name, email, id } = user;
console.log(name); // 'John Doe'

// Rename variables
const { name: userName, email: userEmail } = user;
console.log(userName); // 'John Doe'

// Default values
const { name, age = 25 } = user;
console.log(age); // 25

// Nested destructuring
const { address: { city, country } } = user;
console.log(city); // 'New York'

// Rest operator
const { id, ...userInfo } = user;
console.log(userInfo); // { name: 'John Doe', email: 'john@example.com', address: {...} }

Practical Use Cases:

Function Parameters:

// Instead of passing many parameters
function createUser(name, email, age, city, country) {
  // ...
}

// Use object destructuring
function createUser({ name, email, age = 18, address: { city, country } }) {
  return { name, email, age, city, country };
}

createUser({
  name: 'John',
  email: 'john@example.com',
  address: { city: 'NYC', country: 'USA' }
});

API Response Handling:

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const { data: user, status, message } = await response.json();
  
  if (status === 'success') {
    const { name, email, profile: { avatar, bio } } = user;
    return { name, email, avatar, bio };
  }
  throw new Error(message);
}

React Props:

function UserCard({ user: { name, email, avatar }, onEdit, onDelete }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <p>{email}</p>
      <button onClick={onEdit}>Edit</button>
      <button onClick={onDelete}>Delete</button>
    </div>
  );
}

Array Methods:

const users = [
  { id: 1, name: 'John', role: 'admin' },
  { id: 2, name: 'Jane', role: 'user' }
];

// Destructure in map
const userNames = users.map(({ name }) => name);

// Destructure in filter
const admins = users.filter(({ role }) => role === 'admin');

Open as page

The spread (...) and rest (...) operators use the same syntax but serve different purposes depending on context.

Spread Operator (...): Expands an iterable (array, string, object) into individual elements.

Array Spread:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Combine arrays
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Add elements
const withExtra = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Clone array
const cloned = [...arr1]; // [1, 2, 3] - shallow copy

// Convert string to array
const chars = [...'hello']; // ['h', 'e', 'l', 'l', 'o']

// Function arguments
function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

Object Spread:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// Combine objects
const combined = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// Override properties
const updated = { ...obj1, b: 10 }; // { a: 1, b: 10 }

// Clone object
const cloned = { ...obj1 }; // { a: 1, b: 2 } - shallow copy

// Add properties
const withExtra = { ...obj1, e: 5 }; // { a: 1, b: 2, e: 5 }

Rest Operator (...): Collects multiple elements into a single variable.

Function Parameters:

// Collect remaining arguments
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

// Mix with regular parameters
function greet(greeting, ...names) {
  return `${greeting} ${names.join(', ')}!`;
}

console.log(greet('Hello', 'John', 'Jane', 'Bob')); // "Hello John, Jane, Bob!"

Array Destructuring:

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

// Skip elements
const [a, , ...remaining] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(remaining); // [3, 4, 5]

Object Destructuring:

const { name, ...otherProps } = { name: 'John', age: 30, city: 'NYC' };
console.log(name); // 'John'
console.log(otherProps); // { age: 30, city: 'NYC' }

Practical Use Cases:

Array Manipulation:

// Remove duplicates
const unique = [...new Set([1, 2, 2, 3, 3, 4])]; // [1, 2, 3, 4]

// Insert at specific position
function insertAt(array, index, ...items) {
  return [...array.slice(0, index), ...items, ...array.slice(index)];
}

const result = insertAt([1, 2, 5], 2, 3, 4); // [1, 2, 3, 4, 5]

Object Updates:

// Immutable updates
const updateUser = (user, updates) => ({ ...user, ...updates });

const user = { name: 'John', age: 30 };
const updated = updateUser(user, { age: 31, city: 'NYC' });
// { name: 'John', age: 31, city: 'NYC' }

React State Updates:

// Add item to array
const addItem = (items, newItem) => [...items, newItem];

// Remove item from array
const removeItem = (items, id) => items.filter(item => item.id !== id);

// Update object in array
const updateItem = (items, id, updates) => 
  items.map(item => item.id === id ? { ...item, ...updates } : item);

API Calls:

// Merge query parameters
const buildUrl = (baseUrl, ...params) => {
  const queryString = params.join('&');
  return `${baseUrl}?${queryString}`;
};

const url = buildUrl('/api/users', 'page=1', 'limit=10', 'sort=name');

Open as page

Template literals are string literals that allow embedded expressions and multi-line strings.

Basic Template Literals:

const name = 'John';
const age = 30;

// String interpolation
const message = `Hello, my name is ${name} and I am ${age} years old.`;

// Multi-line strings
const html = `
  <div class="user-card">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
  </div>
`;

// Expressions
const price = 19.99;
const total = `Total: $${(price * 1.08).toFixed(2)}`;

Tagged Template Literals:

function myTag(strings, ...values) {
  return strings.reduce((result, string, i) => {
    return result + string + (values[i] || '');
  }, '');
}

const name = 'John';
const result = myTag`Hello ${name}, you are ${30} years old.`;

// Practical example: SQL query builder
function sql(strings, ...values) {
  return strings.reduce((query, string, i) => {
    const value = values[i];
    const escaped = typeof value === 'string' ? `'${value.replace(/'/g, "''")}'` : value;
    return query + string + (escaped || '');
  }, '');
}

const userId = 123;
const query = sql`SELECT * FROM users WHERE id = ${userId}`;

Open as page

ES6 modules provide a standardized way to organize and share code between files.

Export Syntax:

// Named exports
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { multiply(a, b) { return a * b; } }

// Default export
export default function subtract(a, b) { return a - b; }

// Mixed exports
export const VERSION = '1.0.0';
export default class MathUtils { static divide(a, b) { return a / b; } }

Import Syntax:

// Named imports
import { PI, add, Calculator } from './math.js';

// Default import
import subtract from './math.js';

// Mixed imports
import MathUtils, { VERSION } from './math.js';

// Namespace import
import * as math from './math.js';

// Dynamic import
const { add, subtract } = await import('./math.js');

CommonJS vs ES6 Modules:

// CommonJS
const fs = require('fs');
module.exports = { readFile: fs.readFile };

// ES6 Modules
import fs from 'fs';
export { readFile: fs.readFile };

Module Bundling:

// Code splitting
const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

// Tree shaking (only used exports are bundled)
import { debounce } from 'lodash-es'; // Only debounce is bundled
import _ from 'lodash'; // Entire library bundled

Open as page

Async/await is syntactic sugar built on top of Promises, making asynchronous code look and behave more like synchronous code.

Basic Syntax:

// Promise-based
function fetchUser(id) {
  return fetch(`/api/users/${id}`)
    .then(response => response.json())
    .then(user => {
      console.log(user);
      return user;
    })
    .catch(error => {
      console.error('Error:', error);
      throw error;
    });
}

// Async/await equivalent
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    const user = await response.json();
    console.log(user);
    return user;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

Key Benefits:

Readability: Easier to read than promise chains
Error Handling: Better error handling with try/catch
Debugging: Easier to debug with stack traces

Common Pitfalls:

// ❌ Sequential (slow)
async function fetchSequential() {
  const user = await fetchUser(1);     // Wait 100ms
  const posts = await fetchPosts(1);   // Wait 200ms
  const comments = await fetchComments(1); // Wait 150ms
  // Total: 450ms
}

// ✅ Parallel (fast)
async function fetchParallel() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(1),      // All start simultaneously
    fetchPosts(1),     // All start simultaneously
    fetchComments(1)   // All start simultaneously
  ]);
  // Total: 200ms (longest operation)
}

// ❌ Missing await
async function badExample() {
  const user = fetchUser(1); // Returns Promise, not user data
  console.log(user.name); // Error: Cannot read property 'name' of undefined
}

// ✅ Correct
async function goodExample() {
  const user = await fetchUser(1); // Waits for Promise to resolve
  console.log(user.name); // Works correctly
}

Error Handling:

async function fetchWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

Open as page

The Fetch API is a modern, promise-based interface for making HTTP requests that replaces the older XMLHttpRequest.

Basic Fetch Usage:

// Simple GET request
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const user = await response.json();
    return user;
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error;
  }
}

// POST request with JSON
async function createUser(userData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    },
    body: JSON.stringify(userData)
  });
  return await response.json();
}

Fetch vs XMLHttpRequest:

// XMLHttpRequest (old way)
function fetchUserXHR(id) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `/api/users/${id}`);
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`));
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

// Fetch API (modern way)
async function fetchUserFetch(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
  return await response.json();
}

Advanced Features:

// AbortController for cancellation
async function fetchWithAbort(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  
  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    return await response.json();
  } catch (error) {
    clearTimeout(timeoutId);
    if (error.name === 'AbortError') {
      throw new Error('Request was aborted');
    }
    throw error;
  }
}

Open as page

These are different browser storage mechanisms with varying capabilities and use cases.

localStorage:

// Persistent storage that survives browser restarts
localStorage.setItem('username', 'john_doe');
localStorage.setItem('userPreferences', JSON.stringify({ theme: 'dark', lang: 'en' }));

const username = localStorage.getItem('username');
const preferences = JSON.parse(localStorage.getItem('userPreferences') || '{}');

localStorage.removeItem('username');
localStorage.clear(); // Remove all items

// Storage event (fires on other tabs)
window.addEventListener('storage', (e) => {
  if (e.key === 'username') {
    console.log('Username changed in another tab:', e.newValue);
  }
});

sessionStorage:

// Temporary storage that lasts only for the browser session
sessionStorage.setItem('currentPage', 'dashboard');
sessionStorage.setItem('formData', JSON.stringify({ name: 'John', email: 'john@example.com' }));

const currentPage = sessionStorage.getItem('currentPage');
// Automatically cleared when tab closes

IndexedDB:

// Low-level API for client-side storage of significant amounts of structured data
function openDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyDatabase', 1);
    request.onerror = () => reject(request.error);
    request.onsuccess = () => resolve(request.result);
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains('users')) {
        const store = db.createObjectStore('users', { keyPath: 'id' });
        store.createIndex('email', 'email', { unique: true });
      }
    };
  });
}

async function addUser(user) {
  const db = await openDB();
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  return new Promise((resolve, reject) => {
    const request = store.add(user);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

Comparison:

Feature	localStorage	sessionStorage	IndexedDB
Storage Limit	~5-10MB	~5-10MB	~50MB+
Persistence	Survives restart	Tab session only	Survives restart
Data Type	Strings only	Strings only	Any structured data
Synchronous	Yes	Yes	No (async)

Open as page

DOM manipulation involves interacting with HTML elements, and event handling manages user interactions.

Basic DOM Manipulation:

// Selecting elements
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');
const firstElement = document.querySelector('.myClass');

// Creating elements
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello World';
newDiv.className = 'my-class';
newDiv.setAttribute('data-id', '123');

// Appending elements
document.body.appendChild(newDiv);
element.insertBefore(newDiv, element.firstChild);

// Modifying content
element.innerHTML = '<p>New content</p>';
element.textContent = 'Plain text content';
element.style.color = 'red';
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('visible');

Event Handling:

// Basic event listener
element.addEventListener('click', function(event) {
  console.log('Element clicked:', event.target);
});

// Event delegation
document.addEventListener('click', function(event) {
  if (event.target.matches('.button')) {
    console.log('Button clicked:', event.target);
  }
});

// Event bubbling and capturing
// Bubbling (default): event goes from target to root
// Capturing: event goes from root to target

element.addEventListener('click', handler, true); // Capturing phase
element.addEventListener('click', handler, false); // Bubbling phase (default)

Event Delegation:

// Instead of adding listeners to each button
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
  button.addEventListener('click', handleClick);
});

// Use event delegation (more efficient)
document.addEventListener('click', function(event) {
  if (event.target.classList.contains('button')) {
    handleClick(event);
  }
});

// Dynamic content example
document.addEventListener('click', function(event) {
  if (event.target.matches('.delete-btn')) {
    const item = event.target.closest('.item');
    item.remove();
  }
});

Event Bubbling and Capturing:

// HTML: <div id="parent"><button id="child">Click me</button></div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// Capturing phase (parent -> child)
parent.addEventListener('click', () => console.log('Parent capturing'), true);
child.addEventListener('click', () => console.log('Child capturing'), true);

// Bubbling phase (child -> parent)
child.addEventListener('click', () => console.log('Child bubbling'), false);
parent.addEventListener('click', () => console.log('Parent bubbling'), false);

// Clicking child outputs:
// Parent capturing
// Child capturing
// Child bubbling
// Parent bubbling

// Stop propagation
child.addEventListener('click', (event) => {
  event.stopPropagation(); // Prevents bubbling
  console.log('Child clicked, propagation stopped');
});

Open as page

Regular expressions are patterns used to match character combinations in strings.

Basic Syntax:

// Literal notation
const regex = /pattern/flags;

// Constructor notation
const regex = new RegExp('pattern', 'flags');

// Common flags
const regex = /hello/gi; // g = global, i = case-insensitive

Common Patterns:

// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRegex.test('user@example.com')); // true

// Phone number (US format)
const phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;
console.log(phoneRegex.test('(555) 123-4567')); // true

// URL validation
const urlRegex = /^https?:\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
console.log(urlRegex.test('https://www.example.com')); // true

// Password (8+ chars, 1 uppercase, 1 lowercase, 1 number)
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8,}$/;
console.log(passwordRegex.test('Password123')); // true

String Methods:

const text = 'Hello World! Hello JavaScript!';

// test() - returns boolean
const regex = /hello/i;
console.log(regex.test(text)); // true

// exec() - returns match details or null
const match = regex.exec(text);
console.log(match); // ['Hello', index: 0, input: 'Hello World! Hello JavaScript!']

// match() - returns array of matches
const matches = text.match(/hello/gi);
console.log(matches); // ['Hello', 'Hello']

// replace() - replaces matches
const newText = text.replace(/hello/gi, 'Hi');
console.log(newText); // 'Hi World! Hi JavaScript!'

// search() - returns index of first match
const index = text.search(/world/i);
console.log(index); // 6

// split() - splits string by pattern
const words = text.split(/\s+/);
console.log(words); // ['Hello', 'World!', 'Hello', 'JavaScript!']

Common Use Cases:

// Extract data from strings
const text = 'Contact: John Doe (555) 123-4567, jane@example.com';
const phoneRegex = /\(\d{3}\) \d{3}-\d{4}/g;
const emailRegex = /[^\s@]+@[^\s@]+\.[^\s@]+/g;

const phones = text.match(phoneRegex); // ['(555) 123-4567']
const emails = text.match(emailRegex); // ['jane@example.com']

// Format strings
function formatPhoneNumber(phone) {
  const cleaned = phone.replace(/\D/g, ''); // Remove non-digits
  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    return `(${match[1]}) ${match[2]}-${match[3]}`;
  }
  return phone;
}

console.log(formatPhoneNumber('5551234567')); // '(555) 123-4567'

// Validate and sanitize input
function sanitizeInput(input) {
  return input
    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '') // Remove script tags
    .replace(/[<>]/g, ''); // Remove angle brackets
}

// Extract URLs from text
function extractUrls(text) {
  const urlRegex = /https?:\/\/[^\s]+/g;
  return text.match(urlRegex) || [];
}

Open as page

Error handling in JavaScript involves catching and managing errors to prevent application crashes.

Basic Error Handling:

// try-catch blocks
try {
  const result = riskyOperation();
  console.log('Success:', result);
} catch (error) {
  console.error('Error occurred:', error.message);
} finally {
  console.log('This always runs');
}

// Throwing custom errors
function validateAge(age) {
  if (age < 0) {
    throw new Error('Age cannot be negative');
  }
  if (age > 150) {
    throw new Error('Age cannot exceed 150');
  }
  return true;
}

Error Types:

// Built-in error types
throw new Error('Generic error');
throw new TypeError('Type error');
throw new ReferenceError('Reference error');
throw new SyntaxError('Syntax error');
throw new RangeError('Range error');

// Custom error classes
class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

class APIError extends Error {
  constructor(message, status, url) {
    super(message);
    this.name = 'APIError';
    this.status = status;
    this.url = url;
  }
}

Error Handling Strategies:

// 1. Defensive programming
function safeDivide(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new TypeError('Arguments must be numbers');
  }
  if (b === 0) {
    throw new Error('Division by zero');
  }
  return a / b;
}

// 2. Error boundaries (React pattern)
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error, errorInfo);
  }
  
  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

// 3. Result pattern
class Result {
  constructor(success, data, error) {
    this.success = success;
    this.data = data;
    this.error = error;
  }
  
  static success(data) {
    return new Result(true, data, null);
  }
  
  static failure(error) {
    return new Result(false, null, error);
  }
}

async function safeFetchUser(id) {
  try {
    const user = await fetchUser(id);
    return Result.success(user);
  } catch (error) {
    return Result.failure(error);
  }
}

// 4. Global error handling
window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  // Send to error reporting service
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
  // Send to error reporting service
});

Async Error Handling:

// Promise error handling
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

// Async/await error handling
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error; // Re-throw if needed
  }
}

// Error handling in loops
async function processItems(items) {
  const results = [];
  const errors = [];
  
  for (const item of items) {
    try {
      const result = await processItem(item);
      results.push(result);
    } catch (error) {
      errors.push({ item, error });
      console.error(`Failed to process item ${item.id}:`, error);
    }
  }
  
  return { results, errors };
}

Open as page

These are methods available on event objects that control how events behave in the DOM.

preventDefault(): Prevents the default action that the browser would normally take for this event.

// Prevent form submission
function handleSubmit(event) {
  event.preventDefault();
  // Custom form handling logic
  console.log('Form submitted with custom logic');
}

// Prevent link navigation
function handleLinkClick(event) {
  event.preventDefault();
  // Custom navigation logic
  router.push('/custom-route');
}

// Prevent context menu
function handleRightClick(event) {
  event.preventDefault();
  // Show custom context menu
  showCustomMenu(event.clientX, event.clientY);
}

// Prevent text selection
function handleMouseDown(event) {
  event.preventDefault();
  // Custom drag behavior
  startDragging(event);
}

stopPropagation(): Stops the event from bubbling up to parent elements.

// Stop event from reaching parent elements
function handleButtonClick(event) {
  event.stopPropagation();
  console.log('Button clicked, parent won\'t receive this event');
}

// Example with nested elements
function App() {
  const handleParentClick = () => {
    console.log('Parent clicked');
  };
  
  const handleChildClick = (event) => {
    event.stopPropagation();
    console.log('Child clicked, parent won\'t be notified');
  };
  
  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>
        Click me
      </button>
    </div>
  );
}

stopImmediatePropagation(): Stops the event from bubbling up AND prevents other event listeners on the same element from being called.

// Multiple listeners on same element
element.addEventListener('click', function(event) {
  console.log('First listener');
  event.stopImmediatePropagation();
  console.log('Second listener will NOT be called');
});

element.addEventListener('click', function(event) {
  console.log('Second listener'); // This won't execute
});

// Practical example - preventing multiple handlers
function handleFormSubmit(event) {
  event.stopImmediatePropagation();
  
  // Prevent other submit handlers from running
  if (isSubmitting) {
    return;
  }
  
  isSubmitting = true;
  submitForm();
}

Comparison Table:

Method	Prevents Default Action	Stops Bubbling	Stops Other Listeners
`preventDefault()`	✅	❌	❌
`stopPropagation()`	❌	✅	❌
`stopImmediatePropagation()`	❌	✅	✅

Common Use Cases:

Form Handling:

function handleFormSubmit(event) {
  event.preventDefault(); // Prevent page reload
  
  const formData = new FormData(event.target);
  const data = Object.fromEntries(formData.entries());
  
  // Custom validation
  if (!validateForm(data)) {
    return;
  }
  
  // Submit via AJAX
  submitForm(data);
}

// Prevent form submission on Enter key in textarea
function handleTextareaKeyDown(event) {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault();
    // Custom behavior instead of form submission
    addNewLine();
  }
}

Custom Navigation:

function handleNavigation(event) {
  event.preventDefault();
  
  const href = event.target.getAttribute('href');
  
  // Check if user is logged in
  if (!isAuthenticated() && href.startsWith('/protected')) {
    showLoginModal();
    return;
  }
  
  // Custom navigation logic
  navigateTo(href);
}

Drag and Drop:

function handleDragStart(event) {
  event.preventDefault(); // Prevent default drag behavior
  
  const draggedElement = event.target;
  draggedElement.classList.add('dragging');
  
  // Set drag data
  event.dataTransfer.setData('text/plain', draggedElement.id);
}

function handleDrop(event) {
  event.preventDefault(); // Prevent default drop behavior
  event.stopPropagation(); // Stop bubbling
  
  const data = event.dataTransfer.getData('text/plain');
  const dropZone = event.target;
  
  // Custom drop logic
  moveElement(data, dropZone);
}

Event Delegation with Selective Handling:

// Handle clicks on dynamically added buttons
document.addEventListener('click', function(event) {
  if (event.target.matches('.delete-btn')) {
    event.stopPropagation(); // Don't trigger parent click handlers
    
    const itemId = event.target.dataset.itemId;
    deleteItem(itemId);
  }
  
  if (event.target.matches('.edit-btn')) {
    event.stopImmediatePropagation(); // Don't trigger other click handlers
    
    const itemId = event.target.dataset.itemId;
    editItem(itemId);
  }
});

Keyboard Shortcuts:

function handleKeyDown(event) {
  // Prevent default browser shortcuts
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    saveDocument();
  }
  
  if (event.key === 'Escape') {
    event.preventDefault();
    closeModal();
  }
  
  // Prevent arrow keys from scrolling in certain contexts
  if (event.target.matches('.no-scroll')) {
    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
      event.preventDefault();
      // Custom navigation logic
    }
  }
}

File Upload Customization:

function handleFileDrop(event) {
  event.preventDefault();
  event.stopPropagation();
  
  const files = event.dataTransfer.files;
  
  // Custom file validation
  const validFiles = Array.from(files).filter(file => {
    return file.type.startsWith('image/') && file.size < 5 * 1024 * 1024;
  });
  
  if (validFiles.length !== files.length) {
    showError('Some files are invalid');
    return;
  }
  
  uploadFiles(validFiles);
}

// Prevent default drag behaviors on drop zone
function handleDragOver(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
}

Best Practices:

Use preventDefault() for custom behavior:

// ✅ Good - prevent default and implement custom logic
function handleCustomSubmit(event) {
  event.preventDefault();
  // Custom submission logic
}

// ❌ Bad - prevent default without alternative
function handleSubmit(event) {
  event.preventDefault();
  // No alternative behavior provided
}

Use stopPropagation() sparingly:

// ✅ Good - prevent parent from handling child events
function handleButtonClick(event) {
  event.stopPropagation();
  // Button-specific logic
}

// ❌ Bad - overuse can break event delegation
function handleAllClicks(event) {
  event.stopPropagation(); // Breaks parent event handlers
}

Use stopImmediatePropagation() for priority handling:

// ✅ Good - ensure only one handler runs
function handlePriorityClick(event) {
  event.stopImmediatePropagation();
  // Critical logic that must run first
}

Summary:

preventDefault(): Prevents browser's default action (form submission, link navigation, etc.)
stopPropagation(): Stops event from bubbling to parent elements
stopImmediatePropagation(): Stops bubbling AND prevents other listeners on same element
Use them judiciously to implement custom behaviors while maintaining good event handling practices

ES6+ Features and Modern JavaScript

Explain arrow functions and their differences from regular functions. When should you use each?

Explain destructuring assignment. Provide examples of object and array destructuring with practical use cases.

Explain the spread and rest operators. When would you use each?

Explain template literals and tagged template literals. Provide practical examples.

Explain ES6 modules (import/export). Compare with CommonJS and discuss module bundling.

Explain async/await syntax and how it relates to Promises. What are the benefits and potential pitfalls?

Explain the Fetch API and how it differs from XMLHttpRequest. Provide examples of common use cases.

Explain localStorage, sessionStorage, and IndexedDB. When would you use each?

Explain DOM manipulation and event handling. What are event delegation, bubbling, and capturing?

Explain Regular Expressions in JavaScript. Provide examples of common patterns and use cases.

Explain error handling in JavaScript. Compare different error handling strategies and when to use each.

Explain preventDefault, stopPropagation, and stopImmediatePropagation in event handlers. When would you use each?