title: For-loop, map and forEach Javascript
body: <p>I am trying to create a deck of 52 cards. I can create it easily with double for-loop but it has O(n2) complexity. So I was trying to play with map() and forEach() array methods but things are complex with them needing to return stuffs. Here is my code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function deckCreate() {
    var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
    var suits = ["clubs", "diamonds", "hearts", "spades"];
    var newDeck = values.map(function(xValue) {
      suits.forEach(function(xSuit) {
        return [xSuit,xValue];
      });
    });
    return newDeck;
  }());</code></pre>
  </div>
  </div>
    </p>
  
  <p>It gives an array of length 13 all undefined inside. I tried swapping forEach() before map() just incase but the result was the same.  </p>
  
  <p>The issue I found while console.log() inside those functions was that the elements were not being mapped to each other but were printed all separately. What could be the issue be? </p>