title: Replacing `for` loop with `forEach` loop
body: <p>I'm working on StateService methods which move task card to next column. I was able to write <code>taskMoveLeft</code> method which works just fine, but I can't duplicate its functionality for <code>taskMoveRight</code> method using <code>forEach</code> loop, I could get it working only with <code>for</code> loop.</p>
  
  <p>Working example of <code>taskMoveLeft</code> method (using <code>forEach</code>):</p>
  
  <pre class="lang-js prettyprint-override"><code>taskMoveLeft(id) {
    state.columns.forEach((column, columnIndex) =&gt; {
      if (state.columns[0] !== column) {
        if (column.cards) {
          column.cards.forEach((card, cardIndex) =&gt; {
            if (card.id === id) {
              if (state.columns[columnIndex - 1].cards) {
                // Add card to the target column card collection
                state.columns[columnIndex - 1].cards.push(card);
              } else {
                // Create target column card collection and add card
                state.columns[columnIndex - 1].cards = Array.of();
                state.columns[columnIndex - 1].cards.push(card);
              }
              // Remove the card from the source column card collecion
              state.columns[columnIndex].cards.splice(cardIndex, 1);
            }
          });
        }
      }
    });
  }
  </code></pre>
  
  <p>Working example of <code>taskMoveRight</code> method (using <code>for</code> loop):</p>
  
  <pre><code>taskMoveRight(id) {
    for (let i = 0; i &lt; state.columns.length; i++) {
      if (state.columns[state.columns.length - 1] !== state.columns[i]) {
        if (state.columns[i].cards) {
          for (let j = 0; j &lt; state.columns[i].cards.length; j++) {
            if (state.columns[i].cards[j].id === id) {
              if (state.columns[i + 1].cards) {
                // Add card to the target column card collection
                state.columns[i + 1].cards.push(state.columns[i].cards[j]);
              } else {
                // Create target column card collection and add card
                state.columns[i + 1].cards = Array.of();
                state.columns[i + 1].cards.push(state.columns[i].cards[j]);
              }
              // Remove the card from the source column card collecion
              return state.columns[i].cards.splice(j, 1);
            }
          }
        }
      }
    }
  }
  </code></pre>
  
  <p>Can't make <code>taskMoveRight</code> method work with <code>forEach</code> loop. With this code the card always moves to the furthest right column:</p>
  
  <pre><code>taskMoveRight(id) {
    state.columns.forEach((column, columnIndex) =&gt; {
      if (state.columns[state.columns.length - 1] !== column) {
        if (column.cards) {
          column.cards.forEach((card, cardIndex) =&gt; {
            if (card.id === id) {
              // Create target column card collection
              if (!state.columns[columnIndex + 1].cards) {
                state.columns[columnIndex + 1].cards = Array.of();
              }
              // Add card to the target column card collection
              state.columns[columnIndex + 1].cards.push(card);
              // Remove the card from the source column card collecion
              state.columns[columnIndex].cards.splice(cardIndex, 1);
            }
          });
        }
      }
    });
  }
  </code></pre>