Calculate the sum of an array of numbers
How to solve it
There are several approaches to solve this challenge. All of them have in common that you have to iterate through all array elements. In each iteration, you increase the value of some type of container by the value of the current element. After you have done this with all array elements, the container value equals the sum of all elements.
I will explain the 2 most common approaches to tackle this problem (there are many more). Both of them involve very important pieces of JavaScript code that you will encounter many times as a JavaScript developer.
1. for-loop
This is the most basic approach for this challenge, but also the one that involves most code. In a for-loop, a specific piece of code is being executed again and again until a certain condition is met. The syntax of a for-loop is the following:
for (beforeAll; condition; afterEach) { do something } - beforeAll is a piece of code that is being executed before the entire loop runs.
- condition is a conditional expression that evaluates before each iteration. If it returns false, the loop terminates before the next iteration. If it returns true, the loop continues.
- afterEach is a piece of code that is being executed after each iteration.
- The code that you want to execute during an iteration has to be placed inside the curly braces
The following is a simple example of a for-loop:
for (let i = 0; i < 5; i++) {
console.log(i);
};
// output: 0
// output: 1
// output: 2
// output: 3
// output: 4 Before the first iteration, the variable i is initialized with value 0. The loop is being executed as long as the value of i is smaller than 5. In each iteration, the current value of i is printed out to the console. After each iteration, the value of i is incremented by 1 (
i++;) This can be applied to the present challenge:
const arr = [1,2,3];
let container = 0;
for (let i = 0; i < 3; i++) {
container += arr[i]
};
console.log(container);
// output: 6; The variable container is the container that we can modify during the loop runs. It has an initial value of 0. The loop runs as long as the value of i is smaller than 3 - which is the number of elements in the array. In each iteration we add the current element value to the variable container.
You can use this code to solve the present challenge. But, you have to slightly adjust it. Hint: the number of array elements is not the same in each test case 😉.
2. array reduce
The array.reduce method is one of my most preferred array methods in JavaScript. It is very powerful and allows you to apply very complex logics in few lines of code. But, it might be more difficult to understand in some contexts.
The reduce method also iterates through all elements of an array. It takes two parameters: a function that executes in each iteration and an (optional) initial value. The basic syntax is the following:
const arr = [1,2,3];
const result = arr.reduce((container,current) => returnSomething, initialValue);
- container is the counterpart of the container variable from our for-loop. I like to think about it as the current state of the process. After all iterations, the final container value will be returned.
- current is the array element of the current iteration.
- returnSomething can be any JavaScript statement that returns a value. The value that it returns replaces the current container value.
- initialValue will be the value of container during the first iteration.
The problem of the present challenge is one of the most basic use cases for the reduce method. The following code will do the exact same thing as our for-loop example. Try to compare the two approaches.
const arr = [1,2,3];
const sum = arr.reduce((container,current) => container + current, 0);
console.log(sum);
// output: 6 The initial value is 0. So, in the first round, the value of container will be 0. We add the value of the current element and return the result. The result will be the new container value for the next iteration, and so on and so fourth.