title: Why the extra comma in Array#map output used in innerHTML?
body: <p>Previous posts have mentioned how the <code>toString()</code> method that will place commas between every item mapped through, and that this could be remedied by using <code>join(" ")</code>.</p>
  
  <p>Below, Attempt 2 adds a comma between the displayed objects whereas Attempt 1 doesn't. Why is this?  </p>
  
  <p>And how can Attempt 2 be revised so that its output replicates Attempt 1?</p>
  
  <pre><code>var data = [ {"name":"John","age":38}, {"name":"Mary","age":33}]
  </code></pre>
  
  <p>Attempt 1 (works perfectly!):</p>
  
  <pre><code>data.map(function(e) {
     display2.innerHTML += "Name: " + e.name + " Age: " + e.age + "&lt;br /&gt;";
  })
  </code></pre>
  
  <p>Output: </p>
  
  <pre class="lang-none prettyprint-override"><code>Name: John Age: 38
  Name: Mary Age: 33
  </code></pre>
  
  <p>Attempt 2 (adds a comma between elements – why?):</p>
  
  <pre><code>function getNameAge(e) {
    var nameAge = "Name: " + e.name + " Age: " + e.age + "&lt;br /&gt;";
    return nameAge;
  }
  
  display2.innerHTML = data.map(getNameAge);
  </code></pre>
  
  <p>Output:</p>
  
  <pre class="lang-none prettyprint-override"><code>Name: John Age: 38
  ,Name: Mary Age: 33
  </code></pre>