title: Array shows empty, but should have one element
body: <p>Okay guys so I've run into a problem on some code I've been working on. In the code below, I'm trying to console log the length of an array, but after printing to the console, I get an output of 0 for the array's length, and when I print the array itself, it shows that it is empty, but I can click the drop down arrow and see the element inside it.</p>
  <pre><code>// randomly selects card from array
  export const selectCard = arr =&gt; {
  
      const randomArr = Math.floor(Math.random() * arr.length);
  
      console.log(arr.length);
  
      console.log(arr);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/F57VV.jpg" rel="nofollow noreferrer">Image of logged array length and empty array with an element inside.</a></p>
  <p>To test what was happening, I decided to console log the array in a different function that is in the same file where the array is created. The array (<code>blackCards</code>) is stored in an object.</p>
  <pre><code>let packArr = {
    data: {},
    packToUse: [],
    whiteCards: [],
    blackCards: [],
  };
  </code></pre>
  <p>Console logging the array (<code>blackCards</code>) in another function logs this:</p>
  <pre><code>const seperatePacks = (data) =&gt; {
    // add white cards to array
    packArr.whiteCards.push(data.whiteCards);
  
    // add black cards to array
    packArr.blackCards.push(data.blackCards);
  
    // console log blackCards array
    console.log(packArr.blackCards);
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/NMSVi.jpg" rel="nofollow noreferrer">Image of logged array from a different function which is within the same file where the array is created and stored.</a></p>
  <p>Here's a little more about how my code works. When a user clicks on a button, an event listener is activated, which calls other functions that eventually get json from a sever, then I add that data to the array, which you see in the code above. So now that you know how the code works, I can get to what is causing me to be even more confused. So, on the first click, I get the outcome of all the previous code and images combined, but if i click on the same button again, or click on a different one, I get the desired outcome (if I click on two button I get two elements in the array, so it's working correct). So, two or more clicks and the program works the way it should. Any help here would be great. Also sorry if this post was a little scuffed, it is my first one.</p>
  <p>Here are the functions that eventually call <code>selectCard</code></p>
  <pre><code>elements.packs.addEventListener(&quot;click&quot;, (e) =&gt; {
    const packID = e.target.closest(&quot;.pack&quot;).id;
    if (packID) {
      packsToUse(packID);
  
      // create black cards
  
      blackCardDisplay(packArr.blackCards);
    }
  });
  </code></pre>
  <p>Above is the listener that was mentioned earlier, which calls the function below, that will call <code>selectCard</code>.</p>
  <pre><code>export const blackCardDisplay = data =&gt; {
  
      const card = `
          &lt;div class=&quot;cards card--black&quot;&gt;
              &lt;h1 class=&quot;card--black-text card--text&quot;&gt;${selectCard(data)}&lt;/h1&gt;
          &lt;/div&gt;
      `;
  
  }
  </code></pre>
  <p>Here is the output after pressing two buttons. The array should contain two elements but in this case it only shows one. However when I expand the array, it shows a length of two instead of just one.</p>
  <p><a href="https://i.stack.imgur.com/YUjnX.jpg" rel="nofollow noreferrer">Console image of two button clicks</a></p>
  <p>EDIT: After reading some of the comments I realized I forgot to mention that the contents of <code>blackCards</code> is an array. So I have an array within an array.</p>