Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find the sum of all elements of a given array in JavaScript?
In JavaScript, finding the sum of all elements in an array is a common operation. This tutorial covers different methods to achieve this, from traditional loops to modern array methods.
Using the for Loop
The for loop is the most straightforward approach to sum array elements. It provides full control over the iteration process and is easy to understand.
Example
<!DOCTYPE html>
<html>
<head>
<title>Sum Array Elements</title>
</head>
<body>
<h2>Finding sum using <i>for</i> loop:</h2>
<div id="array"></div>
<div id="result"></div>
<script>
const data = [2, 4, 6, 8];
let sum = 0;
for (let i = 0; i < data.length; i++) {
sum += data[i];
}
document.getElementById("array").innerHTML = "Array = [" + data + "]";
document.getElementById("result").innerHTML = "Sum of All Elements: " + sum;
</script>
</body>
</html>
Finding sum using for loop: Array = [2,4,6,8] Sum of All Elements: 20
Using the reduce() Method
The reduce() method provides a more functional approach to sum array elements. It applies a function to each element from left to right and returns a single accumulated value.
Syntax
array.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue)
Example
<!DOCTYPE html>
<html>
<head>
<title>Sum Array Elements</title>
</head>
<body>
<h2>Finding sum using <i>reduce()</i> method:</h2>
<div id="array"></div>
<div id="result"></div>
<script>
const arr = [2, 4, 6, 8];
const sum = arr.reduce((accumulator, current) => accumulator + current, 0);
document.getElementById("array").innerHTML = "Array: [" + arr + "]";
document.getElementById("result").innerHTML = "Sum of all elements: " + sum;
</script>
</body>
</html>
Finding sum using reduce() method: Array: [2,4,6,8] Sum of all elements: 20
Using for...of Loop
The for...of loop provides a cleaner syntax when you don't need the index values.
<!DOCTYPE html>
<html>
<head>
<title>Sum Array Elements</title>
</head>
<body>
<h2>Finding sum using <i>for...of</i> loop:</h2>
<div id="result"></div>
<script>
const numbers = [10, 20, 30, 40];
let total = 0;
for (const num of numbers) {
total += num;
}
document.getElementById("result").innerHTML = `Array: [${numbers}] | Sum: ${total}`;
</script>
</body>
</html>
Finding sum using for...of loop: Array: [10,20,30,40] | Sum: 100
Comparison
| Method | Readability | Performance | Best For |
|---|---|---|---|
| for loop | Good | Fastest | Large arrays, performance critical |
| reduce() | Excellent | Good | Functional programming, readability |
| for...of | Very Good | Good | Simple iteration without indices |
Conclusion
The reduce() method is generally preferred for its readability and functional approach, while traditional for loops offer better performance for very large arrays. Choose the method that best fits your coding style and performance requirements.
1K+ Views
