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;