0
var obj = {
          name: {
            firstName: 'A',
            lastName: 'B'
          }
        }

Code snippet 1:

var fName = obj.name.firstName;
var lName = obj.name.lastName;

Code Snippet 2

var name = obj.name;
var fname = name.firstName;
var lname = name.lastName;

Is Code Snippet 2 performs better than Code Snippet 1 in Javascript ? Is there any optimization around Code Snippet 1 ?

Aditya Bhave
  • 998
  • 1
  • 5
  • 10
  • Why don't you test this yourself? https://duzun.me/playground/js_speed#c=var%20fName%20%3D%20obj.name.firstName%3B%0Avar%20lName%20%3D%20obj.name.lastName%3B%0A%0A%2F%2Fvar%20name%20%3D%20obj.name%3B%0A%2F%2Fvar%20fname%20%3D%20name.firstName%3B%0A%2F%2Fvar%20lname%20%3D%20name.lastName%3B&d&i=var%20obj%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20name%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20firstName%3A%20'A'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20lastName%3A%20'B'%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%3B%0A%0A&n=1000000000 – Sergiu Paraschiv Jun 12 '19 at 11:20
  • 3
    Sounds like a premature microoptimisation. Is this *really* a bottleneck in your application? – VLAZ Jun 12 '19 at 11:20
  • @VLAZ keep in mind that this is just an example. Maybe he wants to apply this on a larger scale which can optmize his application quite a bit – Kevin.a Jun 12 '19 at 11:22
  • 3
    @Kevin.a it would still be a premature optimisation unless it's specifically a bottleneck. https://xkcd.com/1691/ – VLAZ Jun 12 '19 at 11:25
  • You can use ```const {firstName, lastName} = obj.name;``` (ECMA6+) – weroro Jun 12 '19 at 11:36
  • @weroro somehow I doubt this will be measurably different from either of the above. – VLAZ Jun 12 '19 at 11:42
  • 2
    You can always check performance on jsperf. I made it for you: https://jsperf.com/sub-objects-attributes-access – Roman Spiridonov Jun 12 '19 at 11:46
  • @RomanSpiridonov yep, hardly a difference between these. The performance measure is within the margin of error and running multiple times does give different ones as the "top". Also, most of the time, the results are close enough to be considered the same. Moreover, each case is so performant that it's *at best* a micro optimisation that will hardly save as much time *in total* over the entire course of running the application as is spent *running the tests* to see what is the "most optimised code". – VLAZ Jun 12 '19 at 12:02
  • My question was more towards internal optimization performed by Javascript. Is there any in this case ? – Aditya Bhave Jun 12 '19 at 12:04
  • 1
    Optimisation should always have criteria of optimisation. What do you prefer? Running time? Using memory? CPU time? Or what? Anyway, you can get answers on such questions by reading source code of V8 engine and it's JavaScript part or running it in debug mode and looking for your answers while it will be evaluate your JS code. Look on the root of problem and good luck) – Roman Spiridonov Jun 12 '19 at 12:20
  • 1
    In this case, I would use Code Snippet 2, but not because of its better performance but rather because of the reduced code duplication. – Bergi Jun 12 '19 at 12:50
  • 1
    These are considered micro-optimizations with no material impact on the performance. We don't do it only for performance, but also for maintainability. If we use x.y.z.a and x.y.z.b, then we are making out future life harder because if the structure changes to x.x.y.y.z.* then now we need to make sure everywhere we traverse the structure, we copy/paste it - so our code is less DRY. This is why we want to memoize it, so we only need to change it in one place and be guaranteed no bugs. The last point is that it also results in more legible (and thus more maintainable) code. – Milan Adamovsky Jun 12 '19 at 19:41

0 Answers0