title: javascript magic or my fail
body: <p>I have an array of objects like this </p>
  
  <pre><code>{ 
      img: 'https://i.ytimg.com/vi/dz_jeuWx3j0/default.jpg',
      title: 'The Deep End of Deep Learning | Hugo Larochelle | TEDxBoston',
      id: 'dz_jeuWx3j0',
      viewCount: '133219' 
  }
  </code></pre>
  
  <p>and i put into html through <code>ejs</code>, <code>data</code> is my array</p>
  
  <pre><code>&lt;% data.forEach((item, i, data) =&gt; {
       let str = '
         &lt;div class="row my-3"&gt; 
             &lt;div class="col"&gt;
                &lt;img src="' + item.img + '" alt="img" width="150" height="100"&gt;
            &lt;/div&gt;
         &lt;div class="col"&gt;
            &lt;p&gt;&lt;a href="http://www.youtube.com/embed/' + item.id + '" target="_blank"&gt;' + item.title + '&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;' + item.viewCount + ' views&lt;/p&gt;
         &lt;/div&gt;
      &lt;/div&gt;'; %&gt;
     &lt;%- str %&gt;
  &lt;% }); %&gt;
  </code></pre>
  
  <p>and I don't know why, but sometimes this code shows me correct <code>viewCount</code> and sometimes I get <code>undefined</code>, and rest of properties displayed correct (<code>id</code>, <code>img</code>, <code>title</code>). Can anyone explain what's wrong?</p>