title: How is `each` different from `for-loop` when returning a value?
body: <p>I have my <code>each</code> function which I created to emulate Underscore.js's <code>_each()</code> for my Javascript study.</p>
  
  <pre><code>var each = function(list, iteratee) {
      if (Array.isArray(list)) { // list is array
          for (var i = 0; i &lt; list.length; i++) {
              iteratee(list[i], i, list);
          }
      } else if (list.constructor === Object) { // list is object
          for (var key in list) {
              iteratee(list[key], key, list);
          }
      }
  };
  </code></pre>
  
  <p>Then I wanted to create a function <code>find</code> which is also available from Underscore.js. This function looks through each value in the <code>list</code>, returning the first one that passes a truth test (<code>predicate</code>), or
  <code>undefined</code> if no value passes the test. The function returns as soon as it finds an acceptable element and doesn't traverse the entire list.</p>
  
  <p>Here is my version of <code>find</code> that I came up with.</p>
  
  <pre><code>var find = function(list, predicate) {
      each(list, function(elem){
          if (predicate(elem)) {
              return elem;
          }
      });
  };
  </code></pre>
  
  <p>I thought it would return a value immediately after it has found a true value for an element that passes a test from an external predicate function. But instead, it's giving me an <code>undefined</code>.</p>
  
  <p>Below code works as I expected. But why would they provide different output?</p>
  
  <pre><code>var find = function(list, predicate) {
      if (Array.isArray(list)) { // list is array
          for (var i = 0; i &lt; list.length; i++) {
              if (predicate(list[i])) {
                  return list[i];
              }
          }
      } else if (list.constructor === Object) { // list is object
          for (var key in list) {
              if (predicate(list[key])) {
                  return list[key];
              }
          }
      }
  };
  </code></pre>
  
  <p>What I don't understand is that why doesn't <code>each</code> works as I expected when I included it in my <code>find</code> function. Wouldn't they simply different in terms of their style of expression? In other word, one is functional style, and another is not?</p>