title: Splicing a Javascript array from within the callback passed to forEach
body: <p>I have this code which is supposed to iterate over each item in an array, removing items based on some condition:</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>//iterate over all items in an array
  //if the item is "b", remove it.
  
  var array = ["a", "b", "c"];
  
  array.forEach(function(item) {
    if(item === "b") {
      array.splice(array.indexOf(item), 1);
    }
  
    console.log(item);
  });</code></pre>
  </div>
  </div>
  </p>
  <p>Desired output:</p>
  <pre><code>a
  b
  c
  </code></pre>
  <p>Actual output:</p>
  <pre><code>a
  b
  </code></pre>
  <p>Obviously the native forEach method doesn't check after each iteration whether the item has been deleted, so if it is then the next item is skipped.  Is there a better way of doing this, aside from overriding the forEach method or implementing my own class to use instead of an array?</p>
  <p>Edit - further to my comment, I suppose the solution is to just use a standard for loop.  Feel free to answer if you have a better way.</p>