Creating array of length n with random numbers in JavaScript
What does Array#fill
do?
According to MDN
The
fill()
method fills all the elements of an array from a start index to an end index with a static value.
You can use Function#apply
, Array#map
, Math.floor()
, Math.random()
.
In ES6, Array#from
and Arrow function can be used.
Array.from({length: 6}, () => Math.floor(Math.random() * 9));
Array.apply(null, Array(6)).map(() => Math.floor(Math.random() * 9));
var randomArr = Array.from({length: 6}, () => Math.floor(Math.random() * 9));
document.getElementById('result').innerHTML = JSON.stringify(randomArr, 0, 4); // For demo only
<pre id="result"></pre>
In ES5:
Array.apply(null, Array(6)).map(function(item, index){
return Math.floor(Math.random() * 9);
});
var randomArr = Array.apply(null, Array(6)).map(function(item, index){
return Math.floor(Math.random() * 9)
});
document.getElementById('result').innerHTML = JSON.stringify(randomArr, 0, 4);
<pre id="result"></pre>
What is Array.apply(null, Array(n))
? Can new Array(n)
used here?
Both the above code create new array of six elements, each element having value as undefined
. However, when used new
syntax, the created array is not iterable. To make the array iterable, Array.apply(null, Array(6))
syntax is used.
If you have lodash included on page, it's really easy.
_.times(6, _.random.bind(0, 100))
^ - Number of elements in array
^ - Random number range min
^^^ - Random number range max
Note: This answer is inspired from Colin Toh's blog
var randoms = Array(4).fill(Math.floor(Math.random() * 9));
This line of code will create a list of 4 of the same number because fill
takes a single value and repeats it for the length of the list. What you want to do is run the random number generator each time:
var makeARandomNumber = function(){
return Math.floor(Math.random() * 9);
}
var randoms = Array(5).fill(0).map(makeARandomNumber);
console.log(randoms)
// => [4, 4, 3, 2, 6]
https://jsfiddle.net/t4jtjcde/
Short and simple ES6 approach -
// randomly generated n = 4 length array 0 <= array[n] <= 9
var randoms = Array.from({length: 4}, () => Math.floor(Math.random() * 10));
Enjoy!
I wonder if it's possible to get the right result with a one-liner...
var randoms = [...Array(4)].map(() => Math.floor(Math.random() * 9));
document.body.innerText = randoms;