DEV Community

Cover image for Shuffle Deck
NaseerHines
NaseerHines

Posted on

Shuffle Deck

Welcome coders, gamers, and all the other unique groups of people out there in the world. I'm here to discuss another code challenge called Shuffle Deck. Now the name kind of implies what this problem is about but here is a brief explanation. Given an array containing a deck of cards and returns a shuffled version. So that's it seems straight forward right? But what describes a shuffle? Let us take a step into a real-world aspect version of the problem. Whenever you think of cards what do you think of first? My first thought is you have a dealer, and guess what he's doing the shuffling. Usually, the dealer knows these crazy techniques and can shuffle the cards around really fast. Now think about that from a computer standpoint. We already have the speed, but our computer isn't smart enough to know what a shuffle is. A way we can cover our bases with that is through coding in my case JavaScript is that source of brains. So let's take a look at some code.

const shuffleDeck = (deck) => {
  // duplicate the given deck
  const copyDeck = deck.slice();
  // create a new array to hold shuffled cards
  const shuffled = [];
  // find a way to loop through the copyDeck
  for (let i = copyDeck.length - 1; i >= 0; i--) {
    // this lets us create a new random index for later use in positioning
    const r = Math.floor(Math.random() * (i + 1));
    // destructor parts of the deck with the new random index
    [copyDeck[i], copyDeck[r]] = [copyDeck[r], copyDeck[i]];
    // push into shuffled the first card taken off the first index of copyDeck
    shuffled.push(copyDeck.pop());
  }
  // return shuffled deck after adding all the cards
  return shuffled;
};

So looking at the code above you can see we use javascript to dictate; or tell the computer to run certain actions for us. When we invoke the function above with a deck the first thing we do is make a copy of the passed-in array. I will explain more about why we do this later. So we know that we need to iterate through our array somehow. A way we can do this is by using our good old for loop. I think looping backward is more interesting so I did that above. So now that we are giving our selves access to the inside of the deck of cards we can now change the indexes of the cards around i.e. shuffle. Above I use this super interesting style called destructuring. Essentially it lets us pass in our wanted values into where our target values are currently. Then we take our shuffled array and add those values to the new values that we pop off the copy array. Then we can give the user back that original deck of cards now shuffled The style of shuffle where we copy the array is called a pure shuffle since we don't change the original array. But there is another way we can do this problem where we don't actually copy a duplicate array. Instead, we just make changes to the current passed in array of cards. This style of shuffleDeck is considered impure or a dirty shuffle since we alter the original array. The code for a dirty shuffle would look something like this.

const shuffleDeck = (deck) => {
  // impure shuffle
  // no need to make a new array just loop though given array
  for (let i = deck.length - 1; i >= 0; i--) {
    // use the same Math method to get a new random index
     let r = Math.floor(Math.random() * (i + 1));
    // set the cards in the random index swapping them out with whats their already
    [deck[i], deck[r]] = [deck[r], deck[i]];
  }
  // return passed in deck with shuffled cards
  return deck;
};

While the code above is a bit shorter than the pure shuffle like all things it has its own drawbacks. The main one is that we change the passed in array which is usually something you want to stray away from since you could be using the array for other things possibly. But like I said this shortens our code when we don't copy the array, or push and pop into and from different arrays. All in all, I rate this code challenge 52 out of 52.

Top comments (0)