Query explained:
Consider:
var myArray = ['January', 'February', 'March'];
How can I select a random value from this array using JavaScript?
How to get a random value from a JavaScript array?
It’s a simple one-liner:
const randomElement = array[Math.floor(Math.random() * array.length)];
For example:
const months = ["January", "February", "March", "April", "May", "June", "July"];
const random = Math.floor(Math.random() * months.length);
console.log(random, months[random]);
Answer #2:
If you’ve already got underscore or lodash included in your project you can use _.sample
.
// will return one item randomly from the array
_.sample(['January', 'February', 'March']);
If you need to get more than one item randomly, you can pass that as the second argument in underscore:
// will return two items randomly from the array using underscore
_.sample(['January', 'February', 'March'], 2);
or use the _.sampleSize
method in lodash:
// will return two items randomly from the array using lodash
_.sampleSize(['January', 'February', 'March'], 2);
Custom function to get a random value from an array in JavaScript:
You may consider defining a function on the Array prototype, in order to create a method [].sample()
which returns a random element.
First, to define the prototype function, place this snippet in your code:
Array.prototype.sample = function(){
return this[Math.floor(Math.random()*this.length)];
}
Later, to sample a random element from the array, just call .sample()
:
[1,2,3,4].sample() //=> a random element
How to get a random value from an array in JavaScript?
Use underscore (or loDash :)):
var randomArray = [
'#cc0000','#00cc00', '#0000cc'
];
// use _.sample
var randomElement = _.sample(randomArray);
// manually use _.random
var randomElement = randomArray[_.random(randomArray.length-1)];
Or to shuffle an entire array:
// use underscore's shuffle function
var firstRandomElement = _.shuffle(randomArray)[0];
Answer #3:
1. solution: define Array prototype
Array.prototype.random = function () {
return this[Math.floor((Math.random()*this.length))];
}
that will work on inline arrays
[2,3,5].random()
and of course predefined arrays
var list = [2,3,5]
list.random()
2. solution: define custom function that accepts list and returns element
function get_random (list) {
return list[Math.floor((Math.random()*list.length))];
}
get_random([2,3,5])
Answer #4:
~~
is much faster than Math.Floor()
, so when it comes to performance optimization while producing output using UI elements, ~~
wins the game.
var rand = myArray[~~(Math.random() * myArray.length)];
But if you know that the array is going to have millions of elements then you might want to reconsider between Bitwise Operator and Math.Floor()
, as bitwise operators behave weirdly with large numbers. See below the example explained with the output.
var number = Math.floor(14444323231.2); // => 14444323231
var number = 14444323231.2 | 0; // => 1559421343
Code examples to get a random value from a JavaScript array:
var item = items[Math.floor(Math.random()*items.length)];
Using jQuery:
If you really must use jQuery to solve this problem (NB: you shouldn’t):
(function($) {
$.rand = function(arg) {
if ($.isArray(arg)) {
return arg[$.rand(arg.length)];
} else if (typeof arg === "number") {
return Math.floor(Math.random() * arg);
} else {
return 4; // chosen by fair dice roll
}
};
})(jQuery);
var items = [523, 3452, 334, 31, ..., 5346];
var item = jQuery.rand(items);
This plugin will return a random element if given an array, or a value from [0 .. n) given a number, or given anything else, a guaranteed random value!
For extra fun, the array return is generated by calling the function recursively based on the array’s length 🙂
Example to get a random element from an array in JavaScript using function:
Say you want to choose a random item that is different from the last time (not really random, but still a common requirement)…
/**
* Return a random element from an array that is
* different than `last` (as long as the array has > 1 items).
* Return null if the array is empty.
*/
function getRandomDifferent(arr, last = undefined) {
if (arr.length === 0) {
return;
} else if (arr.length === 1) {
return arr[0];
} else {
let num = 0;
do {
num = Math.floor(Math.random() * arr.length);
} while (arr[num] === last);
return arr[num];
}
}
Implement like this:
const arr = [1,2,3];
const r1 = getRandomDifferent(arr);
const r2 = getRandomDifferent(arr, r1); // r2 is different than r1.
Hope you learned something from this post.
Follow Programming Articles for more!