<script>
var numbers = [5, 2, 15, 7, 9, 3, 8, 25, 3, 10, 11];
for(var i = 0; i < numbers.length; i++){
console.log(numbers[i]);
}
</script>
The for loop goes through each element in the array and logs the value to the browser console.
Another useful JavaScript feature to go through each array element is by using the method reduce built-in on arrays. The method passes through each array element to reduce the values to a single value. This can be used to accumulate the element values into a single value.
The code below takes an array of numbers and uses the reduce method to get the element with the highest value divisible by the first element value:
The array numbers holds integer values for each of its element. The JavaScript code is to take the first element and divide the remaining elements by the value. The code checks if the quotient is divisible (no remainder), and determines which divisible value is the highest.
The array numbers has 5 as the value of the first element. Scanning the remaining elements, we see that there are three element values divisible by 5: 15, 25 and 10.
The variable divisor takes the value of the first array element. This is the value which array elements starting from the second up to the last will be divided by.
The reduce method of the array has a callback function as its parameter. Callback functions, in turn, can have four parameters: previous value, current value, index and the array calling the reduce method.
In the code provided, only two parameters will be used. The start will hold the previous value passed to the callback, while the current will hold the current element in the callback.
On the first loop of the reduce method, start parameter is initialized to the first array element value, 5 while the current parameter takes the second array element value, 2:
The current value, 2 is divided by the divisor value, 5. Since divisor was declared outside the callback method, the method can "see" or access the divisor. Since the quotient will return a value, the condition check will return a True value. The True value is reversed, and the condition check is evaluated to false. the first loop of the reduce method will then return the start value of 5.
On the next loop, the reduce method will assign the next element value, 15 to the current parameter. The start parameter takes the returned value of the previous loop, 5. The quotient of the current value 15 over the divisor, 5 will yield a value of zero, corresponding to false, which is then reversed to true.
The check of current value, 15 greater than start value, 5 will evaluate to true. The current value, 15 is then returned. On the next, loop, the start parameter will now take this value.
On the loop that follows, the reduce method will assign the value of the next array element, 7 to the current parameter. The start parameter takes the returned value from the previous loop, which is 15. The quotient of the current value, 7 over the divisor, 5 will yield a value, corresponding to true, which is reversed to false. The loop will return the start value, 15.
The start value of 15 is retained, until the reduce method assigns the current parameter to array value 25. The loop will then return the value 25.
The start value of 25 will be retained even until the reduce method loops through the last array element. When the reduce method reaches the array element value 10, the loop determines that 10 is divisible by 5. However, the check of current value 10 greater than start value will evaluate to false. The loop will still return the value 25.
The full code can be accessed on my GitHib account:
Resources on array reduce method may accessed on the links below:
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
- https://www.airpair.com/javascript/javascript-array-reduce
