Random List Generator (JavaScript)

One of my first big obstacles I came across when starting out my programming journey was how to generate a list at random. The problems I faced were getting the list to follow the users entered parameters and duplicating items. I want to share this bit of code and the thought process I had behind it. This will only cover the JavaScript code I used for my front end, though if you’re interested in how I set up my back end, feel free to send me a message on Twitter.

For this example, we will be taking in an array of elements and a number representing the size of list we want as parameters for our function.

function generateList(array, size) {
  let currentIndex = array.length;
  let temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  };
  return array.slice(0, size)
};

There’s a lot of numbers bouncing around back and forth with this code, but it starts to make more sense as we see it played out. When generateList is called, it takes in the parameters of array and size. Next we set our currentIndex equal to the length of the array (that way every item in the array has an opportunity to join our new list) and we instantiate temporaryValue and randomIndex to use for later.

We then enter into a while loop to allow us to shuffle each element in our array. This is where the meat and potatoes of our code is housed. We start off by setting our randomIndex equal to a random number that is within our currentIndex (achieved through the Math.random method). After selecting this number, we then reduce the currentIndex by one so we don’t repeat ourselves and to eventually bring our loop to an end.

Next comes our shuffle. This part is a bit confusing, but after letting it settle in our head, it will become much easier to understand. We start this part by setting our temporaryValue equal to the element in the currentIndex of our array. An easier way to think about this is that our temporaryValue becomes the last element in the array. We then we take our element in the randomIndex position of our array and move that to the end (our currentIndex). We then finish this cycle of our loop by replacing our randomIndex position of our array with the temporaryValue which was the last element of our array at the beginning of the cycle. Then we loop again.

As you may have noticed, we are dropping the currentIndex by one each time we loop. We are essentially picking a random element and replacing it with the last element in the array, then running through that cycle excluding the elements we’ve already placed in the back. In the case that the randomIndex is the last index in the array, that element stays put and the cycle excludes it in the following loop as normal.

We finish this entire process by taking our newly shuffled list and slicing it. The slice happens after the index correlating with size parameter. If our size is three, then we return the first three elements of the newly shuffled array.

I hope you found value in this walkthrough and explanation. If you have any more questions or want to reach out to me, send me a message on Twitter. Have a great day!