JavaScript Random Element from Array

When working with arrays in JavaScript, there are times when you need to select a random element from the array. So, in this article we will see how to get random element from array in Javascript.

Things to know before getting a random element

To get random element from array, you need to know the use of these three functions:

• Math.floor()
• Math.random()
• Array length

If you are not familiar with these functions, don’t worry, I will explain its usage:

Math.floor()

This function is used to round down a given number to the nearest integer that is less than or equal to the original number.

Ex:

Math.floor(3.7); // Output: 3
Math.floor(9.2); // Output: 9
Math.floor(-4.8); // Output: -5

In this method, we will use to to round the random value. We will use both methods like “Math.random()” and “Array length” inside the Math.floor() function

Math.random()

This function is used to generate a random floating-point number between inclusive and exclusive value. Inclusive value is 0 and the value multiplied by Math.random() function is treated as exclusive value. We don’t need to pass any of these arguments to the Math.random() function.

const random = Math.random() * 100; // Generates a random number between 0 and 100

In this example, the exclusive value is 100 because we have multiplied 100 with Math.random(), so it generates a random number between 0 and 100, such as 37.82456343.

Math.floor with Math.random()

If we generate random number inside ‘Math.floor()’ function like above example code, it returns only rounded integer value and generate random value between 0 to decrement exclusive value by 1.

const random = Math.floor(Math.random() * 10); // Generates a random integer between 0 and 9

In this above example, we have multiplied 10 with Math.random() inside Math.floor() function , so it generates a random integer number between 0 and 9, such as 5.

So if we use the Math.floor() function with the Math.random() function, the random number will not be generated as a float but returned as an integer value.

Array length

We use the length property to find the length of an array value. So, this returns the number of elements present in the array.

const array = [1, 2, 3, 4, 5];
console.log(array.length); // Output: 5

In this example, array.length returns 5 because the array contains five elements. If we find the array length and set it as Math.random() exclusive value, the array index will randomly generated within the array length

How to get random element from array?

Let’s see how to get random elements from array using Math.floor(),Math.random() and ‘Array length’.

//creating array
const colors= ["Red", "Blue", "Green", "Black", "White"];

//get random index value
const randomIndex = Math.floor(Math.random() * colors.length);

//get random array Element
const randomElement = colors[randomIndex];

//printing
document.write(randomElement);

Output:

Green

1. In this above code, we have created an array ‘colors‘ with 5 elements.
2. Then we have found the random array index value and stored it in a variable called ‘randomIndex’ using that three methods. We can use the Math.random() method inside Math.floor() to return a rounded random number and we find the exclusive value using the “colors.length”. The length of array ‘colors’ is 5, so the random index value will generated between 0 and 4.
3. Then we passed the ‘randomIndex’ to the colors array and assigns the value of the randomly selected element to the variable ‘randomElement’.
4. Finally, we printed the variable ‘randomElement’ using document.write() methods.

We can also use “parseInt()” function instead of Math.floor() to round the number, like:

const array = [1, 2, 3, 4, 5];
const randomIndex = parseInt(Math.random() * array.length);
const randomElement = array[randomIndex];

Output:

4

Conclusion

So, you can get random element from an array in JavaScript using this techniqe. Depending on the size of your array and the number of random selections needed,