Is it faster to loop through JavaScript objects with fewer properties?

Question

If there are two object definitions and one of the objects has a lot more properties than the other -

Example objects:

var personObjectType1 = 
       {
          name: [a string],
          age: [an int]
       };

var personObjectType2 = 
       {
          name: [a string],
          age: [an int],
          address: [a string],
          photo: [a link],
          spouse: [a string],
          cars: [an array of strings],
          children: [an array of strings],
          pets: [an array of strings],
          father: [a string],
          mother: [a string],
          birthdate: [a date]    
       };

And you have an equal length array of each of those objects, will looping through the array of objects be faster for the objects with fewer properties?

(NOTE: The same action is being performed on each type of object)

Example code:

//personObjectType1Array is an array of 10000 personObjectType1's
//personObjectType2Array is an array of 10000 personObjectType2's

for (var i = 0; i < personObjectType1Array.length; i++)
{
    console.log(personObjectType1Array[i].age); 
}

for (var j = 0; j < personObjectType2Array.length; j++)
{
    console.log(personObjectType2Array[i].age); 
}

Would one loop run faster than the other? Why or why not?

EDIT: Responses are saying that there is no difference, can anyone say why?

Possible duplicate of [How can I benchmark JavaScript code?](https://stackoverflow.com/questions/1003855/how-can-i-benchmark-javascript-code) — 4castle, Dec 13 '17 at 04:04
This is fact that there is no time difference of running both of code, The time consumption of accessing the property value is seems same whether it is more of less. Still do you have any demo where the performance is varies than put here we can explore — programtreasures, Dec 13 '17 at 08:00

programtreasures · Accepted Answer · 2017-12-13T04:24:24.087

The performance is seems almost same with both the array

var personObjectType1Array = [];
var personObjectType2Array = [];

for(var i=0; i<10000; i++)
  {
    personObjectType1Array.push({
          name: '[a string]',
          age: 25
       });
    
    personObjectType2Array.push(
      {
          name: '[a string]',
          age: 25,
          address: '[a string]',
          photo: '[a link]',
          spouse: '[a string]',
          cars: '[an array of strings]',
          children: '[an array of strings]',
          pets: '[an array of strings]',
          father: '[a string]',
          mother: '[a string]',
          birthdate: '[a date]'    
       }
    );
  }


//personObjectType1Array is an array of 10000 personObjectType1's
//personObjectType2Array is an array of 10000 personObjectType2's

var startTimeArray1 = window.performance.now();

for (var i = 0; i < personObjectType1Array.length; i++)
{
    //console.log(personObjectType1Array[i].age); 
}

console.log('TimeArray1 : ' + (window.performance.now() - startTimeArray1));

            
var startTimeArray2 = window.performance.now();

for (var j = 0; j < personObjectType2Array.length; j++)
{
    //console.log(personObjectType2Array[i].age); 
}

console.log('TimeArray2 : ' + (window.performance.now() - startTimeArray2));

Here I have created a demo

https://jsbin.com/hurewod/edit?js,console

manikant gautam · Answer 2 · 2017-12-13T16:18:36.723

you can check time taken of both in console.Execution time of those having more property will be more.

var personObjectType1 = 
       {
          name : 'xyz',
          age : 12,
          roll : 23,
          code :29,
          height :26,
          address:{"streetNo":121,"City":"New Delhi"}
       };

var personObjectType2 = {name : 'xyz'};
    
 var t0 = performance.now();
        for (var i = 0; i < personObjectType1.length; i++){
         //console.log(personObjectType1[i].name); 
      }
     var t1 = performance.now();
     console.log("Call to personObjectType1 took " + (t1 - t0) + " milliseconds.")
     var t2 = performance.now();
     for (var j = 0; j < personObjectType2.length; j++){
       //console.log(personObjectType2[j].name); 
     }
      var t3 = performance.now();
     console.log("Call to personObjectType2 took " + (t3 - t2) + " milliseconds.")

score 0 · Answer 3 · answered Dec 13 '17 at 04:04

Probably because the code needs to be compiled the first time through. You'll get the best metrics by calling all methods first, then execute. Incidentally, the difference in performance between loop will be negligible and the readability benefits of using loop have a marginal performance benefit.

Is it faster to loop through JavaScript objects with fewer properties?

3 Answers3