Javascript new function-object vs function-instantiation

Question

I have created a deck of cards that contains an array of 52 card objects. Each card inherits properties and methods defined in cardObject() function. However, I am confused with how to create new deck and access its properties and methods.

// Defining properties and methods for every single card object created by PackOfCards function
function cardObject(cardNum, cardSuit) {
  this.cardNum = cardNum;
  this.cardSuit = cardSuit;
}
cardObject.prototype.getCardValue = function() {
  if (this.cardNum === "jack" || this.cardNum === "queen" || this.cardNum === "king") {
    return 10;
  } else if (this.cardNum === "ace") {
    return 11;
  } else {
    return this.cardNum;
  }
}
cardObject.prototype.getCardSuit = function() {
    return this.cardSuit;
  }

// Creating a deck of shuffled card where every card inherits properties and methods defined in cardObject function
function PackOfCards() {
  var unshuffledDeck = [],
    shuffledDeck = [];
  var listCardNum = ["ace", 2, 3, 4, 5, 6, 7, 8, 9, 10, "jack", "queen", "king"];
  var listCardSuits = ["clubs", "diamonds", "hearts", "spades"];
  for (var i = 0; i < listCardNum.length; i++) {
    for (var j = 0; j < listCardSuits.length; j++) {
      unshuffledDeck.push(new cardObject(listCardNum[i], listCardSuits[j])); //generating 52 new card objects
    }
  }
  var lengthCounter = unshuffledDeck.length;
  while (lengthCounter > 0) { // shuffling the 52 unshuffled cards randomly
    var tempPosition = Math.floor(Math.random() * lengthCounter);
    shuffledDeck.push(unshuffledDeck.splice(tempPosition, 1));
    lengthCounter--
  }
  return shuffledDeck;
}

var newDeckObj = new PackOfCards;  // I've considered PackOfCards as constructer function here
var newDeckInstance = PackOfCards();  // I've created a variable that stores a new instance of PackOfCards() function that returns an array
console.log(newDeckObj[5].getCardValue);
console.log(newDeckObj[5].getCardValue);

Here I am unable to find the real true core difference between newDeckObj and newDeckInstance.

Both contain an array of 52 objects BUT I get undefined trying to access its properties. I suppose both variables are some copy of PackOfCards() function but take different approach (one considers it a constructer which other just a function that returns an array) which I am unable to comprehend fully.

Ry- · Accepted Answer · 2017-01-12 13:33:18Z

1

You returned an object from your PackOfCards constructor, so it’s no longer a constructor. Using it with or without new makes no difference; it should just be a normal function.

The reason undefined is being logged is because splice returns an array of removed items, not just one (even if you only spliced one item out).

shuffledDeck.push(unshuffledDeck.splice(tempPosition, 1)[0]);

Moving the process of shuffling into another function and doing it in-place would be a good idea, though; it lets you test the shuffling part by itself.

function shuffle(collection) {
    for (var i = 0; i < collection.length - 1; i++) {
        var swap = i + (Math.random() * (collection.length - i) | 0);
        var t = collection[i];
        collection[i] = collection[swap];
        collection[swap] = t;
    }
}

and

function getPackOfCards() {
  var deck = [];
  var listCardNum = ["ace", 2, 3, 4, 5, 6, 7, 8, 9, 10, "jack", "queen", "king"];
  var listCardSuits = ["clubs", "diamonds", "hearts", "spades"];
  for (var i = 0; i < listCardNum.length; i++) {
    for (var j = 0; j < listCardSuits.length; j++) {
      deck.push(new cardObject(listCardNum[i], listCardSuits[j])); //generating 52 new card objects
    }
  }

  return deck;
}

var deck = getPackOfCards();
shuffle(deck);

edited Jan 12, 2017 at 13:33

answered Jan 12, 2017 at 13:27

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jamie Over a year ago

thanks ryan. so you mean that if i don't return anything from PackOfCards(), it will act as a constructer ? however the function has no public methods or properties so how will those be available to new objects without returning anything? will var deck = new PackOfCards(); still work?

Ry- Over a year ago

@Jamie: If you want a function that returns an array, you can just do that. Not everything has to be a constructor.

Jamie Over a year ago

so how will var deck = new getPackOfCard; work if i don't return the inner private array. any difference furthur down the line if i just do your way vs using new? thanks ;)

Pierre C. Over a year ago

@Jamie There is no "inner private array". getPackOfCards() simply returns an array of cardObjects. This is not object oriented but it works. It may be harder to implement other feature later if you want to do like a game but not impossible.

Ry- Over a year ago

@Jamie: You don’t use new unless you have a constructor. getPackOfCards is just a normal function and you’d do var deck = getPackOfCards();. If you want to make it a constructor PackOfCards, you can set this.cards = deck; or something.

|

Collectives™ on Stack Overflow

Javascript new function-object vs function-instantiation

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related