Going Over All Elements in the Array

Another operation we often perform on arrays is iterating over all of its values.

Using for loop

One way to do this is with a loop.

Take a look at this example:

let arr = [2, -1, 45, 3, 21, 17, 9, 20];
 
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

let i = 0 initiates the variable i which will be the index number of each array element.

The index i starts from 0, and it will increment by 1 for every iteration (i++), until it reaches a.length.

Using for...of loop

Besides using the index, you can also access each array element with a for...of loop, which looks like this:

let arr = [2, -1, 45, 3, 21, 17, 9, 20];
 
for (let ele of arr) {
  console.log(ele);
}

The variable ele will be assigned to the array element for that iteration.

Using forEach() method

If you don't want to use the for loops, there are also several built-in methods in JavaScript that allow you to iterate over the array.

The first method is forEach(). It is a general array looping function that goes over each element and performs some tasks defined by you.

For instance, this example calculates the sum of all array elements:

let arr = [2, -1, 45, 3, 21, 17, 9, 20];
let sum = 0;
 
arr.forEach(calcSum);
 
function calcSum(value, index, array) {
  sum = sum + value;
}
 
console.log(sum); // -> 116

Using map() method

The map() method also goes through all elements in the array, but it is specifically designed for array transformation.

It allows you to transform each array element, and then return the transformed result.

For example, here we are using map() to return an array whose elements are the square of the original value.

let arr = [2, -1, 45, 3, 21, 17, 9, 20];
let sum = 0;
 
let squared = arr.map(square);
 
function square(value, index, array) {
  return value ** 2;
}
 
console.log(squared); // -> [ 4, 1, 2025, 9, 441, 289, 81, 400 ]
console.log(arr); // -> [ 2, -1, 45,  3, 21, 17,  9, 20 ]

The map() method will return a new array with the transformed elements, and the original will not be changed.

Using reduce() method

The reduce() method goes through all the elements, and fold the array into a single value.

It follows this syntax:

reduce(callback, initialVal);
 
function callback(accumulator, value) {
  // Do something
  return result;
}

For each array element, the function callback will be executed. The function takes two values, accumulator and value.

value matches the current array element.

The callback does something with accumulator and value, and returns a result.

The result will be passed to the next iteration as the new accumulator.

initialVal is the initial value of accumulator.

Here is a visual illustration of this process:

The following example calculates the sum of all array elements using reduce().

let arr = [2, -1, 45, 3, 21, 17, 9, 20];
 
function calcSum(accumulator, n) {
  return accumulator + n;
}
 
const sum = arr.reduce(calcSum, 0);
console.log(sum); // 116