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 an array with random values with the help of JavaScript?
In JavaScript, creating arrays filled with random values is a common requirement for simulations, games, and testing. The Math.random() method generates random numbers between 0 (inclusive) and 1 (exclusive), which can be combined with various array methods to create arrays of random values.
Using Math.random() with For Loop
The most straightforward approach uses a for loop with Math.random() to populate an array:
Syntax
// Random decimals between 0 and 1 for (let i = 0; iExample
<html> <body> <p id="array"></p> <script> let randomArr = []; for (let i = 0; i < 10; i++) { randomArr.push(Math.floor(Math.random() * 100) + 1); } document.getElementById("array").innerHTML = "Random array: " + JSON.stringify(randomArr); </script> </body> </html>Random array: [23,67,45,12,89,34,56,78,91,25]Using Array.from() Method
The
Array.from()method creates a new array with a specified length and fills it using a mapping function:<html> <body> <p id="array2"></p> <script> const randomArr = Array.from({length: 8}, () => Math.floor(Math.random() * 50) + 1); document.getElementById("array2").innerHTML = "Array.from result: " + JSON.stringify(randomArr); </script> </body> </html>Array.from result: [15,42,8,33,27,19,46,11]Using Array.fill() with map()
This method creates an array, fills it with placeholder values, then maps each element to a random value:
<html> <body> <p id="array3"></p> <script> let result = new Array(6).fill(0).map(() => Math.floor(Math.random() * 100) + 1); document.getElementById("array3").innerHTML = "Array.fill result: " + JSON.stringify(result); </script> </body> </html>Array.fill result: [73,29,84,16,52,95]Comparison
| Method | Readability | Performance | Use Case |
|---|---|---|---|
| For Loop | Good | Fast | Simple arrays, complex logic |
| Array.from() | Excellent | Good | Functional programming style |
| Array.fill() + map() | Good | Good | When you need intermediate steps |
Random Values in Different Ranges
To generate random integers within specific ranges:
<html>
<body>
<p id="ranges"></p>
<script>
// Random integers between 1-10
const small = Array.from({length: 5}, () => Math.floor(Math.random() * 10) + 1);
// Random integers between 50-150
const large = Array.from({length: 5}, () => Math.floor(Math.random() * 101) + 50);
document.getElementById("ranges").innerHTML =
"Small range (1-10): " + JSON.stringify(small) + "<br>" +
"Large range (50-150): " + JSON.stringify(large);
</script>
</body>
</html>
Small range (1-10): [7,3,9,1,5] Large range (50-150): [127,89,134,76,103]
Conclusion
JavaScript offers multiple approaches to create arrays with random values. Use Array.from() for clean, functional code, for loops for complex logic, and Array.fill() when you need intermediate processing steps.
7K+ Views
