console.log failed us in this scenario ...

The Problem

In a previous code-base, we had a problem that seemed to crop up repeatedly. This was one of those problems that was looked at by dozens of developers, with no clear understanding of what the issue was or what was causing it.

Basically, when making a call to the backend, our code was passing a value to another function that did some processing on the data. In the example code below, the majority of the processing is left out since it was not a part of the issue.

This issue, in a code-base of thousands of lines of code, was able to continue without being located because it was a simple issue. This scenario was significantly simplified; the calling code and function called had enough code in place to somewhat mask what was going on.

This issue was extremely difficult to replicate and unfortunately, it got missed as a valid negative test. There was also a ton of additional work that took priority over this issue.

Here is the code ...

function test(input) {
    if (!!input) {
        return true;
    } else {
        return false;
    }
}

We expected input to be a boolean value or undefined. The return value was used, but that's not what was important here.

Looking at a few scenarios, everything seems fine, there was even good testing against this function.

test();      // false
test(true);  // true
test(false); // false

The Actual Problem

As I said, this function was looked at by dozens of competent developers. It wasn't until one of the interns (later hired by the same company) took on this card that the issue was found.

Fortunately for our team, the intern who took the card on was very patient and willing to run through the various permutations to replicate the issue. Once the issue was replicated and appropriate break points in place, the issue became very clear.

Having examined the issue and previous related work, she jumped into Chrome's Developer Tools and marked the line where it returns true. Then, she replicated the issue.

Basically, what she found was that we were receiving an error from the backend at times which gets passed to the function as a string. When the input was examined, it was the 500 Error Message; HTML.

So now, we look at the following scenario ...

test('ERROR'); // true

In this case, we SHOULD have gotten false. Because of a simple TRUTHY issue, the entire house-of-card came tumbling down.

The Resolution

A truly simple fix handled the issue that plagued our team for almost three years.

function test(input) {
    if (input === true) {
        return true;
    } else {
        return false;
    }
}

So, !!input became input === true and the following occurs ...

test('ERROR'); // false

Conclusion

Problem solved!

The code supporting this article is here ...

$ jasmine

Images

Icons made by Smashicons from www.flaticon.com