Most performant way to build object from array of objects

Question

Currently, I'm building an object from an array of objects with the following:

var popOverOptions = {
  defaultOption: true
}

if (a) {
  options.push({a: "b"});
}

if (c) {
  options.push({c: "d"});
}

// Loop through array of objects
for (var i = 0; i < options.length; i++) {
   // Add objects in array to popoverOptions object
   for (key in options[i]) {
     popoverOptions[key] = options[i][key]
   }
}

I'm thinking this could be optimized and I'm curious if there is a better way to write this, possibly using .reduce(), .forEach() or some other method.

You are iterating each option just once, so unless you are repeating keys in those options, there shouldn´t be a more performant way, just a shorter version — juvian
– juvian, Commented Mar 30, 2015 at 17:14
Two minor optimizations come to mind: 1. If there's a canonical list of attributes to be copied, iterate over these and then search the array for that attribute 2. If there's a canonical list and the last appearance wins, search from the end of the array and break once you find an appearance. Fundamentally, you need to check every object in at least some cases, so I don't see an obvious way to significantly improve efficiency. — Andrew Larson
– Andrew Larson, Commented Mar 30, 2015 at 17:15
1) Worry about performance when it becomes an issue. 2) A for loop is about as performant as you can get when looping over an array. The only thing that is faster is no loop (unrolled). — Adam Jenkins
– Adam Jenkins, Commented Mar 30, 2015 at 17:16

Oriol · Accepted Answer · 2015-03-30 17:11:41Z

3

In ECMAScript 6, you can use

Object.assign to copy the properties to popOverOptions
The spread operator to expand the options array.

Object.assign(popOverOptions, ...options);

answered Mar 30, 2015 at 17:11

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Oriol Over a year ago

Note Object.assign only copies own properties, but your for...in loop also iterates inherited ones. Not sure if it's a problem.

Adam Jenkins Over a year ago

Shorter, yes. More performant, not even close. In the only browser that currently supports Object.assign (Firefox 35+), this is about 45% slower than using a regular for loop - jsperf.com/loop-versus-assign/2

Oriol Over a year ago

@Adam On my Nightly 39, a loop is 42% slower than Object.assign. Screenshot

hybrid Over a year ago

Ah, I was looking at Object.assign at one point, forgot about it though. Thanks for the info and thanks Adam for the jsperf link, good to know.

Adam Jenkins Over a year ago

@Oriol - I hope I'm not offending you, but are you sure you're reading the results correctly?

|

Harold Ship · Accepted Answer · 2015-03-30 17:30:19Z

1

You can optimise the loop itself like this:

for (var i=0, n=options.length; i<n; ++i) {

This reduces the number of times you need to access options.length which is slower than reading it from a local.

A smaller optimisation:

for (var i=options.length-1; i--; /* empty */) {

Source: http://www.phpied.com/extreme-javascript-optimization/

answered Mar 30, 2015 at 17:30

Harold Ship

1,0391 gold badge9 silver badges14 bronze badges

2 Comments

Oriol Over a year ago

The last time I measured it, caching the length had the same performance on Chrome, and a worse performance on Firefox.

Rick Hitchcock Over a year ago

@Oriol, this jsPerf shows a slight performance increase using caching in Chrome: jsperf.com/array-length-vs-cached

Rick Hitchcock · Accepted Answer · 2015-03-30 17:48:20Z

You can cache length for a slight speed improvement.

If the keys in your array are identical for each element, you can get twice the speed (in Chrome) by caching Object.keys(options[0]), and iterating through that.

Even if the keys aren't the same, you can still get approx. 25% increase in speed by iterating through Object.keys(options[i]).

var options= [];

for(var i = 0 ; i <= 1000 ; i++) {  //create array of objects with random numbers
  options[i]= {};
  for(var j = 0 ; j <= 5000 ; j++) {
    options[i][j]= Math.random();
  }
}

var popOverOptions = {};

function keyin() {
  var timer= new Date();
  for(var i = 0, leni = options.length ; i < leni; i++) {
    for(var key in options[i]) {
      popOverOptions[key] = options[i][key];
    }
  }
  alert((new Date()-timer)/1000+' seconds');
} //keyin

function objkeys(same) {
  var timer= new Date(),
      keys= Object.keys(options[0]);

  for(var i = 0, leni = options.length ; i < leni; i++) {
    if(!same) keys= Object.keys(options[i]);
    for(var key = 0, lenk = keys.length ; key < lenk ; key++) {
      popOverOptions[keys[key]] = options[i][keys[key]];
    }
  }
  alert((new Date()-timer)/1000+' seconds');
} //objkeys

<button onclick="keyin()">key in options</button><br>
<button onclick="objkeys(true)">Object.keys, same keys per element</button><br>
<button onclick="objkeys(false)">Object.keys, different keys per element</button>

Collectives™ on Stack Overflow

Most performant way to build object from array of objects

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related