The Accumulator Pattern

A pattern is a commonly-used approach to solve a group of similar programming problems.

This section introduces your first pattern, which we will explore in-depth after looking at a motivating example.

Adding 1…n

Let’s write a program that adds up the integers 1…n, where n is an integer variable that we will create.

If you were to do this with pen and paper, you would write out a single formula and compute the answer. For example, for n = 6 you would write:

1 + 2 + 3 + 4 + 5 + 6

To get the result, you would first add 1 and 2 to get 3. Then you would add 3 and 3 to get 6. Then you would add 6 and 4 to get 10, and so on. The final result is 21.

We can carry out this same procedure in code using a loop.

Example
1
2
3
4
5
6
7
8
let n = 6;
let total = 0;

for (let i = 1; i <= n; i++) {
   total += i;
}

console.log(total);

Console Output

21

The variable total is initialized to 0. The loop executes once each for the values of i from 1 to 6. Each time the loop body executes, the next value of i is added to total.

The loop carries out the same basic algorithm that we used to compute the sum 1 + 2 + 3 + 4 + 5 + 6 by hand. The only step that may seem different to you is the use of the variable total to keep track of the running total. When calculating the sum using pen and paper, we rarely write down this part, keeping track of the running total in our head. With programming, however, we must explicitly store such a value in a variable.

This pattern of initializing a variable to some basic, or empty value, and updating it within a loop is commonly referred to as the accumulator pattern. We refer to the variable as the accumulator. In the example above, total is the accumulator, and it “accumulates” the individual integers one by one.

The accumulator pattern comes up regularly in programming. The key to using it successfully is to initialize the accumulator variable before you start the iteration. Once inside the loop, update the accumulator.

Reversing a String

While some programming languages have a string method that will reverse a given string, JavaScript does not. Let’s see how we can write our own program that reverses a string using the accumulator pattern. Open up Reversing-a-String.js in loops/chapter-examples in javascript-projects to experiement with this use of the accumulator pattern.

We’ll start by initializing two variables: the string we want to reverse, and a variable that will eventually store the reversed value of the given string.

1
2
let str = "blue";
let reversed = "";

Here, reversed is our accumulator variable. Our approach to reversing the string will be to loop over str, adding each subsequent character to the beginning of reversed, so that the first character becomes the last, and the last character becomes the first.

Example
1
2
3
4
5
6
7
8
let str = "blue";
let reversed = "";

for (let i = 0; i < str.length; i++) {
   reversed = str[i] + reversed;
}

console.log(reversed);

Console Output

eulb

Notice that we don’t use the += operator within the loop, since reversed += str[i] is the same as reversed = reversed + str[i].

Let’s break this down step-by-step. This table shows the values of each of our variables after each loop iteration.

Loop iterationistr[i]reversed
(before first iteration)not definednot defined""
10"b""b"
21"l""lb"
32"u""ulb"
43"e""eulb"
Example

What happens if you reverse the order of the assignment statement within the for loop, so that reversed = reversed + str[i];?

Summing an Array

Another common use of the accumulator pattern is to compute some value using each of the elements of an array. This is similar to adding 1…n as we did above, with the difference being we will use the items in an array rather than 1…n.

Example
1
2
3
4
5
6
let numbers = [2, -5, 13, 42];
let total = 0;

for (let i = 0; i < numbers.length; i++) {
   total += numbers[i];
}

Console Output

52