WDD 330: Web Frontend Development II

W05 Learning Activity: Advanced Function Concepts

Overview

Prepare

Closures

Closures are functions that have access to the outer function's scope even after the outer function has returned. This allows for the creation of private variables and functions that are not accessible from the global scope. Closures are often used to create factory functions that return functions with their own private state.

For example, the following code creates a closure that returns a function that increments a counter variable:

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

In this example, the createCounter function returns a new function that has access to the count variable. Each time the returned function is called, it increments the count variable and returns its value.

Immediately Invoked Function Expressions (IIFE)

Immediately Invoked Function Expressions (IIFE) are functions that are executed immediately after they are defined. This allows for the creation of a new scope and can help prevent variable name collisions. IIFE are often used to create private variables and functions that are not accessible from the global scope.

For example, the following code creates an IIFE that returns a function that increments a counter variable:

const counter = (function() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
})();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

In this example, the IIFE creates a new scope and returns a function that has access to the count variable. Each time the returned function is called, it increments the count variable and returns its value.

This example comes from a previous learning activity using the free REST API service, jsonplaceholder.typicode.com.

(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    } 
    const posts = await response.json();
    console.log(posts);
  } catch (error) {
    console.error('There was a problem fetching the posts:', error);
  }
})();

In this example, the IIFE is used to create an asynchronous function that fetches posts from the API and logs them to the console. The IIFE is immediately invoked, allowing the code to run without polluting the global scope.

Recursion

Recursion is a programming technique where a function calls itself to solve a problem. This can be useful for solving problems that can be broken down into smaller subproblems. Recursion can be used to create elegant solutions to complex problems, but it can also lead to performance issues if not used carefully.

Callbacks

Callbacks are functions that are passed as arguments to other functions and are executed at a later time. This allows for asynchronous programming, where a function can continue executing while waiting for another function to complete.

Activity Instructions