How expensive are JS function calls (compared to allocating memory for a variable)?

Question

Given some JS code like that one here:

  for (var i = 0; i < document.getElementsByName('scale_select').length; i++) {
    document.getElementsByName('scale_select')[i].onclick = vSetScale;
  }

Would the code be faster if we put the result of getElementsByName into a variable before the loop and then use the variable after that?

I am not sure how large the effect is in real life, with the result from getElementsByName typically having < 10 items. I'd like to understand the underlying mechanics anyway.

Also, if there's anything else noteworthy about the two options, please tell me.

Answer 1

Definitely. The memory required to store that would only be a pointer to a DOM object and that's significantly less painful than doing a DOM search each time you need to use something!

Idealish code:

var scale_select = document.getElementsByName('scale_select');
for (var i = 0; i < scale_select.length; i++)
    scale_select[i].onclick = vSetScale;

Answer 2

Caching the property lookup might help some, but caching the length of the array before starting the loop has proven to be faster.

So declaring a variable in the loop that holds the value of the scale_select.length would speed up the entire loop some.

var scale_select = document.getElementsByName('scale_select');
for (var i = 0, al=scale_select.length; i < al; i++)
    scale_select[i].onclick = vSetScale;