Simple question: is there a merit of using a shallow object over a deeper one? When I write a code, I tend to use a deep object just so it is easy to understand and classify. But I am wondering if this custom is making my code slower.

I have done a test but I have no idea if I am doing it correctly.

//building necessary objects
var a = {};
var b;
b = a;
for (var i = 0; i < 100; i++) {
  b["a"] = {};
  b = b["a"];
}
var c = {};

//objects used
//a.a.a. ..(101 "a"s).. .a === {}
//c === {}

//1st test: shallow
var d;
var start = performance.now();
for (var i = 0; i < 1000000000; i++) {
  d = c;
  d = null;
}
var end = performance.now();
console.log('Shallow: ' + (end - start));

//2nd test: deeper
var e;
var start = performance.now();
for (var i = 0; i < 1000000000; i++) {
  e = a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a;
  e = null;
}
var end = performance.now();
console.log('Deeper: ' + (end - start));

Simple question: is there a merit of using a shallow object over a deeper one? When I write a code, I tend to use a deep object just so it is easy to understand and classify. But I am wondering if this custom is making my code slower.

I have done a test but I have no idea if I am doing it correctly.

//building necessary objects
var a = {};
var b;
b = a;
for (var i = 0; i < 100; i++) {
  b["a"] = {};
  b = b["a"];
}
var c = {};

//objects used
//a.a.a. ..(101 "a"s).. .a === {}
//c === {}

//1st test: shallow
var d;
var start = performance.now();
for (var i = 0; i < 1000000000; i++) {
  d = c;
  d = null;
}
var end = performance.now();
console.log('Shallow: ' + (end - start));

//2nd test: deeper
var e;
var start = performance.now();
for (var i = 0; i < 1000000000; i++) {
  e = a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a;
  e = null;
}
var end = performance.now();
console.log('Deeper: ' + (end - start));

the result(ms):

shallow 3229 3304 3246 3253 3277
deep    3375 3343 3247 3193 3248

The test times for the deep object is not slow, but sometimes even faster than the shallow one. Despite the result, I am not confident enough to conclude that they are the same speed. Is there any difference between two of them?

• javascript
• performance
• javascript-objects

Share Improve this question Follow edited Sep 5, 2017 at 7:09 martian17 asked Sep 5, 2017 at 4:43 martian17martian17 50033 silver badges1919 bronze badges 5

• Surely you're kidding? 1 billion operations in just over 3 seconds and you're quibbling about maybe ±100 ops? Even for a contrived worst case? This is premature optimisation writ large! The variances in implementations and systems will massively outweigh any small change in performance between the two. – RobG Commented Sep 5, 2017 at 5:15
• Such kind of speed tests are never really usefully. You test some artificial code snippet that would never be used in such a way in real code, there is a high chance that the optimiser of a js engine would behave pletely different on this example then on real code. – t.niese Commented Sep 5, 2017 at 5:19
• Nested accesses are going to be slower generally, but the difference is too small to matter really as a property access is a fast O(1) operation. Note other factors and processes on your puter can contribute to those minor time differences. – Spencer Wieczorek Commented Sep 5, 2017 at 5:20
• 1 I think I can conclude that the speed difference is too tiny to count as a major effect because of today's advanced JS engine optimizations. – martian17 Commented Sep 5, 2017 at 7:02
• 1 Thank you guys for all the answers and suggestions. – martian17 Commented Sep 5, 2017 at 7:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

1. You are using unrealistic code to test "real code", which is nonsense
2. You use Date.now() which is approximation to timestamp and you should use performance.now() to test js speed. Currently, even with good test code, you get wrong results.
3. JS engines are updating all the time. There were times when deep objects were slow, it's not a case anymore for the last x years. It's such an old problem that I can't even remember the years or google anything valuable out.

It is an optimisation in the js engine to access objects directly and allow for deep objects to be cashed in a variable which takes less time to reach. So it is faster to access them without having to go through the chain. For example:

var a={a:{a:{}}}
var b=a.a.a
var c=b
// is faster than 
var c=a.a.a

For more information read this: JavaScript Performance: Mutiple variables or one object?