title: Why do I keep getting an array inside an array when using push()?
body: <p>I am trying to understand MDN's documentation on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" rel="noreferrer">.push()</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" rel="noreferrer">.apply()</a> because I'm having an issue where I am ending up with an array inside an array in a project. I have set up some experimental code to illustrate my problem. </p>
  
  <p>Can anyone explain why the array contents inside <code>foo()</code> print within another array? I am not understanding why it isn't printing one array for both <code>console.log()</code>instances. </p>
  
  <pre><code>var animals = [];
  var chickens = 'chickens';
  var cows = 'cows';
  
  animals.push(cows);
  animals.push(chickens);
  
  console.log(animals); // &gt; Array ["cows", "chickens"]
  
  function foo(...animals) {
    console.log(animals); // &gt; Array [["cows", "chickens"]] &lt;-- why is this one inside another array?
  }; 
  </code></pre>
  
  <p>I thought using <code>.apply()</code> would solve the problem but it I couldn't get it to work. For example...</p>
  
  <pre><code>animals.push.apply(animals, cows);
  animals.push.apply(animals, chickens);
  
  // Error: second argument to Function.prototype.apply must be an array
  </code></pre>