title: Array.find not working in Angular app; does work in Console
body: <p>An Angular app I'm developing has a <code>SourceService</code> that first fetches sources from an API endpoint, stores them into memory and serves as a local cache that can be retrieved by <code>id</code>. So far so good, I'd think. But the function <code>findSourceById</code> always returns <code>undefined</code>. Why?</p>
  <pre><code>  findSourceById(id: number): Source {
      console.log(this.sources);
      console.log(id);
      console.log(this.sources.find(s =&gt; s.id === id));
      return this.sources.find(s =&gt; s.id === id)
    }
  </code></pre>
  <p>Output of the above:</p>
  <blockquote>
  <p>Array [{id: 1} {id: 2}] // mockup</p>
  <p>2</p>
  <p>undefined</p>
  </blockquote>
  <p>However, if I use DevTools to assign the array to a new global variable and then run the same <code>find</code> function on that variable, it does return the expected element.</p>
  <p>Also, if I insert the <code>debugger</code> statement just before the return statement, I see that <code>this.sources</code> is still an Array of two, but that the <code>s</code> in the <code>find</code> function definition is undefined. It looks like JavaScript is incorrectly passing the Array elements into the loop iteration.</p>