Shuffling the Deck: Learning Loops and Nested Loops in JavaScript

I’ve been diving into the world of JavaScript and having a blast revisitinvg different programming concepts. One particularly interesting and important topic has been loops and nested loops, which allow you to automate repetitive tasks and work with complex data structures.

To put these concepts into practice, our class decided to create a fun project that simulates shuffling a deck of cards and dealing a poker hand. It’s a great way to see how loops and nested loops can be used to generate and manipulate data in a practical scenario.

Let’s take a closer look at the code and break down what’s happening:

const kinds = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"];
const suits = ["Diamonds", "Hearts", "Spades", "Clubs"];
const deck = [];

First, we define two arrays: `kinds` represents the different card values (2–10, Jack, Queen, King, Ace), and `suits` contains the four suits (Diamonds, Hearts, Spades, Clubs). We also initialize an empty `deck` array to store our generated cards.

for (let i = 0; i < kinds.length; i++) {
for (let j = 0; j < suits.length; j++) {
const card = {
suit: suits[j],
kind: kinds[i],
name: kinds[i] + " of " + suits[j],
fileName: kinds[i] + "-of-" + suits[j] + '.png',
value: kinds[i] === "Jack" || kinds[i] === "Queen" || kinds[i] === "King" ? '10' :
kinds[i] === "Ace" ? '11' : kinds[i]
};
deck.push(card);
}
}

Here’s where the magic happens! We use a nested loop to generate all possible combinations of card kinds and suits. The outer loop iterates over the `kinds` array, while the inner loop iterates over the `suits` array. For each combination, we create a `card` object with properties like `suit`, `kind`, `name`, `fileName`, and `value`. The `value` property is determined based on the card kind, assigning a value of ‘10’ to face cards (Jack, Queen, King) and ‘11’ to an Ace. Finally, we push each `card` object into the `deck` array.

function dealCards() {
const hand = [];
const dealtCards = [];
while (hand.length < 5) {
const i = Math.floor(Math.random() * 52);
if (!dealtCards.includes(i)) {
hand.push(deck[i]);
dealtCards.push(i);
}
}
const imgs = document.querySelectorAll("img");
for (let i = 0; i < 5; i++) {
imgs[i].src = "images/" + hand[i].fileName;
}
}

The `dealCards` function is responsible for randomly selecting five cards from the `deck` array to form a poker hand. We use a `while` loop to keep selecting random cards until we have a hand of five unique cards. The `Math.floor(Math.random() * 52)` expression generates a random index between 0 and 51 (inclusive) to select a card from the `deck`. We keep track of the dealt card indices in the `dealtCards` array to ensure we don’t deal the same card twice.

Finally, we use `querySelectorAll` to select all the `<img>` elements on the page and update their `src` attributes with the corresponding card image file names.

document.querySelector('button').addEventListener('click', dealCards);

To trigger the card dealing process, we add a click event listener to a button element. Whenever the button is clicked, the `dealCards` function is called, and a new poker hand is dealt and displayed on the page.

This project has been a fun and engaging way to explore loops, nested loops, and manipulating data with JavaScript. It’s amazing to see how a few lines of code can simulate the complex process of shuffling a deck of cards and dealing a random hand.

As I continue on my coding journey, I’m excited to tackle more challenging projects and deepen my understanding of programming concepts. The power and versatility of JavaScript never cease to amaze me, and I can’t wait to see what other exciting things I’ll be able to build!

Happy coding, everyone! Remember, every line of code is a step towards mastering the craft of programming. Keep learning, keep practicing, and most importantly, keep having fun!