Creating compound functions using a series of arrow functions

Question

Creating compound functions using a series of arrow functions

Examining the compose function (borrowed from Redux)

function compose(...funcs) {
    if (funcs.length === 0) {
      return arg => arg
    }

    if (funcs.length === 1) {
      return funcs[0]
    }

    return funcs.reduce((a, b) => (...args) => a(b(...args)))
  }

const double = x => x * 2
const square = x => x * x
const double1 = x => x * 3
compose(double, square, double1)(5)

In the final return statement

funcs.reduce((a, b) => (...args) => a(b(...args)))

Why is a function that takes ..args being returned, instead of just

funcs.reduce((a, b) => a(b(...args))) ?

javascript currying

Answer 1

Answer №1

If you choose the suggested approach, you will encounter a compile error because you are trying to return the result of a(b(...args)) without passing the arguments (args). This means that args is not defined.

On the other hand, in the alternative approach, a function is returned which takes parameters (args - 5 is passed as args) and returns the result of a(b(...args)) using:

(...args) => a(b(...args))

Take a look at this example which demonstrates the distinction between these two methods.

function a(str) {
  console.log('In a');
  console.log(str);
  return str;
}

function b(str) {
  console.log('In b');
  console.log(str);
  return str;
}

const message = a(b('text')); // Immediate result with your approach.
console.log(`Message is ${message}`);

const func = (someText) => a(b(someText)); // Given approach where `func` needs to be called to obtain the result.

const anotherMessage = func('anotherText'); // Here `func` needs to be called and a parameter needs to be passed to it.
console.log(`Message is ${anotherMessage}`);

Answer 2

If you choose the suggested approach, you will encounter a compile error because you are trying to return the result of a(b(...args)) without passing the arguments (args). This means that args is not defined.

On the other hand, in the alternative approach, a function is returned which takes parameters (args - 5 is passed as args) and returns the result of a(b(...args)) using:

(...args) => a(b(...args))

Take a look at this example which demonstrates the distinction between these two methods.

function a(str) {
  console.log('In a');
  console.log(str);
  return str;
}

function b(str) {
  console.log('In b');
  console.log(str);
  return str;
}

const message = a(b('text')); // Immediate result with your approach.
console.log(`Message is ${message}`);

const func = (someText) => a(b(someText)); // Given approach where `func` needs to be called to obtain the result.

const anotherMessage = func('anotherText'); // Here `func` needs to be called and a parameter needs to be passed to it.
console.log(`Message is ${anotherMessage}`);

Creating compound functions using a series of arrow functions

Answer №1

Similar questions

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

"Utilize the addEventListener function in combination with the 'for' keyword to

Instructions on how to automatically navigate to a different tab upon clicking an <a> element on a separate webpage, and subsequently display the designated tab on that

Utilizing JSON for live population of search filter results

Encountering the error message "This expression cannot be invoked" within a Typescript React Application

`Where to include controller.js scripts in an Angular application`

The argument type does not match the parameter type partial<>

What is the best way to prevent an iFrame from causing its parent window to scroll?

Uncovering the Mystery: The Issue of Duplicate Items When Writing Arrays to localStorage in JavaScript

Issue with $sce.trustAsResourceUrl(url) function in angularJS

Please ensure to submit the form only one time

Select a different inspiring quote every hour

When working with THREE.js in Electron, web development tools seem to vanish into thin air

Is it possible to share a variable between different scopes in an Angular environment?

Is there a one-liner to efficiently eliminate all instances of a specific sub-string from an array using the filter

Integrating Gesture Handling in Leaflet JS for two-finger scrolling enforcement

What is the best way to include a new property to an existing interface and then export the updated interface in Typescript?

Challenges of modifying a scope object in Angular through reference

Clicking on the input triggers the appearance of a border using the OnClick function

Updating a database seamlessly via a dropdown menu without having to refresh the entire webpage