JavaScript commutative behavior for function call. Needed pointers for what exactly happens behind scenes

Question

I have following code and want to check commutative property with impure functions. Can anyone explain why the first two console log print 3, 3 and why the direct function call print 3 and -3?

var multi = 1;
const f = x =>{
    multi = -multi;
    return x * multi;
}

let a = f(2);
let b = f(5);
console.log("a+b:: ",a+b);
console.log("a+b:: ",b+a);
console.log("a+b:: ",f(2) + f(5));
console.log("a+b:: ",f(5) + f(2));

Any suggestions/explanation is appreciated.

Answer 1

For the first two logs, you're only invoking the functions twice - in these lines:

let a = f(2);
let b = f(5);

after which a and b don't change. 5 + -3 is the same as -3 + 5.

For the last two logs, you invoke the functions four times, and the signs invert each time the function is called, resulting in

f(2) + f(5) // -2 + 5
f(5) + f(2) // -5 + 2