0

Here is the first way:

var Objek = {
    node : document.getElementById(known_id),
}

So, when i call Objek.node does this always call the document.getElementById ?

Is this second way better? :

var Objek = (function() {
    var getNode = document.getElementById(known_id);


    return {
        node : getNode
    }
})();

I think this second way is better and wouldn't re-call the document.getElementById when I call Objek.node

mplungjan
  • 169,008
  • 28
  • 173
  • 236
user3005114
  • 3
  • 1

2 Answers2

1

In both cases getElementById() is called only once (when you create the object, not when you use objek.node).

In first case ONLY getElementById() is called and value assigned into new object...

...while in second case first your function is called, then getNode variable is created, then getElementById() is called and result is assigned to variable and at last new object is created with given property.

So actually first case is both faster to execute and better to understand by developers.

Radek Pech
  • 3,032
  • 1
  • 24
  • 29
  • 1
    Wow.. im surprised.. before this time, i always think, that the 2nd way is much faster.. but seems im wrong – user3005114 Nov 18 '13 at 15:05
  • If not sure, use jsperf.com: http://jsperf.com/stackoverflow-20050659-2 . You would be suprised how actual speed is different from what most developers think. – Radek Pech Nov 18 '13 at 15:32
  • wow! but, can you explain this: http://jsperf.com/stackoverflow-20050659-2/2 ? why does method with anonymous function is much faster? – user3005114 Nov 18 '13 at 15:45
  • Because it's only creating a function, but NOT calling getElementById(). As a result, you will need to call objek.node() to perform getElementById() instead of just reading objek.node (that means it will be slower every time you use it). This is how you must test it: http://jsperf.com/stackoverflow-20050659-2/4 – Radek Pech Nov 25 '13 at 12:16
0

They are equivalent. In both the getElementByIdmethod is called only one time (when you create the object) and then the stored value in the variable is returned at all times when you do Objek.node

sabotero
  • 4,265
  • 3
  • 28
  • 43
  • im trying to cache to result, i think the 2nd way will cache the function and only return the result when the `Objek.node` method is called – user3005114 Nov 18 '13 at 15:02
  • If what you want is to cache the function so yo can't call it, to do so try this way `var chachedFunction = document.getElementById`and then you can call it with a parameter (the id) like this: `chachedFunction.call(this, "knownId")`but this have not a really utility with the getElementById method. What are you trying to perform? – sabotero Nov 18 '13 at 15:02
  • The result is cached in _node_ in your _first way_ and in _getNode_ in your _second way_. In javaScript the function is executed when you _append_ **()** or **([params])** to the method name. So even your second way is executing the function when you do this `var getNode = document.getElementById(known_id);` and then returning the chached result (which is stored in _getNode_) when you do this: `return { node : getNode }` – sabotero Nov 18 '13 at 15:03
  • So, the first way is faster than 2nd way? Im trying to have fast performance – user3005114 Nov 18 '13 at 15:09
  • They are equivalent. In both the `getElementById`method is called only one time (when you create the object) and then the stored value in the variable is returned at all times when you do `Objek.node` – sabotero Nov 18 '13 at 15:10