Creating Playing Cards

Question

Having an issue creating objects in JavaScript.

Trying to create a deck of playing cards which I can then display however I want. I am good with the HTML stuff to display them, just having an issue understanding what I am doing wrong in the JavaScript which is only creating undefined cards for me.

(function () {

function Card (rank, suit) {

    this.rank = rank;
    this.suit = suit;

};

function Deck() {

    this.deck = new Array();

    this.makeDeck = makeDeck;
    this.shuffle = shuffle;
    this.deal = deal;
}
function makeDeck() {

    var ranks = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9", "10",
                    "J", "Q", "K");
    var suits = new Array("Clubs", "Diamonds", "Hears", "Spades");

    this.deck = new Array(52);

    var i, j;
    for (i = 0; i < suits.length; i++) {
        for (j = 0; j < ranks.length; j++) {
            this.deck[i*ranks.length + j] = new Card(ranks[j], suits[i]);
            document.write("Card made \n");
        }
    }
};

function shuffle() {
    var i, n, j, temp;
    for (i = 0; i < n; i++) {
        for (j = 0; j < this.deck.length; j++) {
            k = Math.floor(Math.random() * this.deck.length);
            temp = this.deck[j];
            this.deck[j] = this.deck[k];
            this.deck[k] = temp;
        }
    }
    document.write("Cards Shuffled");
};



function deal() {

    if (this.deck.length > 0) {
        return this.deck.shift();
    }
    else return null;
};

var deck = new Deck();

deck.makeDeck();
deck.shuffle();
for (i = 0; i < 2; i++) {
    for (j = 0; j < 5; j++) {
        var Card = new Card(deck.deal);
        var c = JSON.stringify(Card);
        document.write(this.deck[j]);
    }
}


   } ());

Answer 1

This is the problematic line :

this.deck = new Card(ranks[j], suits[i]);

this.deck is supposed to be the array that includes all your cards, but with the above line, you're overriding it everytime with the single new card.

You have 2 options :

First option

Instead of this.deck = new Array(52), use this.deck = [] instead, initializing an empty array to this.deck.

Then use this.deck.push(new Card(ranks[j], suits[i])) to push all the combinations of the cards to your deck.

Second option

The problem with the first option is that array.push is not really efficient. Read this for more info. It wouldn't really matter for a 52-sized array, just putting this on the table for everyone's info.

Alternatively, you could use this.deck[i] = new Card(ranks[j], suits[i]) to populate your array. You could use this.deck = [] or this.deck = new Array(52) for this. Either would work.