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 create a dynamic length array with numbers and sum the numbers using JavaScript?
In JavaScript, arrays are always dynamic in length. Unlike some programming languages, we don't need to define the array's length while creating it. We can create an array and push whatever number of elements we want. Here, we will create a dynamic length array with numbers and sum all its elements.
Using For Loop to Sum Array Elements
We can iterate over the array using a for loop and add every element to get the sum. Let's look at both traditional for loops and for-of loops.
Syntax
let arraySum = 0;
for (let i = 0; i < array.length; i++) {
arraySum += array[i];
}
Example: Random Dynamic Array with For Loop
This example generates a random length array with random values and calculates their sum:
<html>
<body>
<h2>Using for-loop to add all elements of dynamic array</h2>
<div id="output"></div>
<script>
let output = document.getElementById('output');
// Generate random length between 5 and 10
let length = Math.floor(Math.random() * 6) + 5;
let dynamicArray = [];
// Fill array with random numbers
for (let i = 0; i < length; i++) {
dynamicArray[i] = Math.floor(Math.random() * 10) + 1;
}
// Calculate sum using for loop
let arraySum = 0;
for (let i = 0; i < length; i++) {
arraySum += dynamicArray[i];
}
output.innerHTML += "Array: [" + dynamicArray.join(", ") + "]<br/>";
output.innerHTML += "Array length: " + length + "<br/>";
output.innerHTML += "Sum: " + arraySum;
</script>
</body>
</html>
Example: Using For-Of Loop
The for-of loop provides a cleaner syntax for iterating through array elements:
<html>
<body>
<h2>Using for-of loop to sum dynamic array</h2>
<div id="output"></div>
<script>
let output = document.getElementById('output');
// Create array with user-defined values
let dynamicArray = [5, 12, 8, 3, 17, 9, 6];
let sum = 0;
// Using for-of loop
for (let element of dynamicArray) {
sum += element;
}
output.innerHTML += "Array: [" + dynamicArray.join(", ") + "]<br/>";
output.innerHTML += "Sum using for-of: " + sum;
</script>
</body>
</html>
Using Array.reduce() Method
The reduce() method provides a more functional approach to sum array elements. It reduces the array to a single value by applying a function to each element.
Syntax
let sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
Example: Sum with Reduce Method
<html>
<body>
<h2>Using reduce() method to sum dynamic array</h2>
<div id="output"></div>
<script>
let output = document.getElementById('output');
// Create dynamic array
let numbers = [];
let arrayLength = 8;
// Fill with random numbers
for (let i = 0; i < arrayLength; i++) {
numbers.push(Math.floor(Math.random() * 20) + 1);
}
// Sum using reduce method
let totalSum = numbers.reduce((sum, current) => sum + current, 0);
output.innerHTML += "Array: [" + numbers.join(", ") + "]<br/>";
output.innerHTML += "Sum using reduce(): " + totalSum;
</script>
</body>
</html>
Comparison of Methods
| Method | Readability | Performance | Functional Style |
|---|---|---|---|
| For Loop | Good | Fastest | No |
| For-Of Loop | Better | Good | Partial |
| Array.reduce() | Best | Good | Yes |
Conclusion
JavaScript offers multiple ways to sum dynamic array elements. Use for loops for maximum performance, for-of loops for better readability, or reduce() for functional programming style. All methods work effectively with arrays of any length.
1K+ Views
