title: Understanding basic javascript logic
body: <p>I am currently working on learning/practicing DOM manipulation and ran across this tutorial/practice sheet.</p>
  
  <p><a href="https://github.com/lmuntaner/dom_manipulation" rel="nofollow noreferrer">https://github.com/lmuntaner/dom_manipulation</a></p>
  
  <p>I am currently confused on the loop created by the createGrid function.
  ... The function "createGrid" is created and takes an argument. The function creates a for loop which has another loop nested inside of it... that has the same exact statements as the first one... Why create a separate loop? Why not just have one for loop? Can someone explain this too me? (The guy who wrote this code is far beyond me, but i still would like to understand why)</p>
  
  <pre><code>    $(function () {
    var rows = 10;
    var cols = 10;
    var cells = [];
    function createGrid(root) {
      for(var i = 0; i &lt; cols; i++) {
        for(var j = 0; j &lt; cols; j++) {
          var cell = $('&lt;div&gt;').addClass('cell');
          cells.push(cell);
          root.append(cell);
        }
      }
    };
  
    var updateState = function() {
      cells.forEach(function (cell) {
        var randomNum = Math.random() * 2;
        if (randomNum &gt; 1) {
          cell.addClass('active');
        } else {
          cell.removeClass('active');
        }
      });
    }
  
    setInterval(updateState, 500);
  
    var $root = $('.container');
    createGrid($root);
  });
  </code></pre>