This article will demonstrate how to create an array containing a cumulative sum at each index from an array of integers in JavaScript.

The Cumulative Sum is defined as the partial sum total for the given sequence and all its previous values at a certain index. It is also known as the running sum as it keeps on adding the sum of all previous values. For instance, consider the below array:

Arr = [ 2, 7, 9, 4, 3 ]

The Cumulative sum at every index will be:

0 : 2
1  : 2 + 7 = 9
2 : 2 + 7 + 9 = 18
3 : 2 + 7 + 9 + 4 = 22
4 : 2 + 7 + 9 + 4 + 3 = 25

Hence, the resulting array will be:

Cumulative Sum = [ 2, 9, 18, 22, 25 ]

Methods to Create Cumulative Sum Array

It can be done with the following methods:

Method 1: Using JavaScript Loops

Looping in JavaScript is a feature that facilitates the execution of a set of instructions/functions repeatedly while some condition evaluates to true.

Syntax:

while(condition) {
      // JavaScript code
}

Example: In this example, we will demonstrate how to create an array having a cumulative sum using JavaScript for loop.

// Initialize input array
const arr =  [2,7,9,4,3];

// Initialize required array with first value
let cumulativeSum = [arr[0]];
let i = 1;

// Used while loop to iterate and
// perform transformations
while (i < arr.length) {
    cumulativeSum.push(arr[i] + cumulativeSum[i - 1]);
    i++;
}

// Display Output
console.log(cumulativeSum);

[ 2, 9, 18, 22, 25 ]

Method 2: Using JavaScript array.map() Method

The Javascript map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is used to iterate and perform iterations over an array.

Syntax:

map((element) => { /* … */ })

Example: In this example, we will see how to create an array having a cumulative sum using JavaScript array.map() map.

// Create a new array
const arr = [1, 3, 5, 7, 9, 11];

// Variable to store sum
let sum = 0;

// Creating final array
let cumulativeSum = []

// Using map to perform transformations
arr.map((e)=>{
      sum = sum + e;
      cumulativeSum.push(sum);
})

// Display output
console.log(cumulativeSum);

[ 1, 4, 9, 16, 25, 36 ]

Method 3: Using JavaScript array.forEach() Method

The array.forEach() method calls the provided function once for each element of the array. The provided function may perform any kind of operation on the elements of the given array.

Syntax:

array.forEach( callback( element, index, arr ), thisValue )

Example: In this example, we will create Cumulative Sum Array using JavaScript array.map() method.

// Create an array
const arr = [1, 3, 5, 7, 9, 11];

// Create variable to store sum
let sum = 0;

// Create resulting array
let cumulativeSum = []

// Using forEach method to iterate
// and perform required operation
arr.forEach((e)=>{
      sum = sum + e;
      cumulativeSum.push(sum);
})

// Display the output
console.log(cumulativeSum);

[ 1, 4, 9, 16, 25, 36 ]

Method 4: Using JavaScript array.reduce() Method

The Javascript arr.reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left to right) and the return value of the function is stored in an accumulator. 

Syntax: 

array.reduce( function(total, currentValue, currentIndex, arr), initialValue );

Example: This example will demonstrate how we can create an array having a cumulative sum using JavaScript array.reduce() method.

// Declare new array
const arr = [1, 3, 5, 7, 9, 11];

// Initialize cumulative array 
let cumulativeSum = [];

// Callback function to execute in reduce method
function execute(sum,element){
  sum = sum + element;
  cumulativeSum.push(sum);
  return sum
}

// Using array.reduce with the Callback function
arr.reduce(execute,0);

// Display output
console.log(cumulativeSum);

[ 1, 4, 9, 16, 25, 36 ]

Method 5: Using a Generator Function:

A generator function can create an array of cumulative sums by iterating through the input array and yielding the cumulative sum at each step. By using the spread operator (…) with the generator function, you can generate the cumulative sum array efficiently.

Example: In this example we defines a generator function cumulativeSumGenerator that yields cumulative sums of an array. It iterates through array, updates the sum, and yields it. The result is converted to an array using the spread operator.

function* cumulativeSumGenerator(array) {
  let sum = 0;
  for (const element of array) {
    sum += element;
    yield sum;
  }
}

const array = [1, 2, 3, 4, 5];
const cumulativeSumArray = [...cumulativeSumGenerator(array)];
console.log(cumulativeSumArray); 

[ 1, 3, 6, 10, 15 ]

Method 6: Using Array reduce() and Spread Operator

This approach leverages the reduce() method in combination with the spread operator (…) to compute the cumulative sum array efficiently.

Eaxmple:

// Input array
const arr = [2, 7, 9, 4, 3];

// Calculate cumulative sum using reduce and spread operator
const cumulativeSum = arr.reduce((acc, curr, index) => {
    acc.push(curr + (acc[index - 1] || 0));
    return acc;
}, []);

// Display Output
console.log(cumulativeSum); // Output: [ 2, 9, 18, 22, 25 ]

[ 2, 9, 18, 22, 25 ]