Coding Newbie

How To Get Random Array Item In JavaScript

Getting a random array item in JavaScript is not that complicated as it may seem. You can accomplish it with just one line of code and with two inbuilt functions: Math.floor and Math.random.

In order to better understand what arrays are and how do arrays behave, please read the article Learn JavaScript Arrays Quickly And Easily.

How To Get Random Array Item

As already said, getting random item from an array is quite straightforward process. We use two Math functions to determine a random number for item’s position in array, and then store that item in a variable.

Line of code to get random item is:

let randomArrayItem = itemsArray[Math.floor(Math.random() * itemsArray.length)];

Or in example:

let itemsArray = [18 , 27 , 6447 , 'apple' , 71, , 'a' , 'b' , 377 , 'pear' , 4];

let randomArrayItem = itemsArray[Math.floor(Math.random() * itemsArray.length)];

The code above will get one item from itemsArray and store it as randomArrayItem.

(We used let as a variable declaration. If you are not familiar with it, or you are but want to know more about difference between let and var, please read the post VAR And LET: All You Must Know About JavaScript Variables.

If you are interested to understand random array item code, we will discuss step by step and explain all details below.

  • How to target array item ?
  • What is Math.random() ?
  • Why do we multiply with array length ?
  • What is Math.floor() ?
  • All together…

How to target array item ?

To target array items, we just use following syntax: arrayName[array item index].

So, if we want to target number 27 in our array above, which is the second item by order in our array, we will use the index number (which represents item’s position).

As first item has index 0, second will have 1, etc.

So, to get number 27, we will use following code:

let itemsArray = [18 , 27 , 6447 , 'apple' , 71, , 'a' , 'b' , 377 , 'pear' , 4];

let randomArrayItem = itemsArray[1]

However, we want random item, so we need random index number. To achieve this, we use Math.random combined with array length.

What is Math.random ?

Math.random() function gives us the random number between 0 and 1 (but never exactly 0 or 1).

Ok, but what to do with the number between 0 and 1? We need numbers that are equivalent to our array items indexes, which are integers, whole numbers, and not some fractional numbers between 0 and 1.

This is where multiplying with array length comes to scene.

Why do we multiply with array length ?

The length command returns the number of elements in that specific array.

So in our itemsArray, if we do itemsArray.length we will get number 10, as that is the number of items in our array.

Ok, we have the number of our items, but why we multiply it with random number between 0 an 1 ?

The logic is this:

Math.random() gives us the number between 0 and 1, and by multiplying that number with number of items, we now have the random number which is between 0 and arrays length.

let randomArrayItem = itemsArray[Math.random() * itemsArray.length];

Perfect! But why is that not enough, but we add Math.floor in front of (Math.random() * itemsArray.length) ?

What is Math.floor ?

Keep in mind the fact that Math.random gave us a fractional number, and not an integer. Our array items indexes are integers, whole numbers. In addition, if Math.random gives us 0.991 . multiplying with array length (which is 10 in our example) will gives the number 9.91 and that is closer to a number 10. However, if we have 10 items, acknowledging the fact that first item index is 0, and not 1, last (10th) item in an array will have an index of 9.

Therefore, we need a function which will not only round the fractional number, but also ‘floor’ it down to lower integer. And that is exactly what Math.floor does.

The Math.floor() method rounds a number DOWNWARDS to the nearest integer.

And with the help of Math.floor, in our example after getting the result 9.91, Math.floor rounds it downward to a number 9, which is the index number of our 10th array item.

let randomArrayItem = itemsArray[Math.floor(Math.random() * itemsArray.length)];

All together…

The entire process is as following:

  • Use Math.random() to get a random number between 0 and 1.
  • Multiply that number with array.length, to get a number between 0 and total number of array items.
  • Use Math.floor() on the result to round it to lower integer, which will give us a whole number between (including) 0 and array.length – 1 .
  • We will use that final result as the index number of our array item.

Final result:

let item = array[Math.floor(Math.random() * array.length)];

Conclusion

In this article we have learned what line of code we can use to get random item from an array.

In addition, we gone through the entire process and functions we used to achieve final result. We use two inbuilt JavaScript functions, Math.random() and Math.floor().

Combined with the use of array.length property, we can get a random integer number we can use as an index to target random array item.

%d bloggers like this: