title: Javascript forEach / .map shows undefined
body: <p>When I run this code, in Chrome's sources tool in inspect, it says number = undefined for line 7 (groceryList.forEach(function(number) {). The arguments are being passed properly and if I do a console.log for each item it shows properly. Having the same issue with the commented out .map section that does the same thing as foreach.</p>
  
  <p>Can anyone tell me what I'm doing wrong?</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>//BUSINESS LOGIC
  
  var alphabatize = function(item1,item2,item3,item4){
    groceryList = [item1,item2,item3,item4];
    groceryList.sort();
    upperGroceryList = []
    groceryList.forEach(function(number) {
      console.log(number);
      upperGroceryList.push(number.toUpperCase());
    });
    /* upperGroceryList = groceryList.map(function(grocery) {
      console.log(grocery);
      return grocery.toUpperCase();
    }); */
    return groceryList;
    return upperGroceryList;
  };
  
  
  
  // FRONT END
  
  $(document).ready(function() {
     $("form#items-form").submit(function(event) {
       event.preventDefault();
       var item1 = $("input#item1").val();
       var item2 = $("input#item2").val();
       var item3 = $("input#item3").val();
       var item4 = $("input#item4").val();
       alphabatize(item1,item2,item3,item4);
       upperGroceryList.forEach(function(currentItem) {
         $("#display-list ul").append("&lt;li&gt;" + currentItem + "&lt;/li&gt;");
       });
     });
  })</code></pre>
  </div>
  </div>
  </p>