如何避免JavaScript中函数输出的多个变量重新声明

Question

Consider the following example

function doSomethingToAVariable(variable){
    return variable + 1
}

function doSomethingToAVariableASecondTime(variable){
    return variable + 2
}

function doSomethingToAVariableLastly(variable){
    return variable + 3
}

var myVariable = 0;
myVariable = doSomethingToAVariable(myVariable);
myVariable = doSomethingToAVariableASecondTime(myVariable);
myVariable = doSomethingToAVariableLastly(myVariable);

console.log(myVariable); // 6

How do I avoid the nasty myVariable re-declarations? Could wrapping each of the functions into a Promise chain be a solution?

Answer 1

Function composition to the rescue.
Take a look at libraries for functional programming, like Ramda, or lodash-fp.

here a plain JS snippet to compose functions:

//the compose-method you find in your regular FP-libs
var compose = (...funcs) => (value) => funcs.reduceRight((v,fn)=>fn(v), value);
//or a function wich takes the functions in opposite order, 
//wich might be more common to you
var pipe = (...funcs) => (value) => funcs.reduce((v,fn)=>fn(v), value);

compose is a direct mapping of the composition you try to build

var composition = (value) => a(b(c(value)));
var composition = compose(a, b, c);
//it calls the functions from right to left

pipe is more oriented on your known imperative style to process a value step by step

var composition = function(value){
    value = c(value);
    value = b(value);
    value = a(value);
    return value;
}
//pipe the value through c, then through b, then through a
var fn = pipe(c, b, a);
//wich in the end does exactly the same as the code built by compose

so back to your code:

var composition = pipe(
    doSomethingToAVariable,
    doSomethingToAVariableASecondTime,
    doSomethingToAVariableLastly
);
//or
var composition = compose(
    doSomethingToAVariableLastly,
    doSomethingToAVariableASecondTime,
    doSomethingToAVariable
);

//and run it
var myVariable = composition(0);

Answer 2

If you want to chain then you need to return the object instead which will contain the final value

function variableOperations( initialValue )
{
  this.value = initialValue;
  this.someOp1 = function(){ this.value += 1; return this; } 
  this.someOp2 = function(){ this.value += 2; return this; } 
}

var a = new variableOperations(1); //new object
a.someOp1().someOp2();

alert(a.value); //alerts 4

Answer 3

In this case you're looking for what's called "function composition":

var myVariable = doSomethingToAVariableLastly(doSomethingToAVariableASecondTime(doSomethingToAVariable(0)));

but this is clearly not readable with such long function names.

Promises are typically only useful for asynchronous operations, and whilst they'd work in this scenario, the result would be inefficient and would introduce async dependencies where none are needed:

var promise = doSomethingToAVariable(0);
        .then(doSomethingToAVariableASecondTime);
        .then(doSomethingToAVariableLastly);

since you can only access the final result from the end of the chain of .then callbacks:

promise.then(function(myVariable) {
    // myVariable is now 6, and in scope
}

// but it's not in scope or usable here

Answer 4

Why not take a look at a functional approach with Ramda?

R.compose(
  doSomethingToAVariableLastly,
  doSomethingToAVariableASecondTime,  
  doSomethingToAVariable
)(myVariable)

Answer 5

In my humble opinion, your code is perfectly fine.

But, you can do something like this if you really want to "chain" the calls. It is a bit less efficient though.

 function chainCalls(initVal, funcs){ return funcs.reduce(function(val, f){ return f(val); }, initVal || 0); } function doSomethingToAVariable(variable){ return variable + 1 } function doSomethingToAVariableASecondTime(variable){ return variable + 2 } function doSomethingToAVariableLastly(variable){ return variable + 3 } var myVariable = chainCalls(0, [doSomethingToAVariable, doSomethingToAVariableASecondTime, doSomethingToAVariableLastly]); document.write(myVariable); 

Another alternative is to create a reusable function chain like this.

 function functionChain(){ var funcs = arguments; return function(value){ return Array.prototype.reduce.call(funcs, function(value, f){ return f(value); }, value); }; } function doSomethingToAVariable(variable){ return variable + 1 } function doSomethingToAVariableASecondTime(variable){ return variable + 2 } function doSomethingToAVariableLastly(variable){ return variable + 3 } var myVariable = functionChain( doSomethingToAVariable, doSomethingToAVariableASecondTime, doSomethingToAVariableLastly )(0); document.write(myVariable); 

Answer 6

If it's as simple as adding some things together how about a recursive method. A bit like using promises but without actually using them.

function add(x) {
  return {
    done: () => x,
    add: (y) => add(x + y)
  }
}

let myVariable = 0;
add(myVariable).add(1).add(2).add(3).done(); // 6

DEMO