title: Don't have access to top level variables in nested each loop. Javascript?
body: <p>Using this code:</p>
  
  <pre><code>addDefaultComments() {
      $('.image').each((index, image) =&gt; {
        Comment.defaults.forEach((comment) =&gt; {
          debugger;
          $('#images').find(`ul[data-id=${imageId}] ul#comments-${imageId}`).append(`&lt;li&gt;${comment.commentContent}&lt;/li&gt;\n`);
        })
      })
    }
  </code></pre>
  
  <p>At this <code>debugger</code> statement, shouldn't I have access to image and index? When I call them, it says they aren't defined. Isn't that weird?</p>
  
  <p>Proof that something odd is going on:</p>
  
  <p><a href="https://i.stack.imgur.com/cIf08.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cIf08.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/mNZxY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mNZxY.png" alt="enter image description here"></a></p>