5. 2 Abstracting repetition

 

Abstracting repetition

 

⚙️: The transition from a simple for loop to a versatile repeat function encapsulates the essence of "Abstracting Repetition" in programming. This evolution illustrates a powerful approach to abstraction, enabling programmers to not only simplify repetitive tasks but also to inject customizable behavior into their loops.

👩‍🎓: The repeat function showcases a fundamental principle of functional programming: higher-order functions. These are functions that can take other functions as arguments or return them as results. By abstracting the repetition mechanism into a higher-order function, you allow for a wide range of operations to be performed during each iteration of the loop, far beyond just logging to the console. This pattern increases the reusability and flexibility of your code.

🎨: Think of the repeat function as your personal programming assistant, capable of performing any task you delegate, not just the mundane act of counting. It's as if you've been granted the ability to clone yourself, with each clone specializing in whatever task you need done, whether that's creating labels, processing data, or even generating art! Each iteration is a new opportunity for creativity, bounded only by the imagination.

⚙️: Let's break down the mechanics and benefits of this abstraction:

1. Flexibility: By accepting an action as a parameter, the repeat function can execute any piece of code multiple times, making it highly adaptable to various scenarios.
2. Reusability: Once defined, this abstraction can be reused across different parts of your program, reducing code duplication and promoting cleaner, more maintainable code.
3. Simplicity: Higher-order functions like repeat abstract away the boilerplate code associated with loops, making your code more concise and easier to understand at a glance.

Understanding the repeat Function

The idea behind the repeat function is to take "doing something N times" and turn it into a reusable, flexible piece of code. Here’s the basic repeat function again for reference:

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
} 

1. Parameter n: This is the number of times you want to repeat an action. It's like saying, "I want to do this thing n times."

2. Parameter action: This is a function that represents the action you want to perform each time. Instead of hardcoding what happens inside the loop (like logging numbers), you pass a function that does whatever you want.

3. The Loop: Inside repeat, a for loop runs from 0 to n-1. Each iteration of the loop calls the action function, passing the current index (i) to it.

   Simplified Example: Using repeat to Log Numbers

   Let's take the simplest use case: logging numbers from 0 to n-1. Here's how you'd do it with repeat
   

repeat(3, console.log);

This tells the program to "repeat the action of logging to the console 3 times." The action here is console.log, which is a built-in JavaScript function for printing output.

 

Breaking Down the Action Function

 When you want to do something other than logging numbers — say, adding them to an array — you can define a function that does exactly that and pass it to repeat. Here’s a basic example to illustrate this:

 

let numbers = [];
repeat(3, i => {
  numbers.push(i);
});
console.log(numbers); // → [0, 1, 2]

In this example:

• We create an array numbers to hold our values.
• We define a function on the spot (i => { numbers.push(i); }) that takes an index i and pushes it into the numbers array. This is the action we want to repeat.
• We call repeat(3, action), telling it to execute our function 3 times, each time with the current index as its argument.

Key Takeaway

The power of the repeat function lies in its ability to perform any action multiple times, where the action is defined by you through a function. This makes your code more abstract (less tied to specific tasks) and reusable.

👩‍🎓: Think of repeat as a tool that says, "Tell me how many times and what you want to do, and I'll take care of the rest." It's a way to apply the DRY (Don't Repeat Yourself) principle, avoiding repetitive code and making your programs more modular and maintainable.

 

🧑 Though I need a detailed breakdown. There is something clever to take away from this function. 

⚙️: Absolutely, let's break down the repeat function call you mentioned step by step, especially focusing on the i + 1 part to understand how it contributes to numbering:

 

let labels = [];
repeat(5, i => {
  labels.push(`Unit ${i + 1}`);
});

Understanding the repeat Function Structure 

 

1. The repeat Function Call: Here, repeat is called with two arguments:

   • 5: This indicates the number of times the action should be repeated.
   • i => { labels.push(Unit ${i + 1}); }: This is an arrow function (a concise way to write functions in JavaScript) that defines the action to be repeated. This function takes a parameter i, which is the current iteration index (starting from 0).

2. Action to be Repeated: Inside the repeat function, for each iteration (from 0 to 4, since we're repeating 5 times), the arrow function is executed. The current iteration index i is passed to this function.

The Role of i + 1 in Numbering

• Iteration Index (i): The for loop inside repeat iterates n times (5 times in our case). For each iteration, i starts at 0 and increments by 1 until it reaches 4 (n-1).
• Using i + 1: When you push Unit ${i + 1} into the labels array, you're creating a string that includes the current iteration index plus one. This adjustment (i + 1) is done because indices in programming generally start at 0, but for human-readable labels or numbering, you often want to start counting from 1.
• Creating Numbering: As a result, i + 1 translates the computer's way of counting (starting at 0) into a more natural numbering sequence (starting at 1). This means, for each iteration, you get Unit 1, Unit 2, up to Unit 5 instead of starting from Unit 0.

Detailed Breakdown of Each Iteration

• First Iteration (i = 0): The function pushes Unit 1 into the labels array.
• Second Iteration (i = 1): The function pushes Unit 2 into the labels array.
• Third Iteration (i = 2): The function pushes Unit 3 into the labels array.
• Fourth Iteration (i = 3): The function pushes Unit 4 into the labels array.
• Fifth Iteration (i = 4): The function pushes Unit 5 into the labels array.

Final Outcome

After the loop completes, labels contains ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], effectively creating a series of numbered labels starting from 1 up to the number of repetitions specified (in this case, 5).

👩‍🎓: The usage of i + 1 here is a simple yet clever way to bridge the gap between zero-based indexing (a common convention in programming) and the more intuitive one-based numbering that we use in everyday contexts.

⚙️: This breakdown clarifies how combining simple concepts like iteration indexes and array operations with function parameters can create powerful and flexible code structures. Do you have any further questions on this or any other topic?

 

 

🧑Let's do some more advanced examples

⚙️: Let's dive deeper into the concept of abstracting repetition by exploring variations of the repeat function and applying it to different scenarios. This will showcase the versatility and power of higher-order functions in making your code more flexible and expressive.

Example 1: Performing Operations on Array Elements

Consider a scenario where you want to apply a specific operation to each element in an array and collect the results. Using our repeat abstraction, we can easily achieve this.

 

function mapArray(array, transform) {
  let result = [];
  repeat(array.length, i => {
    result.push(transform(array[i]));
  });
  return result;
}

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = mapArray(numbers, x => x * x);
console.log(squaredNumbers); // → [1, 4, 9, 16, 25]

Let's dive into the annotated version of the mapArray function example to ensure you get a clear understanding of how it works and how it leverages the concept of abstracting repetition.

Annotated mapArray Function

 

// Define the mapArray function with two parameters: 'array' and
// 'transform'.
// 'array' is the array you want to transform.
// 'transform' is the function that defines how each element 
//in the array should be transformed.
function mapArray(array, transform) {
  // Initialize an empty array 'result' to store 
  //the transformed elements.
  let result = [];

  // Use the 'repeat' function to iterate over each element in 
  //the 'array'. The 'repeat' function takes two arguments:
  // the number of times to repeat
  // (array.length) and an action function that defines what 
  // to do in each iteration.
  repeat(array.length, i => {
    // For each iteration, apply the 'transform' function to 
    //the current element (array[i])
    // and push the transformed element into the 'result' array.
    result.push(transform(array[i]));
  });

  // After iterating through all elements, return the 'result'
  // array containing the transformed elements.
  return result;
}

// Example usage of mapArray function:

// Define an array of numbers.
const numbers = [1, 2, 3, 4, 5];

// Call the 'mapArray' function, passing in the 'numbers' 
//array and an arrow function 'x => x * x' that describes how
// to transform each element (in this case, squaring it).
const squaredNumbers = mapArray(numbers, x => x * x);

// Log the 'squaredNumbers' array to the console to see the
// transformation result.
console.log(squaredNumbers); // → [1, 4, 9, 16, 25]

Key Concepts Illustrated

1. Abstraction: The mapArray function abstracts the process of transforming each element in an array according to a specific rule (defined by the transform function). This is a practical demonstration of how higher-order functions can abstract common tasks like iteration and application of a transformation.

2. Higher-order Functions: Both mapArray and the transform function it accepts as an argument are examples of higher-order functions. mapArray takes a function as an argument (transform), and transform is a function that gets applied to each element of the array.

3. Functional Programming: This example embodies functional programming principles by using functions as first-class citizens (passing functions as arguments) and focusing on immutability and statelessness (result array is created anew and returned without modifying the original array).

4. Using repeat for Iteration: The example leverages the custom repeat function to iterate over the array, showcasing how custom iteration mechanisms can replace traditional loops like for or forEach for more abstracted and flexible code structures.

This annotated breakdown should help clarify how the mapArray function operates and its underlying principles.

Example 2: Filtering Array Elements

Similarly, we can abstract the concept of filtering elements of an array based on a predicate (a function that returns true or false).

Let's break down the filterArray function and its usage with a "rubber duck" style explanation, keeping the annotations concise and directly below the code for clarity.

// Define filterArray with 'array' to filter and 'test' as 
//the condition to meet.
function filterArray(array, test) {
  // Initialize an empty array to hold elements that
  //pass the test.
  let result = [];

  // Use repeat to go over each element in the input array.
  repeat(array.length, i => {
    // If the current element passes the test, add it to the
    //result array.
    if (test(array[i])) {
      result.push(array[i]);
    }
  });

  // Return the array with elements that passed the test.
  return result;
}

Usage Example

 

// An array of numbers to filter.
const numbers = [1, 2, 3, 4, 5];

// Call filterArray, passing 'numbers' and a function to test 
//evenness.
const evenNumbers = filterArray(numbers, x => x % 2 === 0);

// Log the filtered array, containing only even numbers.
console.log(evenNumbers); // → [2, 4] 

Explanation

• filterArray Function: It creates a new array by going through each element of the input array (array) and applying a test (test). If an element passes the test (i.e., the test function returns true for that element), it's added to a new array (result). This process filters the input array based on any condition defined in the test function.

• repeat Usage: Instead of a traditional for loop, repeat abstracts the iteration process. It repeats an action (in this case, the test and potential addition to the result array) for each element in the input array.

• Usage with numbers Array: When filterArray is called with numbers and a test for evenness (x => x % 2 === 0), it filters out only the even numbers from the numbers array and stores them in evenNumbers.

• Result: evenNumbers will contain elements from numbers that satisfy the condition x % 2 === 0, which are [2, 4] for this specific example.

This "rubber duck" explanation aims to clarify the purpose and function of filterArray by focusing on what each part of the code does in a straightforward manner. 

 

Example 3: Generating HTML Elements

Abstraction can also be applied to more creative tasks, such as dynamically generating HTML elements based on a set number of repetitions.

function createListItems(n, contentFunction) {
  let items = [];
  repeat(n, i => {
    items.push(`
${contentFunction(i)}
`);
  });
  return items.join('');
}

let listHTML = createListItems(5, i => `Item ${i + 1}`);
console.log(listHTML);
// → "
Item 1
Item 2
Item 3
Item 4
Item 5
" 

Usage Example

 

// Define the number of list items to create and the content for each item.
let listHTML = createListItems(5, i => `Item ${i + 1}`);

// Log the resulting HTML string.
console.log(listHTML);
// Outputs: "
Item 1
Item 2
Item 3
Item 4
Item 5
"

Explanation

• createListItems Function: This function dynamically creates a list (<li>) HTML string based on a specified number (n) and a function (contentFunction) that defines what content goes inside each list item. It uses an array (items) to collect individual list items before combining them into a single HTML string.

• repeat Usage: The repeat function is used to iterate n times, creating a new list item on each iteration. The current index (i) is passed to contentFunction, which returns the content for each list item. This approach abstracts the process of generating a list, allowing for dynamic content creation.

• Content Generation: contentFunction(i) generates the content for each list item. In the usage example, it creates a string Item ${i + 1}, which uses template literals to include the current index + 1 in the item text, effectively numbering the items starting from 1.

• Combining List Items: After generating all list items, items.join('') combines them into a single string without any separators, ready to be used as HTML.

• Result: The function call createListItems(5, i => Item ${i + 1}) generates a string representing a list of 5 numbered items, demonstrating how you can dynamically create HTML content based on simple inputs.

This detailed breakdown should help clarify how createListItems works to dynamically generate HTML list items based on given parameters and functions. 

 

👩‍🎓: Each of these examples demonstrates how abstracting repetition into a function like repeat can significantly enhance the readability and modularity of your code. By passing different actions or predicates, you can easily customize the behavior of your loops without rewriting the looping logic itself.

🎨: And there's a beauty in how such a simple concept unfolds into endless possibilities, from crunching numbers to painting digital canvases of HTML. It's like having a skeleton key for loops, unlocking any door with a turn of the higher-order function.

⚙️: Exploring these examples, you can see how abstracting repetition not only simplifies your code but also opens up a world of programming patterns that are both elegant and powerful. This approach is at the heart of functional programming, emphasizing code that's concise, flexible, and expressive.

VOCABULARY: Functional programming

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. It emphasizes the application of functions, in contrast to the imperative programming paradigm, which emphasizes changes in state and the sequence of operations. Here are some key concepts and principles of functional programming:

1. First-Class and Higher-Order Functions

Functional programming languages treat functions as first-class citizens, meaning functions can be assigned to variables, passed as arguments to other functions, and returned from other functions. Higher-order functions either take one or more functions as arguments or return a function as their result. This allows for powerful abstractions and composition techniques.

2. Pure Functions

A pure function is a function where the return value is determined only by its input values, without observable side effects. This means that the same input will always result in the same output. Pure functions are easier to reason about due to their predictability and they don’t alter the state outside their scope.

3. Immutability

In functional programming, data is immutable. Once created, data structures are never changed. If you want to make a change, you create a new data structure. This leads to safer code that's easier to debug and test because there are no side effects to functions.

4. Function Composition

Function composition is the process of combining two or more functions to produce a new function. Composing functions together is a core concept in functional programming, enabling the building of complex operations out of simpler ones.

5. Recursion

Functional programming often uses recursion as a primary method for looping or iterating over data. Since the paradigm avoids mutable state, recursion provides a way to manage state across function calls without altering the state of the program.

6. Declarative Programming

Functional programming is a subset of declarative programming, where you write expressions that describe what you want to do, not how to do it. This contrasts with imperative programming, where you write code that describes how to do something.

Examples in JavaScript

JavaScript supports functional programming even though it's not a purely functional language. It allows for first-class functions, higher-order functions, and has some immutability support through const and immutable data structures. Libraries like Redux embrace immutability for state management, and many JavaScript frameworks and libraries leverage functional programming concepts for cleaner, more efficient code.

Benefits of Functional Programming

• Easier Debugging and Testing: Pure functions and immutability lead to fewer side effects, making code easier to test, debug, and predict.
• Concurrency: Immutable data structures and stateless functions make it easier to write programs that execute concurrently, as there's no shared state that could lead to race conditions.
• Modularity and Reusability: Higher-order functions and function composition make it easy to reuse code, leading to more modular and maintainable applications.

Functional programming's emphasis on simplicity, modularity, and purity can lead to more robust, readable, and maintainable code, making it a valuable paradigm for many programming tasks.

 

VOCABULARY: Side effect

A side effect in programming occurs when a function or expression modifies some state outside its local environment, or has an observable interaction with the outside world beyond returning a value. This can include altering global variables, modifying a data structure in place, making an I/O operation (like printing to a console or reading a file), or changing the contents of a database. Essentially, any action that goes beyond simply computing and returning a value can be considered a side effect.

 

Examples of Side Effects

Modifying any external variable or object property:

 

let count = 0;
function increment() {
  count += 1; // Modifies the external variable 'count'.
}

Logging to the console: 

 

function logMessage() {
  console.log("Logging a message"); // Console output is a side effect.
}

Writing to a file:

Modifying a data structure in place:

const array = [1, 2, 3];
function addElement(element) {
  array.push(element); // Changes the original array.
}

Fetching data from an API:

Pure Functions and Side Effects

In contrast, a pure function is one that does not cause any side effects. It guarantees that given the same input, it will always produce the same output, without modifying any state outside its scope or performing other observable actions. Pure functions are a cornerstone of functional programming because they offer predictability, are easier to test, and facilitate reasoning about the program flow.

Implications of Side Effects

While side effects are often necessary for a program to perform useful tasks (such as updating a user interface, sending a network request, or saving data), they can make code harder to understand and predict. This is because the outcome of a function call can depend on the context in which it's called, including the history of what other functions have been called previously.

Managing Side Effects: Functional programming aims to minimize uncontrolled side effects, often by isolating them, managing them through specific constructs (like monads in Haskell), or using immutable data structures and pure functions to ensure that the majority of the codebase remains easy to reason about and test.