Compose function in JavaScript

Question

I try to get some details from the code below:

const upperCase = str => str.toUpperCase();
const exclaim = str => `${str}!`;
const repeat = str => `${str} `.repeat(3);

const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const withСompose = compose(
  repeat,
  exclaim,
  upperCase
);

console.log(withСompose("hello"));

Questions:

How x from => x =>, go instead x from fn(acc), x);?
Why const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x); does not work in this way const compose = (...fns) => fns.reduceRight((acc, fn) => fn(acc));?

Replace the arrow functions with their old-school function() versions. This might be easier to understand. — Andreas
– Andreas, Commented Jun 22, 2020 at 12:36
Very relevant: What do multiple arrow functions mean in javascript? — VLAZ
– VLAZ, Commented Jun 22, 2020 at 12:36

Olian04 · Accepted Answer · 2020-06-22 12:43:00Z

2

1.2. because reduce right takes two arguments reduceRight(reducer, initialValue) the initial value in your case is the x itself

const upperCase = str => str.toUpperCase();
const exclaim = str => `${str}!`;
const repeat = str => `${str} `.repeat(3);
const reducer = (acc, fn) => fn(acc);
const compose = (...fns) => x => fns.reduceRight(reducer, x);

const withСompose = compose(
  repeat,
  exclaim,
  upperCase
);

console.log(withСompose("hello"));

hope now it's clear

edited Jun 22, 2020 at 12:43

Olian04

6,9002 gold badges31 silver badges56 bronze badges

answered Jun 22, 2020 at 12:39

Shandor Kostur

713 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andreas Over a year ago

.reduceRight() has only one required parameter -> reducer. The initialValue is optional.

Asking Over a year ago

@Shandor Kostur, do i understand right, that writing this: withСompose("hello"), i create a curried function and hello in this case will go instead of x as initialValue?

Shandor Kostur Over a year ago

@AskMen to be more concrete you've created partial application not curried function but yes you're right in this case hello is the initialValue of reduce right

Nikita Madeev · Accepted Answer · 2020-06-22 12:45:34Z

1

May help to figure out, result of compose:

const withСompose = function fnUpperCase(str1) {
    const resultStrFn1 = str1.toUpperCase();

    return (function fnExclaim(str2) {
        const resultStrFn2 = `${str2}!`;

        return (function fnRepeat(str3) {
            return `${str3} `.repeat(3);
        })(resultStrFn2);
    })(resultStrFn1);
};

console.log(withСompose('hello'));

answered Jun 22, 2020 at 12:45

Nikita Madeev

4,49012 silver badges23 bronze badges

1 Comment

Asking Over a year ago

could you take a look please, thanks: stackoverflow.com/questions/63345237/…

Collectives™ on Stack Overflow

Compose function in JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related