optimization - Javascript multiple asignment re-evaluation or result passing? -

the multiple assignment (or called chaining?) i'm talking assignment such as:

a = b = c = 2; 

...after a, b, , c equal 2;

my question of optimization is, given following code:

var dom1 = document.getelementbyid('layout_logos'); var dom2 = document.getelementbyid('layout_sitenav'); ... function layout_onscroll(){   ...   dom1.style.height = dom2.style.top = maxlogoheight - scrolltop;   ... } 

from i've been reading, i'm afraid code in layout_onscroll evaluating to:

dom2.style.top = maxlogoheight - scrolltop; dom1.style.height = dom2.style.top; 

.. gives right value accesses dom2 twice -- once set top , once top. (note i'm coming .net background microsoft wraps in layers upon layers of accessor functions making loops using buried variables prohibitively slow.)

if so, faster create additional variable , assign both dom elements variable?

  ...   var temp_var = maxlogoheight - scrolltop;   dom1.style.height = temp_var;   dom2.style.top = temp_var;   ... 

the obvious loss doing comes allocating temp var every time. if dom2.style.top accessed 2 getter functions under hood (e.g. if first version calls dom2.getstyle().gettop() in turn parses text of dom2's css word 'top') allocating temp var may faster.

this:

dom1.style.height = dom2.style.top = maxlogoheight - scrolltop; 

… not quite same this:

dom2.style.top = maxlogoheight - scrolltop; dom1.style.height = dom2.style.top; 

instead, right-hand operand maxlogoheight - scrolltop assigned each of dom1.style.height , dom2.style.top.

we can see in following example:

snippet

var d= document.getelementbyid('d');    s = d.style.width= 'abc';  console.log(s);             //'abc'    d.style.width= 'abc';  s= d.style.width;  console.log(s);             //null string

#d {height: 100px; width: 100px; background: red;}

<div id="d"></div>

abc invalid width, , therefore discarded d.style.width. however, you'll see s assigned abc in first console.log(), , it's assigned null string in second console.log().

---

following example may more intuitive:

const x = 3;  var y = x = 6;                   // x cannot change.  y 3 or 6?  document.body.innerhtml= x + y;  // -> 9 ... y must 6!