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
Selected Reading
Calculating average of an array in JavaScript
Calculating the average of an array is a common task in JavaScript. The average is computed by summing all elements and dividing by the array length.
Basic Formula
Average = (Sum of all elements) / (Number of elements)
Method 1: Using forEach Loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculate Array Average</title>
</head>
<body>
<h1>Calculating Average of an Array</h1>
<p>Array: <span id="arrayDisplay"></span></p>
<button onclick="calculateAverage()">Calculate Average</button>
<p id="result"></p>
<script>
let arr = [1, 2, 3, 4, 5, 11, 22];
document.getElementById('arrayDisplay').textContent = arr.join(', ');
function calculateAverage() {
let sum = 0;
arr.forEach(item => sum += item);
let average = sum / arr.length;
document.getElementById('result').textContent =
`The average of the array = ${average}`;
}
</script>
</body>
</html>
Method 2: Using reduce Method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Average with Reduce</title>
</head>
<body>
<h1>Array Average Using Reduce</h1>
<p>Array: [10, 20, 30, 40, 50]</p>
<button onclick="calculateWithReduce()">Calculate</button>
<p id="reduceResult"></p>
<script>
function calculateWithReduce() {
let numbers = [10, 20, 30, 40, 50];
let average = numbers.reduce((sum, num) => sum + num, 0) / numbers.length;
document.getElementById('reduceResult').textContent =
`Average using reduce: ${average}`;
}
</script>
</body>
</html>
Method 3: Reusable Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reusable Average Function</title>
</head>
<body>
<h1>Reusable Average Function</h1>
<button onclick="testMultipleArrays()">Test Different Arrays</button>
<div id="multipleResults"></div>
<script>
function getAverage(array) {
if (array.length === 0) return 0;
return array.reduce((sum, num) => sum + num, 0) / array.length;
}
function testMultipleArrays() {
let results = '';
let arrays = [
[1, 2, 3, 4, 5],
[10, 15, 20],
[100, 200, 300, 400],
[]
];
arrays.forEach((arr, index) => {
let avg = getAverage(arr);
results += `<p>Array ${index + 1}: [${arr.join(', ')}] ? Average: ${avg}</p>`;
});
document.getElementById('multipleResults').innerHTML = results;
}
</script>
</body>
</html>
Comparison of Methods
| Method | Readability | Performance | Best For |
|---|---|---|---|
| forEach Loop | Good | Fast | Learning/Simple cases |
| reduce Method | Excellent | Fast | Functional programming |
| Reusable Function | Excellent | Fast | Production code |
Key Points
- Always check for empty arrays to avoid division by zero
- The
reduce()method is more concise and functional - Consider rounding the result for display purposes
- Handle edge cases like non-numeric values in production code
Conclusion
The reduce() method provides the most elegant solution for calculating array averages. Always validate input arrays and handle empty arrays to avoid errors in production applications.
Updated on: 2026-03-15T23:18:59+05:30
596 Views
Advertisements