title: Why this if statement creates an undefined value inside a for loop?
body: <p>I have created this for loop to collect all the images inside an <code>&lt;ul&gt;</code>. I want to collect on one hand the portrait images and on the other the ones that are in landscape, and apparently it works...</p>
  
  <pre><code>for ( var i = 0; i &lt; imgArray.length; i += 1 ) {
      var images = [ imgArray ]; // Creates an array with all the images.
  
  //Figure out which images are in landscape and in portrait.
  
      if ( imgArray[i].height &lt; imgArray[i].width ) {
          var landscapeImg = [ imgArray[i] ]; // Stores landscape images.
      } else if ( imgArray[i].height &gt; imgArray[i].width ) {
          var portraitImg = [ imgArray[i] ]; // Stores portrait images.
      };
  </code></pre>
  
  <p>... but when I log in the console <code>var landscapeImg</code> and <code>portraitImg</code> this happens.</p>
  
  <pre><code>[Log] [ (app.js, line 24)
  &lt;img src=​"img/​1.jpg" alt=​"Imagen 1"&gt;​
  ]
  [Log] undefined (app.js, line 25)
  [Log] [ (app.js, line 24)
  &lt;img src=​"img/​1.jpg" alt=​"Imagen 1"&gt;​
  ]
  [Log] [ (app.js, line 25)
  &lt;img src=​"img/​2.jpg" alt=​"Imagen 2"&gt;​
  ]
  [Log] [ (app.js, line 24)
  &lt;img src=​"img/​3.jpg" alt=​"Imagen 3"&gt;​
  ]
  [Log] [ (app.js, line 25)
  &lt;img src=​"img/​2.jpg" alt=​"Imagen 2"&gt;​
  ]
  [Log] [ (app.js, line 24)
  &lt;img src=​"img/​4.jpg" alt=​"Imagen 4"&gt;​
  ]
  [Log] [ (app.js, line 25)
  &lt;img src=​"img/​2.jpg" alt=​"Imagen 2"&gt;​
  ]
  [Log] [ (app.js, line 24)
  &lt;img src=​"img/​5.jpg" alt=​"Imagen 5"&gt;​
  ]
  [Log] [ (app.js, line 25)
  &lt;img src=​"img/​2.jpg" alt=​"Imagen 2"&gt;​
  ]
  </code></pre>
  
  <p>Why I am getting an undefined value? And why the loop goes over the image 1 again?</p>
  
  <p>Thanks in advance :)</p>