每次运行时进行检查的更好编码

Question

I am trying to eliminate the useless check in a function, needed check variable is assigned at start-up of the app, so I don't want to check for it each time.

I have a code like this:

btnClose.addEventListener('click', function(e) {
    window.close()
    if (appSettings.sendAnonymousStats) {
      visitor.event("Application", "App has been closed.").send()
    }
})

This is my first try to optimize it, so now it doesn't need to do a "if" check each time it's called;

let btnCloseEv = appSettings.sendAnonymousStats ? btnClose.addEventListener('click', function(e) {
    window.close()
    visitor.event("Application", "App has been closed.").send()
    }) : btnClose.addEventListener('click', function(e) {
    window.close()
})

I wonder if theoretically there are better ways to achieve what I am trying to achieve?

Answer 1

Removing a single if statement, especially considering it only occurs once per click will not effect running time at all.

However for the purpose of discussion say it was performance critical, like if it was attached to onmousemove, then you can adjust your second approach with a small change to reduce code redundancy.

let btnCloseEv = btnClose.addEventListener('click',
    appSettings.sendAnonymousStats ?
    function(e) {
        window.close();
        visitor.event("Application", "App has been closed.").send();
    } : function(e) {
        window.close();
    }
)

This works because functions in JS are higher order functions, which means they treated as variables and can be passed around in the same way variables can be. For instance this would work if a and b were numbers, or functions, or any other type of variable.

var c = someBoolean ? a : b;

---

Say each function was a lot bigger and you wanted to use this approach yet things were becoming unreadable, it would be better to name each function and attach them like so:

 function moreComplexFunc(e) { window.close(); visitor.event("Application", "App has been closed.").send(); // More complex code } function simpleFunc(e) { window.close(); } let btnCloseEv = btnClose.addEventListener( 'click', appSettings.sendAnonymousStats ? moreComplexFunc : simpleFunc ) 

---

Now say that you noticed there was a lot of code duplication in moreComplexFunc and simpleFunc , you could go a step further, and separate the similar code into a 3rd function like so:

 function commonFunc(e) { window.close(); } function func1(e) { commonFunc(e); visitor.event("Application", "App has been closed.").send(); // other code } function func2(e) { commonFunc(e); // other code } let btnCloseEv = btnClose.addEventListener( 'click', appSettings.sendAnonymousStats ? func1 : func2 ) 

The opportunities in a language which supports Higher Order Functions are really endless.

Answer 2

Just in case the function was a little more complex, another approach would be to simply put it in an additional event handler:

let btnCloseEv = btnClose.addEventListener('click',
    function(e) {
        window.close();
        /*
        ... more code ...
        */
    }
)

if (appSettings.sendAnonymousStats) {
    btnClose.addEventListener('click',
        function(e) {
             visitor.event("Application", "App has been closed.").send();
        }
}