Consecutively return a random item from a JavaScript array

#javascript

The other week I was working on a side project where I needed to consecutively return a random item from an array via a button click.

To do this, I first created a function that returns a random item from an array.

function randomItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

The problem with using only the randomItem function here, is that it was not uncommon to return the same item twice in a row.

To fix that issue, I made use of a do...while loop to call the randomItem function until it returned a result which is not equal to the previously selected item.

So while prevItem is equal to currentItem, run the randomItem function.

var fruit = ['Apples', 'Oranges', 'Pears'];

var currentItem = randomItem(fruit);

btn.addEventListener('click', function () {
  var prevItem = currentItem;
  do {
    currentItem = randomItem(fruit);
  } while (prevItem === currentItem);
}, false);

Now when we click the button, we will never get the same item returned consecutively.

Checkout the demo and open the console to see it in action.

Build better on Postgres with AI-Assisted Development Practices

Compare top AI coding tools like Cursor and Windsurf with Neon's database integration. Generate synthetic data and manage databases with natural language.

Top comments (4)

Erik Ostrom • Mar 11 '19

Another way to do it is to create an array that contains every item except the current one, and then take a random item from that:

btn.addEventListener('click', function() {
  var otherFruits = fruit.filter(function(item) { return item !== currentItem });
  currentItem = randomItem(otherFruits);
  console.log(currentItem);
}, false);

Alex Carpenter • Mar 11 '19

Definitely, but it seemed more performant to not create a new array using filter on every click.

Erik Ostrom • Mar 11 '19

It's hard to know, right? I would guess the average performance for my version is worse, for the reason you mentioned. But the worst-case performance for your version is worse, because in theory that loop can spin and spin until the random number generator picks a different fruit.

But really, the performance costs we're talking about aren't important, if they only happen once per human click interval. I'd favor readability... if I could just decide which one was more readable.