221 - Higher-order functions (Javascript)

Functional Programming in JavaScript

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. JavaScript, as a versatile language, allows you to embrace functional programming principles, and one of the essential concepts is higher-order functions.

What Are Higher-Order Functions?

Higher-order functions are functions that can take other functions as arguments or return them as results. In simpler terms, they treat functions as first-class citizens, enabling you to abstract over actions, pass functions as arguments, and create new functions based on existing ones. This concept is a cornerstone of functional programming in JavaScript.

Benefits of Higher-Order Functions

Higher-order functions provide several benefits when applied in your JavaScript code:

Abstraction: You can abstract common patterns and operations, making your code more concise and readable.
Reusability: Higher-order functions allow you to reuse and compose functions, reducing duplication and promoting modularity.
Flexibility: They enable you to customize behavior by passing different functions as arguments.
Functional Composition: You can compose multiple functions to create more complex behaviors.
Declarative Code: Higher-order functions lead to more declarative code that describes “what” needs to be done rather than “how” it should be done.

Common Higher-Order Functions

JavaScript provides several built-in higher-order functions that are commonly used. Let’s explore a few of them:

`map()`

The map() function applies a given function to each element of an array, returning a new array with the results. It’s useful for transforming data without modifying the original array.


const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

`filter()`

The filter() function creates a new array by filtering elements from an existing array based on a provided condition.


const scores = [75, 80, 92, 64, 88];

const highScores = scores.filter((score) => score >= 80);

console.log(highScores); // [80, 92, 88]

`reduce()`

The reduce() function accumulates values from an array into a single result. It takes a function that defines how to combine elements.


const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 15

`forEach()`

While forEach() doesn’t create a new array, it’s a higher-order function that iterates over elements and applies a given function for side effects, such as printing or modifying values.


const colors = ['red', 'green', 'blue'];

colors.forEach((color) => console.log(`Color: ${color}`));

Creating Custom Higher-Order Functions

One of the powerful aspects of JavaScript is the ability to create custom higher-order functions tailored to your specific use cases. Here’s an example of a custom higher-order function that composes two functions:


function compose(func1, func2) {
  return function (value) {
    return func1(func2(value));
  }
}

function toUpperCase(text) {
  return text.toUpperCase();
}

function addExclamation(text) {
  return `${text}!`;
}

const shout = compose(addExclamation, toUpperCase);

console.log(shout('hello')); // "HELLO!"

Conclusion

Higher-order functions are a fundamental concept in functional programming, allowing you to create more expressive, modular, and reusable code in JavaScript. By embracing these functions and understanding their benefits, you can enhance the readability and maintainability of your code while leveraging the full power of the language.

221 – Higher-order functions (Javascript)