JavaScript Basics & Syntax Quiz

Callback Functions

Callback Functions: Functions as Arguments

A callback function is a function that’s passed as an argument to another function and is executed later. It’s like giving someone instructions to follow when they’re done with their main task.

Basic Callback Example

Copy to Clipboard

Array Methods with Callbacks

Copy to Clipboard

Custom Functions with Callbacks

Copy to Clipboard

// Function that processes data with a callback
function processData(data, processor, validator) {
  // Validate data first
  if (validator && !validator(data)) {
    return 'Invalid data';
  }
  
  // Process data
  let result = processor(data);
  return result;
}

// Callback functions
function validateNumbers(numbers) {
  return numbers.every(num => typeof num === 'number' && num > 0);
}

function calculateAverage(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0) / numbers.length;
}

function findMax(numbers) {
  return Math.max(...numbers);
}

// Using the callbacks
let data = [10, 20, 30, 40, 50];

let average = processData(data, calculateAverage, validateNumbers);
let maximum = processData(data, findMax, validateNumbers);

console.log('Average: ' + average); // Average: 30
console.log('Maximum: ' + maximum); // Maximum: 50

// Error handling with callbacks
function processWithErrorHandling(data, processor, errorHandler) {
  try {
    let result = processor(data);
    return { success: true, data: result };
  } catch (error) {
    if (errorHandler) {
      errorHandler(error);
    }
    return { success: false, error: error.message };
  }
}

function divideNumbers(numbers) {
  return numbers.reduce((result, num) => result / num);
}

function logError(error) {
  console.log('Error occurred: ' + error.message);
}

let result1 = processWithErrorHandling([100, 2, 5], divideNumbers, logError);
let result2 = processWithErrorHandling([100, 0, 5], divideNumbers, logError);

console.log(result1); // { success: true, data: 10 }
console.log(result2); // { success: false, error: 'Division by zero' }

Asynchronous Callbacks

Copy to Clipboard

// Simulating API calls with callbacks
function fetchUserData(userId, successCallback, errorCallback) {
  console.log('Fetching user data for ID: ' + userId);
  
  // Simulate network delay
  setTimeout(function() {
    if (userId > 0 && userId <= 100) {
      let userData = {
        id: userId,
        name: 'User ' + userId,
        email: 'user' + userId + '@example.com'
      };
      successCallback(userData);
    } else {
      errorCallback('User not found');
    }
  }, 1000);
}

// Success callback
function handleUserData(user) {
  console.log('User data received:', user);
}

// Error callback
function handleError(error) {
  console.log('Error:', error);
}

// Using the callbacks
fetchUserData(1, handleUserData, handleError);
fetchUserData(999, handleUserData, handleError);

// Chaining callbacks (callback hell example)
function getUserPosts(userId, callback) {
  fetchUserData(userId, function(user) {
    console.log('Got user:', user.name);
    
    // Simulate fetching posts
    setTimeout(function() {
      let posts = [
        { id: 1, title: 'First Post', content: 'Hello World' },
        { id: 2, title: 'Second Post', content: 'Another post' }
      ];
      callback(null, posts);
    }, 500);
  }, function(error) {
    callback(error, null);
  });
}

getUserPosts(1, function(error, posts) {
  if (error) {
    console.log('Error:', error);
  } else {
    console.log('Posts:', posts);
  }
});

Event Handlers as Callbacks

Copy to Clipboard

// Button click handler
function createButtonHandler(buttonText) {
  return function() {
    console.log('Button "' + buttonText + '" was clicked!');
  };
}

let saveHandler = createButtonHandler('Save');
let deleteHandler = createButtonHandler('Delete');

// In a real app:
// saveButton.addEventListener('click', saveHandler);
// deleteButton.addEventListener('click', deleteHandler);

// Form validation with callbacks
function validateForm(formData, validators) {
  let errors = [];
  
  // Run each validator
  validators.forEach(function(validator) {
    let result = validator(formData);
    if (result !== true) {
      errors.push(result);
    }
  });
  
  return errors.length === 0 ? true : errors;
}

// Validator functions
function validateEmail(data) {
  if (!data.email || !data.email.includes('@')) {
    return 'Invalid email address';
  }
  return true;
}

function validateAge(data) {
  if (!data.age || data.age < 18) {
    return 'Must be at least 18 years old';
  }
  return true;
}

function validateName(data) {
  if (!data.name || data.name.length < 2) {
    return 'Name must be at least 2 characters';
  }
  return true;
}

// Test the form validation
let formData = {
  name: 'Alice',
  email: 'alice@email.com',
  age: 25
};

let validators = [validateName, validateEmail, validateAge];
let validationResult = validateForm(formData, validators);

if (validationResult === true) {
  console.log('Form is valid!');
} else {
  console.log('Validation errors:', validationResult);
}

Tip: Callbacks are powerful but can lead to "callback hell" with nested functions. Consider using Promises or async/await for complex async operations!