CODEWITHSUNDEEP
javascript
samchoi
samchoi

Reputation: 63

Setting variable to existing value versus return?

In Javascript, I have a function that sets a variable. If the function tries to set the variable to its current value, is it more "efficient" to break out of the function, or let the function re-set the variable's value?

Example

var a;
function setStuff(x) {
    if (a == x) { return; }
    a = x;
}

versus

var a;
function setStuff(x) {
    a = x;
}

This function will be called on page scroll, so it will be called at a high frequency.

Upvotes: 4

Views: 207

Answers (5)

nasso
nasso

Reputation: 603

I wrote a simple test snippet:

var a;
function setStuffCheck(x) {
    if (a == x) { return; }
    a = x;
}

function setStuff(x) {
    a = x;
}

function benchmark(func){
    var startTime = Date.now();
    var callCount = 1000000;

    for(var i = 0; i < callCount; i++){
        func(10);
    }

    console.log((Date.now() - startTime) + "ms for "+callCount+" calls setting always the same value");

    startTime = Date.now();
    for(var i = 0; i < callCount; i++){
        func(i);
    }

    console.log((Date.now() - startTime) + "ms for "+callCount+" calls setting always different values");
}

benchmark(setStuffCheck);
benchmark(setStuff);

By copying and pasting it in the console (Firefox 46.0.1), I have something like this:

138ms for 1000000 calls setting always the same value
216ms for 1000000 calls setting always different values
77ms for 1000000 calls setting always the same value
78ms for 1000000 calls setting always different values

So the second way seems to be always better. But the results may be different on each computers. However, the difference is noticable only for 1 millions of calls (try changing it to 1000, there'll be no differences).

Upvotes: 1

trincot
trincot

Reputation: 350310

The two do not have necessarily have identical results. Consider this series of calls:

var a;
function setStuff(x) {
    if (a == x) { return; }
    a = x;
}

setStuffCheck(0) ;
setStuffCheck('0');

console.log(a);

Output is not '0', but 0.

For a good comparison, the setStuffCheck function should use the strict equality operator ===.

In my tests in FireFox I see the performance of both functions show very little difference. setStuffCheck seems to take slightly more time to execute than setStuff when the argument has a different value than a, but it is the opposite (also slightly) when the values are the same. The difference in either way is in the order of 2%, which is the kind of fluctuations you get anyway on a typical device/PC for other causes, that have nothing to do with the code.

Anyway, this also means that this slight performance difference will depend on how often you expect to call the function with an argument that is equal to a.

However, the difference is only noticeable when you would do hundreds of millions of calls. If you don't have that many calls, then don't even bother and choose for setStuff.

Upvotes: 0

JonSG
JonSG

Reputation: 13097

There are potentially two factors that will likely drown out any practical performance difference between the two options. In practice, I would suggest that you use the version that is the easiest to understand and explain to others. I think that would probably be the unconditional update but it would be more up to you.

The two things that are likely going to obfuscate any real differences are:

  1. What else are you doing in the function
  2. What effect branch prediction has on your conditional.

Now, specifically to the question of what version is faster. I have set up the following test with each option executed a million times with 10 runs of each test. The global is set to itself 1 in 10 times but you can change that to some other frequency by setting aNew

    var a = 10;
    var ittr = 1000 * 1000;

    function getRandomIntInclusive(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

    function set1(x){
        if (a === x){ return; }
        a = x;
    }

    function set2(x){
        a = x;
    }

    for (var j = 0; j < 10; j++){
        var start = performance.now();
        for (var i = 0; i< ittr; i++){
            var aNew = a - 10 + getRandomIntInclusive(1,19);
            set1(aNew);
        }
        console.log("conditional : " + (performance.now() - start));
    }

    for (var j = 0; j < 10; j++){
        var start = performance.now();
        for (var i = 0; i< ittr; i++){
            var aNew = a - 10 + getRandomIntInclusive(1,19);
            set2(aNew);
        }
        console.log("unconditional : " + (performance.now() - start));
    }

Your results may vary but the I see conditional set() averages about 18 after settling down. The unconditional about the same, maybe 17.5.

Note that the vast bulk of the time here is taken by the call to random(). If you consistently just set the global to itself both functions time at around 1.8 rather than 18, suggesting that whatever else you might do in your set() is likely to obfuscate any performance difference.

Upvotes: 0

Kartikeya Sharma
Kartikeya Sharma

Reputation: 553

The second option makes more sense to me and is more viable as there is very less logic written as compared to the first one as it is checking whether two values are equal or not , whereas in the second option its just re-assigning the variable to a new value.

if condition is always slower compared to when just assigning a new value . So i think you should go with second option.

Upvotes: 0

Phillip Chan
Phillip Chan

Reputation: 993

I don't think the issue is "efficiency".

I do however think there's a practice at play here, which is to generally not manipulate values outside the scope of the function. Having many functions like these in your application will drive you nuts, wondering which function is changing what.

Instead return a new value.

var setStuff = function() {
    return newValue;
}

var a = setStuff();

Upvotes: 2

Related Questions