Javascript Should I store a reference to a nested object or use it directly?

Question

I assume this has almost no performance impact if you go with either of them, but I was wondering what if it is better to use one or the other.

Given I have:

    var a = { b: {c: { d: ... }}};
    var ref = a.b.c.d;

Should I use a.b.c.d directly or create and use a reference, here named 'ref'?

And furthermore if there is a getter function that returns an object with several levels of complexity:

    var a = { b: {c: { d: ... }}};
    function getObject() {
      return a;
    }
    var ref = getObject();

Is there a difference between getObject().b.c.d and ref?

I know it is not that important, but my OCD doesn't allow me to put it to rest. :D

Both snippets have different purposes, yet, are doing the same thing. If you don't need the `getObject()`, then why would you create it at the first place? — 31piy, Aug 08 '18 at 10:27
Property access like that has a (tiny) overhead. Directly accessing the `d` will be faster. Now the point is: when is that overhead larger than the overhead of declaring a new variable? In the end, chose what you are most comfortable with. Neither will result in a noticeable performance difference. — Cerbrus, Aug 08 '18 at 10:28
@JonasW.: Or find one that specifically discusses this subject. — Cerbrus, Aug 08 '18 at 10:33

score 2 · Answer 1 · answered Aug 08 '18 at 10:30

Property access like that has a (tiny) overhead.
Directly accessing the d by using a ref variable will be faster.

Now the point is: when is the property access overhead larger than the overhead of declaring a new variable?
In the end, chose what you are most comfortable with. Neither will result in a noticeable performance difference.

score 2 · Accepted Answer · answered Aug 08 '18 at 10:33

Javascript Should I store a reference to a nested object or use it directly?

That depends almost entirely on the specific situation. In general, write whatever code is clearest, rather than worrying about efficiency, until/unless you have a performance problem in front of you that you need to solve.

Re your first snippet:

Accessing properties on objects takes non-zero time, but it's very efficient on modern browsers. So using ref instead of a.b.c.d will be faster, but it's unlikely to matter in any code you're writing unless you're doing it hundreds of thousands of times in a row in a tight loop. Worry about that if and when you're doing that.

The other thing to consider is whether other code may modifiy a, or b, or c, such that ref === a.b.c.d is no longer true. If you want your code to see those changes, don't use ref. If you want it protected from such a change, use ref, even though ref may be out of date.

Re your second snippet:

There's a big difference: You're not calling getObject later if you use ref instead. If you know that you want to keep using the object getObject returned to you initially, and/or you want to avoid the overhead of repeating the call, use ref. But presumably getObject exists for a reason, so in some cases it may make more sense to use getObject again. It really varies depending on the details of the situation.

Javascript Should I store a reference to a nested object or use it directly?

2 Answers2

Re your first snippet:

Re your second snippet: