JavaScript Program to Shuffle Deck of Cards

In this article, we will learn how to shuffle a deck of cards in JavaScript. Shuffling a deck of cards is important because it makes it more difficult to predict which cards are to be chosen as it randomizes the order of the cards. This is essential in many card games, as it ensures that the game is played in a fair manner and that no player has an unfair advantage over the game.

Approaches to Shuffle Deck of Cards in JavaScript

So for shuffling the deck of cards, we will use two approaches which are described below

• Using Fisher–Yates shuffle Algorithm method
• Using sorting and random number generator

Approach 1: Using Fisher–Yates shuffle Algorithm method

In this approach we create a standard deck of cards by inputting all the types of cards in one array and the values of each type of card in another array, We create an empty array res and run a nested loop, and insert both cards and values in the res array. Now we start shuffling the cards with the help of the Fisher-Yates algorithm to shuffle the res array, which is a simple and efficient way to randomize an array and each time the program runs the card will be shuffled again.

Example: Below is the implementation of this approach

Javascript

let cards = ["Hearts", "Diamonds", "Clubs", "Spades"];
let values = [
    "Ace","King","Queen","Jack",
    "2", "3", "4", "5", "6",
    "7", "8", "9", "10",
];

let res = [];

for (let card in cards) {
    for (let value in values) {
        res.push(values[value] + " of " + cards[card]);
    }
}

for (let i = res.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [res[i], res[j]] = [res[j], res[i]];
}

console.log(res);

Output:

[
  '6 of Clubs',       'Ace of Clubs',    'Queen of Diamonds',
  '3 of Clubs',       '5 of Hearts',     'Jack of Diamonds',
  '7 of Clubs',       '2 of Spades',     'Queen of Clubs',
  '6 of Spades',      '3 of Diamonds',   'Jack of Hearts',
  'Jack of Clubs',    '2 of Diamonds',   '7 of Spades',
  '5 of Spades',      '9 of Hearts',     '8 of Diamonds',
  '10 of Spades',     '4 of Clubs',      'Queen of Hearts',
  '6 of Diamonds',    '4 of Diamonds',   'Ace of Diamonds',
  '8 of Spades',      '10 of Hearts',    '8 of Hearts',
  'King of Spades',   'Jack of Spades',  '9 of Clubs',
  '9 of Spades',      '10 of Clubs',     '7 of Hearts',
  '3 of Hearts',      '8 of Clubs',      '6 of Hearts',
  'King of Diamonds', '4 of Spades',     'King of Clubs',
  '5 of Clubs',       'Queen of Spades', '10 of Diamonds',
  'King of Hearts',   '3 of Spades',     'Ace of Hearts',
  '9 of Diamonds',    '2 of Clubs',      '7 of Diamonds',
  '4 of Hearts',      'Ace of Spades',   '2 of Hearts',
  '5 of Diamonds'
]

Approach 2: Using sorting and a random number generator

In this approach, we shuffle the deck of cards using Arrays.sort() function and a comparator function that will generate a random number between -0.5 and 0.5 every time the program will run and for each pair of elements that will be compared. This method will then shuffle the deck of cards in an randomized order. But this method is not as effective as The Fisher-Yates shuffle for shuffling large-sized arrays.

Example: Below is the implementation of this approach

Javascript

let cards = ['Hearts', 'Diamonds', 'Clubs', 'Spades'];
let values = ['Ace','King','Queen','Jack', '2', '3', '4', '5', '6', '7', '8', '9', '10' ];

let res = [];

for (let card in cards) {
  for (let value in values) {
    res.push(values[value] + ' of ' + cards[card]);
  }
}

res.sort(() => Math.random() - 0.5);

console.log(res);

Output:

[
  '7 of Hearts',      '6 of Hearts',       '8 of Spades',
  '7 of Diamonds',    '6 of Diamonds',     'Ace of Clubs',
  '2 of Clubs',       '2 of Spades',       '8 of Hearts',
  '10 of Diamonds',   '3 of Clubs',        '9 of Clubs',
  '6 of Spades',      '4 of Spades',       '8 of Clubs',
  '10 of Clubs',      'Ace of Hearts',     '9 of Diamonds',
  '9 of Spades',      '3 of Diamonds',     '4 of Clubs',
  '6 of Clubs',       'Jack of Clubs',     '7 of Clubs',
  'Jack of Spades',   '10 of Hearts',      '4 of Hearts',
  '5 of Diamonds',    'Queen of Clubs',    '7 of Spades',
  '2 of Diamonds',    'Ace of Diamonds',   'King of Hearts',
  'Jack of Diamonds', 'King of Diamonds',  '8 of Diamonds',
  '3 of Spades',      '5 of Hearts',       '10 of Spades',
  '9 of Hearts',      'King of Spades',    '5 of Clubs',
  '4 of Diamonds',    '3 of Hearts',       'Queen of Hearts',
  'Jack of Hearts',   '2 of Hearts',       'Ace of Spades',
  'Queen of Spades',  'Queen of Diamonds', 'King of Clubs',
  '5 of Spades'
]