title: Lodash _.cloneDeep() is mutating an object property derived from a hashTable lookup during an iteration (Poker - Playing Cards)
body: <p>I am running into a truly perplexing bug that I've been unsuccessfully trying to squash for the past several hours.
  I am working on a Poker implementation. Initially, I generate the cards with an iterative loop.</p>
  
  <pre><code>const suits = ['Heart', 'Spade', 'Club', 'Diamond'];
  const cards = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
  const VALUE_MAP = {
      2:1,
      3:2,
      4:3,
      5:4,
      6:5,
      7:6,
      8:7,
      9:8,
      10:9,
      J:10,
      Q:11,
      K:12,
      A:13,
  };
  const generateDeckOfCards = () =&gt; {
      const deck = [];
  
      for (let suit of suits) {
          for (let card of cards) {
              deck.push({
                  cardFace: card,
                  suit: suit,
                  value: VALUE_MAP[card]
              })
          }
      }
          return deck
  }
  
  const fullDeck = generateDeckOfCards()
  </code></pre>
  
  <p>When the round is completed, the player's 2 Private Cards and 5 Community Cards are concatenated into an array and sorted by value (descending):</p>
  
  <pre><code>player.showDownHand.hand = player.cards.concat(state.communityCards);
  hand = player.showDownHand.hand.sort((a,b) =&gt; b.value - a.value);
  
  console.log(hand)
  // Output:
  0: Object { cardFace: "J", suit: "Heart", value: 10, … }
  1: Object { cardFace: "9", suit: "Heart", value: 8, … }
  2: Object { cardFace: "9", suit: "Club", value: 8, … }
  3: Object { cardFace: "6", suit: "Heart", value: 5, … }
  4: Object { cardFace: "5", suit: "Diamond", value: 4, … }
  5: Object { cardFace: "4", suit: "Diamond", value: 3, … }
  6: Object { cardFace: "3", suit: "Club", value: 2, … }
  length: 7
  </code></pre>
  
  <p>Now, the bug occurs when I initiate my method to build the best possible hand of 5 cards depending on hand rank. I need to mess around with this array and possibly mutate it, filter out cards that I've picked out, etc. - So I create a deep clone of the object. </p>
  
  <p>There is a huge problem - the <code>values</code> for the cards CHANGE for some reason! I do not mutate anything in between - The value should be static and derived from the current card's <code>cardFace</code> property.</p>
  
  <pre><code>import { cloneDeep } from 'lodash';
  
  let mutableHand = cloneDeep(hand);
  console.log(mutableHand)
  // Output
  0: Object { cardFace: "J", suit: "Heart", value: 13, … }
  1: Object { cardFace: "9", suit: "Heart", value: 8, … }
  2: Object { cardFace: "9", suit: "Club", value: 8, … }
  3: Object { cardFace: "6", suit: "Heart", value: 6, … }
  4: Object { cardFace: "5", suit: "Diamond", value: 4, … }
  5: Object { cardFace: "4", suit: "Diamond", value: 3, … }
  6: Object { cardFace: "3", suit: "Club", value: 2, … }
  </code></pre>
  
  <p>Card 0 and 3 have had their values totally changed! Why? I have no idea - Has the original context of the lookup table changed? If anyone has any hints to how I can fix this, I would be most appreciative. </p>
  
  <p>An additional note - Creating a Shallow Copy with 
  <code>let mutableHand = [...hand];</code> does NOT initially exhibit this behavior in console log - If I do nothing to it.. However, after I run the shallow copied array through the function, even the original descending deck state has many of its values mutated. Again, I'm not sure why :\</p>
  
  <p>Full code can be viewed on <a href="https://codesandbox.io/s/oqx8ooyv29" rel="nofollow noreferrer">codesandbox.io/s/oqx8ooyv29</a> - The problem stems from the <code>buildBestHand()</code> function in <code>src/utils/card.js</code></p>
  
  <p>Here is the problem code:</p>
  
  <pre><code>const bestHand = [];
  let mutableHand = cloneDeep(hand);
      for (let i = 0; i &lt; 2; i++) {
          const indexOfPair = mutableHand.findIndex(card =&gt; card.cardFace === frequencyHistogramMetaData.pairs[0].face);
              bestHand.push(mutableHand[indexOfPair])
                  mutableHand = mutableHand.filter((card, index) =&gt; index !== indexOfPair)
      }
          return bestHand.concat(mutableHand.slice(0, 3))
  </code></pre>
  
  <p>I am trying to find the index of card which matches "Pair" (Player has 2 cards with that face), Push to an array of best cards, filter out that index in between iterations, and fill the rest of the best-cards array with their next 3 highest cards. </p>
  
  <p>Edit: If I do <code>hand = cloneDeep(player.showDownHand.hand).sort((a,b) =&gt; b.value - a.value);</code>, the issue is heavily exacerbated, and almost all the values are corrupt for final comparisons</p>