JS Hint - Cyclomatic complexity number for this function & Don't make functions within a loop

Question

JavaScript Don't make funcitons within a loop and showing Cyclomatic complexity. I can not get around JSHint's error message. Here is the loop I am using:

var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
for (var i = 0; i < keys.length; i++) {
keys[i].onclick = function (e) {
    var input = document.querySelector('.screen');
    var inputVal = input.innerHTML;
    var btnVal = this.innerHTML;
    if (btnVal === 'C') {
        input.innerHTML = '';
        decimalAdded = false;
    } else if (btnVal === '=') {
        var equation = inputVal;
        var lastChar = equation[equation.length - 1];
        equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
        if (operators.indexOf(lastChar) > -1 || lastChar === '.'){
            equation = equation.replace(/.$/, '');
        }                
        if (equation){
            input.innerHTML = (new Function('return ' + equation))();
        }                
        decimalAdded = false;
    } else if (operators.indexOf(btnVal) > -1) {
        var lastChar = inputVal[inputVal.length - 1];
        if (inputVal !== '' && operators.indexOf(lastChar) === -1){
            input.innerHTML += btnVal;
        }                
        else if (inputVal === '' && btnVal === '-'){
            input.innerHTML += btnVal;
        }                
        if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
            input.innerHTML = inputVal.replace(/.$/, btnVal);
        }
        decimalAdded = false;
    } else if (btnVal === '.') {
        if (!decimalAdded) {
            input.innerHTML += btnVal;
            decimalAdded = true;
        }
    } else {
        input.innerHTML += btnVal;
    }
    e.preventDefault();
};

}

How to reduce Cyclomatic complexity number for this function is 12

possible duplicate of [how could I reduce the cyclomatic complexity?](http://stackoverflow.com/questions/17927835/how-could-i-reduce-the-cyclomatic-complexity) — shet_tayyy, Aug 20 '15 at 13:00
Reduce cyclomatic complexity by writing something that is not so cyclomatically complex. Cyclomatic complexity indicates conceptual confusion. It could also be called the "spaghetti index". Think about the problem and how it breaks down and can be composed of pieces. Then write each piece. Then combine the pieces. — , Aug 20 '15 at 16:04

score 1 · Answer 1 · answered Aug 20 '15 at 15:19

Okay, so cyclomatic complexity is basically a measure of the number of possible paths through a function. So it multiplies up all the loops and conditionals. You've got a for() loop with a whole stack of nested if() and else blocks inside it, so yes, that will give a very large complexity score.

The way to reduce it is to split that code into multiple functions. Each function should do part of the job, and will therefore have a lower complexity score. Because complexity multiplies up with each conditional, splitting them will result in several functions with a much lower total complexity.

Exactly how you break up the functions is up to you, but the general advice is to break them down as much as possible; the ideal function is one that does just one thing, and nothing more.

JS Hint - Cyclomatic complexity number for this function & Don't make functions within a loop

1 Answers1