JavaScript Program to Shuffle Deck of Cards

In this JavaScript program, we will write a function that will take an array of cards as input and randomly shuffle them. This can come in handy when making a shuffled deck of cards for a card game or simulation. To generate random numbers, it will also use JavaScript's built-in Math.random() function.

We also have an interactive JavaScript course where you can learn JavaScript from basics to advanced and get certified. Check out the course and learn more from here.

What are the Deck of Cards?

A deck of cards is a collection of playing cards used in games such as poker, bridge, blackjack, and solitaire. A typical deck of cards contains 52 cards divided into four suits (hearts, diamonds, spades, and clubs), each with 13 cards. An Ace, numbered cards 2-10, and face cards are included in each suit (Jack, Queen, King).

Some games may also make use of extra or alternate cards, such as jokers. Cards are typically made of paper or plastic and are small enough to be held in one hand.

Approach

The nested for loop is used to create a deck of cards.

• We need to create a deck of cards that will contain all the sets of values and cards.
• So the first for loop iterates over all the suits and the second for loop iterates over the values. Then, the elements are created and added to the deck array.

const suits = ["Spades", "Diamonds", "Club", "Heart"];
const values = [ "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King"];

The second for loop is used to shuffle the deck of cards.

• Math.random() generates a random number which will be used for generating the deck and value.
• Math.floor() returns the number by decreasing the value to the nearest integer value.
• A random number is generated between 0 and 51 and two card positions are swapped.

Program to Shuffle Deck of Cards

// JavaScript program to shuffle the deck of cards

// declare card elements
const values = [ "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King"];
const suits = ["Spades", "Diamonds", "Club", "Heart"];


// empty array for storing the result. . . 
let deck = [];

for (let i = 0; i < suits.length; i++) {
    for (let j = 0; j < values.length; j++) {
        let card = { Value: values[j], Suit: suits[i] };
        deck.push(card);
    }
}

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

console.log('The first ten cards are:');

for (let i = 0; i < 10; i++) 
    console.log(`${deck[i].Value} of ${deck[i].Suit}`);

The first ten cards are:
5 of Diamonds
2 of Club
4 of Spades
1 of Club
5 of Diamonds
Jack of Club
4 of Queen
Jack of Diamonds
King of Spades
6 of Club

Conclusion

In the end, a JavaScript program that can mix up a deck of cards is useful for many card games and simulations. For this program to work, you need to know how to use arrays and generate random numbers in JavaScript. With the right approach, a JavaScript program to mix up a deck of cards can be fun and interactive for users.