Question: I have a function like that:

```
function intiFun(initValue) {

    const firstResult = firstFun(initValue);
    const secondResult = secondFun(firstResult);
    const thirdResult = thirddFun(secondResult);
    const fourthResult = fourthFun(thirdResult);
    return fourthResult;
}

```

but i want to write it better. and i dont want to save value from each function as variable.

is there any solution to to call functions with out save old value

like rxjs or somthing like that: 

```
function intiFun(initValue) {
    return firstFun(initValue).secondFun().thirddFun().fourthFun();
}

```

or more better like that:

```
function intiFun(initValue) {
    return firstFun(initValue)         
          .secondFun(secondInput)
          .thirddFun(secondInput)
          .fourthFun(secondInput)
}

function secondFun(value, secondInput) {
    return ...;
}
...

```

or some liberally to do that (maybe lodash)

Answer: 
My guess is you're looking for **function composition**: we can construct the composite function from an array of functions in JavaScript using for example `reduce` (with the initial value being the identity function `(v) => v`:

```js
const composeAll = (functions) => functions.reduce(
  (composition, f) => 
    ((v) => f(composition(v))),
  (v) => v
);

const firstFun = (s) => `${s}a`;
const secondFun = (s) => `${s}b`;
const thirdFun = (s) => `${s}c`;
const fourthFun = (s) => `${s}d`;
const intiFun = composeAll([firstFun, secondFun, thirdFun, fourthFun]);

console.log(intiFun(''));
```

**OUTPUT:**

```
abcd

```

---

**NOTES:**

As you can see, `composeAll` creates a chained function call by wrapping each function `f` in an arrow function which takes a value `v`, executes it on the composite function constructed from the preceding functions in the array and finally passes the result to `f`.

You can convince yourself that the construction is correct by induction over the array length: if we define the composition of an empty list of functions to be the identity function then

* in the **base case** (for a singleton array `[f]` with length 1) the result is 

`(v) => f((v => v)(v)) === (v) => f(v)`
* in the **step case** (for an array with length `n`) assume the function obtained for the `n-1` preceding functions in the array was correctly constructed (let this be `g`), then the result is

`(v) => f_n(g(v)) === (v) => f_n(f_n-1(...(f_0(v))...))`
The result you're looking for can be achieved using [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce).

```js
let log = (head, ...args) => { console.log('log:', head, ...args); return head },
    firstFun  = (str, ...args) => log(str, ...args) + ' firstFun',
    secondFun = (str, ...args) => log(str, ...args) + ' secondFun',
    thirddFun = (str, ...args) => log(str, ...args) + ' thirddFun',
    fourthFun = (str, ...args) => log(str, ...args) + ' fourthFun';

function initFun(initValue) {
  let functions = [
    [firstFun],
    [secondFun, 'extra argument'],
    [thirddFun],
    [fourthFun, "I'm here too"],
  ];

  return functions.reduce((result, [fn, ...args]) => fn(result, ...args), initValue);
}

console.log( 'result: ' + initFun('foo bar') );
```

Keep in mind that I log the incomming arguments of the methods, not the resulting value. This means that for example `secondFun` (`log: foo bar firstFun extra argument`) has the argument `'foo bar firstFun'` and `'extra argument'`. But you only see the added string `'secondFun'` when `thirdFun` is called (since it is given as the argument).