Array map with accumulator in JavaScript

Question

How to use Array map with accumulator?

Lets have a list of numbers and find a list of current sums. Example:

const nums = [1, 1, 1, -1, -1];
const sums = [1, 2, 3,  2,  1];

I try to do it with map, by using accumulator in a thisArg because according to: MDN Array.prototype.map()

thisArg - value to use as this when executing callback.

I provide an object with acc set to 0 as thisArg:

const actual = nums.map(val => this.acc += val, {acc: 0});

require('assert').deepEqual(actual, sums);

It crashes with error:

AssertionError: [ 1, 2, 3, 2, 1 ] deepEqual [ NaN, NaN, NaN, NaN, NaN ]

The test passes with an external accumulator:

let   acc    = 0;
const actual = nums.map(val => acc += val);

Answer 1

With using arrow functions, you loose this in the function, which is already set from the outer space.

You could use a function statement and thisArg.

const nums = [1, 1, 1, -1, -1];
const actual = nums.map(function (val) { return this.acc += val; }, { acc: 0 });

console.log(actual);

For keeping a arrow function, you could use a closure over the accumulator,

(acc => val => acc += val)(0)  // complete closure with callback

which works in two steps, first it calls the function directly with a value for acc

(acc =>                  )(0)  // function for generating a closure over acc

and returns the inner function as a callback for Array#map

        val => acc += val      // final callback

with a closure over acc, that means the scope of acc is inside of the own function and inside of the returned callback.

const nums = [1, 1, 1, -1, -1];
const actual = nums.map((acc => val => acc += val)(0));

console.log(actual);

Answer 2

You can use Array.prototype.reduce() instead. This will not require you to create additional closure for arrow function and provide accumulator as regular argument.

const nums = [1, 1, 1, -1, -1]
const actual = nums.reduce(
    (acc, val) => (acc.push((acc[acc.length-1] || 0) + val), acc), []
)

console.log(actual) // [1, 2, 3, 2, 1]

Edit:

If you concerned about performance, here is a jsPerf for comparison with your's and @Nina's options:

• .map() with standard function - 27% slower in Firefox and 5% faster in Chrome than .map() with factory function
• .reduce() is 94% slower in Firefox and 52% slower in Chrome than fastest of two above.
• your own option (with external accumulator) is 75% faster than .map() with standard function!