How to implement function composition in JavaScript? - javascript

Below are three functions that need to be composed and give us the output 30:
const add = (a) => a + 10;
const mul = (a) => a * 10;
const divide = (a) => a / 5;
// How to implement `compositionFunction`?
compositionFunction(add, mul, divide)(5);
//=> 30
Expected output is 30 because:
5 + 10 = 15
15 * 10 = 150
150 / 5 = 30

Something like this
const add = (a) => a + 10 ;
const mul = (a) => a * 10 ;
const divide = (a) => a / 5 ;
// How to use this function -----
const customComposeFn = (...f) => v => f.reduce((res, f) => f(res), v)
console.log(customComposeFn(add, mul, divide)(5));

There are two flavours of function composition:
left-to-right function composition aka pipe
right-to-left function composition aka compose
Here's a recursive implementation just for fun:
This assumes that there are at least two functions to compose
const compose = (...fn) => {
const [[f, g], x] = [fn.slice(-2), fn.slice(0, -2)];
const h = a => f(g(a));
return x.length ? compose(...x, h) : h;
}
const pipe = (...fn) => {
const [f, g, ...x] = fn;
const h = a => g(f(a));
return x.length ? pipe(h, ...x) : h;
}
Let's try:
const foo = x => x + 'foo';
const bar = x => x + 'bar';
const baz = x => x + 'baz';
pipe(foo, bar, baz)('');
//=> 'foobarbaz'
compose(foo, bar, baz)('');
//=> 'bazbarfoo'

const add = (a) => a + 10;
const mul = (a) => a * 10;
const divide = (a) => a / 5;
const customComposeFn = (...fn) => {
return function (arg) {
if (fn.length > 0) {
const output = fn[0](arg);
return customComposeFn(...fn.splice(1))(output);
} else {
return arg;
}
};
};
const res = customComposeFn(add, mul, divide)(5);
console.log(`res`, res);

Here's what I would do:
function customComposeFn(...funcs) {
return function(arg) {
let f, res = arg;
while (f = funcs.shift()) {
res = f(res)
}
return res;
}
}
const add = a => a + 10;
const mul = a => a * 10;
const divide = a => a / 5;
// How to use this function -----
console.log(customComposeFn(add, mul, divide)(5));

Related

How to create a composition from functions

I have 5 functions: func1(), func2(), func3(), func4(), func5(). I need to implement the compositionFunc() function, which can take any number of functions as arguments, and create a composition from them. The compositionFunc() function takes my 5 functions as arguments. The compositionFunc() function returns a function that takes its initial value as an argument. This nested function successively passing through an array of functions with each iteration returns the result of calling the accumulated value of the current function-argument. The result of one function can be passed as an argument to another function. How can i do this?
const func1 = (arg1) => {
return arg1;
};
const func2 = (arg2) => {
return arg2;
};
const func3 = (arg3) => {
return arg3;
};
const func4 = (arg4) => {
return arg4;
};
const func5 = (arg5) => {
return arg5;
};
const compositionFunc = () => {
...
};
you can define a function like this
const pipe = (...functions) => args => functions.reduce((res, f) => f(res), args)
const combine = (...functions) => args => functions.reduceRight((res, f) => f(res), args)
const plus1 = x => x + 1
const double = x => x * 2
const pipeFunction = pipe(plus1, double)
const combineFunction = combine(plus1, double)
console.log(combineFunction(1)) // (1 * 2) + 1
console.log(pipeFunction(1)) // (1 + 1) * 2
A simple reduce can accomplish that:
function pipe(input, ...func) {
return func.reduce((a, f) => f(a), input);
}
You pass it an initial value + chain of functions.
Example:
function f1(val) {
return val + 1;
}
function f2(val) {
return val * 10;
}
console.log(pipe(2, f1, f2)); //=> 30

Is there any way to sum all sub array item and then multiply all sub arrays using a 'for' or 'for-of' loop?

i want to create a function using for() or for of() loop, which take an nested array as argument then add and multiply its item.
Suppose, myArray = [[5,6],[9,2],[4,8]]
Now i want to process it like: [[5+6] * [9+2] * [4+8]]
I solve it using .map() and .reduce(), but is there any way to do same using classic for() or for of() loop. this is my trial.
let myArray = [[1,2],[3,4],[5,6]]
function multyPlus(array) {
resul = 0
for (const subArray of array) {
for (const num of subArray) {
resul += num
}
resul *= subArray
}
return resul
}
console.log(multyPlus(myArray));
//Nan
I would try a two step system that first adds the numbers, then multiplies it to the previous numbers:
function sum(array) {
var total = 0;
for (var item of array)
total += item;
return total;
}
var myArray = [[5,6],[9,2],[4,8]];
var output = 1;
for (var item of myArray)
output *= sum(item);
Maybe Like This:
let myArray = [[1,2],[3,4],[5,6]]
function multyPlus(_array){
var out = 1;
for(var key1 in _array){
var out2 = 0;
for(var key2 in _array[key1]){
out2 += _array[key1][key2];
}
out = out * out2;
}
return out;
}
console.log(multyPlus(myArray));
You can define separate adder and multiplier functions -
const adder = (nums = []) =>
{ let r = 0
for (const n of nums)
r += n
return r
}
const multiplier = (nums = []) =>
{ let r = 1
for (const n of nums)
r *= n
return r
}
const myCalc = (input = []) =>
{ const r = []
for (const x of input)
r.push(adder(x))
return multiplier(r)
}
const result =
myCalc([[1,2],[3,4],[5,6]])
console.log(result) // 231
That said, I think the functional approach is superior when you use named functions. Each function is highly reusable and there's virtually no room for bugs to hide -
const add = (x = 0, y = 0) =>
x + y
const mult = (x = 0, y = 0) =>
x * y
const sum = (nums = []) =>
nums.reduce(add, 0)
const product = (nums = []) =>
nums.reduce(mult, 1)
const myCalc = (input = []) =>
product(input.map(sum)) // <-- easy peasy!
const result =
myCalc([[1,2],[3,4],[5,6]])
console.log(result) // 231
If you have something against map and reduce, you can write myCalc and sum by hand using simple recursion -
const sum = ([ x, ...more ]) =>
x === undefined
? 0
: x + sum(more)
const myCalc = ([ x, ...more ]) =>
x === undefined
? 1
: sum(x) * myCalc(more)
const result =
myCalc([[1,2],[3,4],[5,6]])
console.log(result) // 231

Multiple arguments composible function implementation using reduceRight()

I am trying to re-implement function composition using reduceRight. Here is a function composition that I am trying to re-implement:
const compose = function([func1, func2, func3]) {
return function(value1, value2) {
return func1(func2(func3(value1, value2)));
};
};
const func3 = (x, y) => {
return y > 0 ? x + 3 : x - 3;
};
const func2 = x => {
return x ** 2;
};
const func1 = x => {
return x - 8;
};
const fn = compose([func1, func2, func3]);
console.log(fn('3', 1)); // 1081
console.log(fn('3', -1)); // -8
The following code is re-implementation of the above function. It looks like the argument y is getting undefined I am not sure why.
const compose = (...args) => value =>
args.reduceRight((acc, fn) => fn(acc), value);
const func3 = (x, y) => {
return y > 0 ? x + 3 : x - 3;
};
const func2 = x => {
return x ** 2;
};
const func1 = x => {
return x - 8;
};
const fnOne = compose(
func1,
func2,
func3
)('3', 1);
console.log(fnOne);//-8
const fnTwo = compose(
func1,
func2,
func3
)('3', -1);
console.log(fnTwo);//-8
Similar to compose, you could use rest parameter syntax get an an array of values. Then destructure the func3 arguments to get x and y like this:
const compose = (...args) => (...values) =>
args.reduceRight((acc, fn) => fn(acc), values);
// an array of values is passed here
// destructure to get the x and y values
const func3 = ([x, y]) => y > 0 ? x + 3 : x - 3;
const func2 = x => x ** 2;
const func1 = x => x - 8;
const fnOne = compose(
func1,
func2,
func3
)('3', 1);
console.log(fnOne);//1081
const fnTwo = compose(
func1,
func2,
func3
)('3', -1);
console.log(fnTwo);//-8

Reversing the order of default arguments in JavaScript

I have the following recursive compose function:
const compose = (f, n = 1) => n > 1 ?
compose(compose(f), n - 1) :
g => x => f(g(x));
const length = a => a.length;
const filter = p => a => a.filter(p);
const countWhere = compose(length, 2)(filter);
const odd = n => n % 2 === 1;
console.log(countWhere(odd)([1,2,3,4,5,6,7,8,9])); // 5
Now, what I'd like to do is flip the arguments of compose so that the default argument is first:
const compose = (n = 1, f) => n > 1 ? // wishful thinking
compose(n - 1, compose(f)) : // compose(f) is the same as compose(1, f)
g => x => f(g(x));
const length = a => a.length;
const filter = p => a => a.filter(p);
const countWhere = compose(2, length)(filter); // I want to call it like this
const odd = n => n % 2 === 1;
console.log(countWhere(odd)([1,2,3,4,5,6,7,8,9])); // 5
What's the most elegant way to write such functions where the default arguments come first?
Edit: I actually want to create the map and ap methods of functions of various arities, so that I can write:
const length = a => a.length;
const filter = p => a => a.filter(p);
const countWhere = length.map(2, filter); // length <$> filter
const pair = x => y => [x, y];
const add = x => y => x + y;
const mul = x => y => x * y;
const addAndMul = pair.map(2, add).ap(2, mul); // (,) <$> (+) <*> (*)
Hence, I'd rather not curry the methods as Bergi suggested in his answer.
For more information, read: Is implicit wrapping and unwrapping of newtypes in Haskell a sound idea?
I would recommend to just not overload your functions or use default parameters:
const compose = n => f => n > 1
? compose(n - 1)(composeOne(f))
: g => x => f(g(x));
const composeOne = compose(1);
In this case you could probably also just inline it, as it seems composeOne wouldn't be called anywhere else:
const compose = n => f => n > 1
? compose(n - 1)(compose(1)(f))
: g => x => f(g(x));
Or even not do a recursive call at all, but always create the g => x => … lambda and transform it conditionally:
const compose = n => f => {
const l = g => x => f(g(x));
return n > 1 ? compose(n - 1)(l) : l;
};
// same without temporary variables:
const id = x => x;
const compose = n => f => (n > 1 ? compose(n-1) : id)(g => x => f(g(x)))
What's the most elegant way to write such functions where the default arguments come first?
Using only default initialisers requires some arcane hackery:
function demo(n, f = [n, n = 1][0]) {
console.log(n, f);
}
demo(2, "f"); // 2 f
demo("g"); // 1 g
console.log(demo.length) // 1
The most straightforward way would be destructuring with a conditional operator:
function demo(...args) {
const [n, f] = args.length < 2 ? [1, ...args] : args;
console.log(n, f);
}
demo(2, "f"); // 2 f
demo("g"); // 1 g
console.log(demo.length) // 0
More in the spirit of "reversing the order of arguments" might be doing that literally:
function demo(...args) {
const [f, n = 1] = args.reverse();
console.log(n, f);
}
demo(2, "f"); // 2 f
demo("g"); // 1 g
console.log(demo.length) // 0
The latter two attempts have the drawback of requiring an extra declaration (preventing us from using concise arrow functions) and also don't reflect the actual number or required parameters in the .length.

Define function properties before function

I have an object foo that I want to call as a function foo(...). I can do that like this:
foo = n => n * foo.factor;
foo.factor = 2;
foo(2) // returns 4
But for this to work I need to write the function (n => n * foo.factor) before other properties. How can I write it after? I want to do something like this:
foo = { factor: 2 }
// write function
foo(2) // returns 4
Maybe use a small utility:
const functionize = (obj, fn) => Object.assign(fn, obj);
So one can do:
let foo = { factor: 2 };
foo = functionize(foo, n => n * foo.factor);
foo(2);
Or you just use a regular function:
foo.factor = 2;
function foo(n) { return foo.factor * n; }
I wish there was a way to define my object as a function and then later change its body...
const foo = (...args) => (foo.body || () => null)(...args);
foo.factor = 2;
foo.body = n => foo.factor * n;
foo(2);
You could do it with a simple helper:
const annotate = (f, annotations) => {
Object.assign(f, annotations);
return f;
};
...which you'd use like this:
foo = annotate(n => n * foo.factor, {factor: 2});
foo(2); // returns 4
But I wouldn't. Instead, I'd create a function builder:
const makeFoo = factor => n => n * factor;
and then:
const foo = makeFoo(2);
foo(2); // returns 4
Live example:
const makeFoo = factor => n => n * factor;
const foo2 = makeFoo(2);
console.log(foo2(2)); // returns 4
const foo4 = makeFoo(4);
console.log(foo4(2)); // returns 8

Categories