Retrieve Random Item from an Array in Javascript
Retrieve a random item from an array is a common task and fairly easy to implement. There are many ways to achieve that and I am going to discuss a few of them
So let’s figure out how to accomplish it.
Here, Firstly we create an array using the array literal syntax( [ ] ).
const fruits = ["Apple", "Banana", "Avocado", "Blackberries", "Grapes"];
Methods to get a random item from an array
common Method
In the normal method, we are using Math.random()
function to generate a number between 0–1
(inclusive of 0, but not 1) randomly.
const random = Math.random();
Now, we can get the total length of the fruits
array.
const totalFruits = fruits.length
Then multiply the random number with the length of the array.
const randIndex = Math.floor(random * totalFruits)
In the above code, we used Math.floor()
function to result to make it a whole number.
Now we get the random item by using randIndex
const randomFruits = fruits[randIndex]
Here we can write the above code in a single line.
const random = fruits[Math.floor(Math.random() * fruits.length)]; console.log("Random Fruit:", random); // => Random Fruit: Banana
Instead of using Math.floor()
we can also use ~~
. It is much faster than the Math.floor()
. So when it comes to performance optimization while producing output using UI elements. ~~
wins the game.
var random = fruits[~~(Math.random() * fruits.length)];console.log("Random Fruit:", random); // => Random Fruit: Banana
But if you know that the array is going to have millions of elements then you might want to reconsider between the bitwise operator
and Math.floor()
. as bitwise operator behave weirdly with large numbers because it clamps to a 32-bit integer. See the below example explained with the output.
const number = Math.floor(14444323231.2); // => 14444323231const number = 14444323231.2 | 0; // => 1559421343
By underscore.js and lodash.js
If you have already got underscore & lodash included in your project you can use _.sample
const random = _.sample(fruits);console.log("Random Fruit:", random); // => Random Fruit: Blackberries
The above method will return one item randomly from the array. If you want to get one or more random item from an array then you can pass one more argument in the underscore
const random = _.sample(fruits, 2);
for lodash use a _.sampleSize
method
const random = _.sampleSize(fruits, 2);
Prototype Method
We can make an array prototype sample
Array.prototype.sample = function(){
return this[Math.floor(Math.random()*this.length)];
}
Now:
const random = fruits.sample()console.log("Random Fruit:", random); // => Random Fruit: Blackberries
Thanks for reading 😄. If there is anything I have missed, or if you have a better way to do it, then please let me know.
let’s connect on Twitter.