title: Combine elements of array of objects using a separator
body: <p>This is a simple problem with a number of simple solutions, and I'm trying to figure out which is best. I would like a solution which is terse and readable.</p>
  
  <p>Here's the issue. I have an array of objects, and I want to combine several of the object members into pipe separated strings. As an example for this data:</p>
  
  <pre><code>[
      {
          foo: 1,
          bar: 2
      },
      {
          foo: 10,
          bar: 20
      }
  ]
  </code></pre>
  
  <p>I want to be able to create strings like this:</p>
  
  <pre><code>foo = "1|10";
  bar = "2|20";
  </code></pre>
  
  <p>If the items were stored in separate arrays, this would be as simple as using Array.join.</p>
  
  <p>Here's my current solution:</p>
  
  <pre><code>var foo = "";
  var bar = "";
  
  var firstItem = obj.splice(0,1)[0];
  foo = firstItem.foo.toString();
  bar = firstItem.bar.toString();
  
  obj.forEach(function (item) {
      foo += "|" + item.foo.toString();
      bar += "|" + item.bar.toString();
  ​});
  </code></pre>
  
  <p>I also considered the following solution using Array.reduce, but browser support for this is still lacking. I am using Prototype, and <a href="http://prototypejs.org/api/array/reduce" rel="nofollow" title="it's Array.reduce">it's Array.reduce</a> is unfortunately a completely different function than the <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce" rel="nofollow" title="native JS implementation">native JS implementation</a>.</p>
  
  <pre><code>var strings = obj.reduce(function (a, b) {
      return {
          a.foo.toString() + "|" + b.foo.toString(),
          a.bar.toString() + "|" + b.bar.toString()
      };
  });
  
  // value of strings is now:
  // {
  //     foo: "1|10",
  //     bar: "2|20"
  // }   
  </code></pre>
  
  <p>Are there any more elegant ways to do this?</p>