title: Why javascript forEach loop is not iterating complete array with splice
body: <p>I was playing with javascript <code>.splice()</code> and <code>.forEach()</code> methods, 
  the code is working fine, But it is not giving output as expected.</p>
  
  <p>the issue is that <code>.forEach()</code> runs for half array and then exits.</p>
  
  <p>what i expect output be is</p>
  
  <pre><code>[['Apple'],['Banana'],['Mango'],['Pomegranate']]
  </code></pre>
  
  <p>But output is</p>
  
  <pre><code>[['Apple'],['Banana']]
  </code></pre>
  
  <p>I am not able to figure it out that why it is behaving like this. from the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" rel="nofollow noreferrer">mdn</a></p>
  
  <p>it says that  <code>.splice()</code> method updates array's length property. then it should work fine.</p>
  
  <p>Is there any way to make it work like as expected. </p>
  
  <p>For some reason I just donot want to use <code>.map()</code> or any other functions.</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>const fruits = ['Apple', 'Banana', 'Mango', 'Pomegranate']
  const fruitsList = []
  
  function removeArrayItem(item,index){
      let fruit = fruits.splice(0,1)
      fruitsList.push(fruit)
  }
  
  fruits.forEach(removeArrayItem)
  console.log(fruitsList)</code></pre>
  </div>
  </div>
  </p>