title: What's going on the function inside of reduce method in JavaScript? - JavaScript30 exercise
body: <p>I have been working on the array exercise on Wes Bos's JavaScript30.
  Please help me out with <a href="https://youtu.be/HB1ZC7czKRs?t=1340" rel="nofollow noreferrer">this exercise.</a>, which is #8.</p>
  <p>The code in the video is the following.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const data =['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck']
  
  const transportation = data.reduce(function(obj, item) {
    if (!obj[item]) {
      obj[item] = 0;
    }
    obj[item]++;
    return obj;
  }, {});
  console.log(transportation)</code></pre>
  </div>
  </div>
  </p>
  <p>I tried two versions and get the wrong output or an error, and would like to figure out the difference between the code above and these two. Also, I'd like to understand what was going on with these two codes.</p>
  <p>One is the following and the difference is that setting <code>else</code> block.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck']
  
  const transportation = data.reduce(function(obj, item) {
    if (!obj[item]) {
      obj[item] = 0;
    } else {
      obj[item]++;
    }
    return obj;
  }, {});
  
  console.log(transportation)</code></pre>
  </div>
  </div>
  </p>
  <p>This returns the object below.</p>
  <p><code>{car: 0, truck: 0, bike: 0, walk: 0, van: 0}</code></p>
  <p>In this case, does <code>else</code> detect nothing? How come the function keeps returning the same value zero?</p>
  <p>Another one is the following and the difference is putting <code>return</code> inside of <code>else</code> block.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck']
  
  const transportation = data.reduce(function(obj, item) {
    if (!obj[item]) {
      obj[item] = 0;
    } else {
      obj[item]++;
      return obj;
    }
  }, {});
  
  console.log(transportation)</code></pre>
  </div>
  </div>
  </p>
  <p>This returns an error saying <code>Uncaught TypeError: Cannot read property 'car' of undefined</code>.</p>
  <p>I understand that to return the object inside <code>else</code> block causes an error because this terminates the execution.</p>
  <p>However, still don't understand the meaning of that error message.  Should I have defined each object key somewhere in some way?</p>