title: Javascript - Find largest area in a matrix
body: <p>The task is: Find the largest area of identical numbers in a matrix. </p>
  
  <p>The matrix is hardcoded and i have the following code so far. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;script type="text/javascript"&gt;
      /* ---- Function that prints a matrix and finds the largest area and its value  ---- */
              function LargestAreaMatrix() {
  
                  var matrix = [[1,3,2,2,2,4],
                                [4,3,2,2,4,4],
                                [4,4,1,2,3,3],
                                [4,3,1,2,3,1],
                                [4,3,3,2,2,1]];
  
                  var arrSize = matrix.length;
                  var itemSize = matrix[0].length;
                  var counter = {};
  
                  for (var i = 0; i &lt; arrSize; i++ ){
                      for (var j = 0; j &lt; itemSize; j++) {
                                  //if the current element is equal to the next element   
                                  if (matrix[i][j] == matrix[i][j+1]) {
                                      //to the object "key" is assigned the current value of the matrix and the "value" is incrementing till the condition is true  
                                      counter[matrix[i][j]] = 1 + (counter[matrix[i][j]] || 0);
                                      console.log("Right neighbor: "+ matrix[i][j] + " - ij: " + i + " " + j);
                                  } 
                                  if (typeof(matrix[i+1]) != "undefined" ) {
                                      //if the current element is equal to the bottom element
                                      if (matrix[i][j] == matrix[i+1][j]) {
                                          // the value of the specific key is incrementing
                                          counter[matrix[i][j]] = 1 + (counter[matrix[i][j]] || 0);
                                          console.log("Down neighbor:  "+ matrix[i][j] + " - ij: " + i + " " + j);
                                      }
                                  } else {
                                      console.log("Not a neighbor: "+ matrix[i][j] + " - ij: " + i + " " + j);
                                  } 
                      }//end of for j
                  }//end of for i
  
  
                  console.log("Neighbors count: ");
                  console.log(counter);   
  
  
                  //Printing the array with an html table
                  var table = '&lt;table border="0"&gt;';
                  for (var i = 0; i &lt; matrix.length; i++) {
                      table += '&lt;tr&gt;';
                      for (var j = 0; j &lt; matrix[i].length; j++) {
                          table += '&lt;td&gt;' + matrix[i][j] + '&lt;/td&gt;';
                      }
                      table += '&lt;/tr&gt;';
                  }
                  table += '&lt;/table&gt;';
  
                  document.getElementById('matrix').innerHTML = table;
              }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="#" onClick="LargestAreaMatrix();"&gt;Largest Area Matrix&lt;/a&gt;&lt;/p&gt;
  &lt;label name="matrix" id="matrix"&gt; &lt;/label&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I made 2 loops for going through the matrix where i check for right and down neighbors. If there are any - i use an object to put the value of the matrix for a key, while the object value is incrementing with the count of the key.
  So in the end i have the count of the neighbors for every value.</p>
  
  <p>My questions: For some reason, in the outside loop, where "i" hits 4 (the matrix size) both the second if and the else are executed. Why is this happening? 
  Also - I am still trying to figure out how to make it count only the largest area, not all the neighbors for a specific value. </p>
  
  <p>I will appreciate any help. Thanks! </p>
  
  <p>Update: </p>
  
  <p>So it turned out to be simpler than i thought it will be :) 
  Here is the recursive function i made to count the size of each area: </p>
  
  <pre><code>                function findNeighbors(row, col, item){
                  if(row &lt; 0 || col &lt; 0 || row &gt; (arrSize - 1) || col &gt; (itemSize - 1)) {
                      return 0;
                  }
  
                  if(matrixZero[row][col] == 1) {
                      return 0;
                  }
  
                  if(item == matrix[row][col]){
                      matrixZero[row][col] = 1;
                      tempCount = 1 + (findNeighbors(row, col+1, matrix[row][col]) || 0) + (findNeighbors(row+1, col, matrix[row][col]) || 0) + (findNeighbors(row, col-1, matrix[row][col]) || 0) + (findNeighbors(row-1, col, matrix[row][col]) || 0);
                      return tempCount;
                  }
              }
  </code></pre>
  
  <p>First i check if the current item is in the matrix range, if not - 0 is added to the tempCount value. Then i check if the item is already visited, if yes - 0 is added to the temp. Then if the item in neither visited, neither out of the matrix i check it as visited and add 1 to the temp and etc. </p>
  
  <p>Then in a simple for I compare the tempCount value with the current max value and i switch them if temp is higher than max. </p>
  
  <p>Thanks everyone for the help! </p>