Vanilla JavaScript if clause executes when false

Question

This is my first post and I am thankful in advance for all the support.

Short background:

I am part of a script team developing a script to make our tasks easier. We are using a MySQL DB to allow the team choose which features we create each wants to use. The DB is working fine, as well as the data retrieval.

Issue:

Even though the cookies we create are set to hold the boolean value False, a function is always executing the if clause it holds.

function tkAlwaysViewAll(snippet) {
    console.log('Viewall: ' + snippet);
    if (snippet) {
            var ticketURL = window.location.href;
            var showAllURL, x;
            x = ticketURL.indexOf('block=');
            // if the string 'block=' does not exist in the URL, it adds the parameter and
            // reloads the ticket to the correct 'view all' URL
            if (x == -1) {
                showAllURL = ticketURL + '&block=15:.a';
                window.location.href = showAllURL;
            } else {
                console.log('Viewall function executed');
            }
    }
}

The code above should execute only when the value of snippet is set to True. However, it is being executed always, ignoring the value of snippet. Below you see the output of the console.log() which has been included for the debugging only. The first console.log() displays the value of the snippet variable. The second console.log() will be displayed only after the page has been reloaded (or when directly using the link with the 'block' parameter, but we are aware of this and not using it).

When snippet is True:

Viewall: true
Viewall function executed

And when the snippet is False (function should not be executed):

Viewall: false
Viewall function executed

The function is not using any global variables nor being altered by any other events.

What am I doing wrong in this function?

Best regards

my guess is you do not have a boolean. `console.log(snippet , typeof snippet)` — epascarello, Dec 07 '18 at 13:57
Are you sure it's not a string? `"false"` instead of `false` — ulentini, Dec 07 '18 at 13:57
https://stackoverflow.com/questions/32720503/why-is-false-truthy-in-javascript — epascarello, Dec 07 '18 at 13:59
We need to know **exactly** what `snippet` is set to. So please create a [Minimal, **Complete**, and Verifiable example](https://stackoverflow.com/help/mcve) of your problem. You probably should read about [Javascript type coercion](https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript) that's likely your issue. If you [change your `if` to `if(snippet === true)`](https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons) it'll probably do *something* different. But this all depends on what that variable is — Liam, Dec 07 '18 at 14:12
`Even though the cookies we create are set to hold the boolean value False` cookies hold *string* values. In fact, it's even more correct to say that cookies *are strings*. They get chopped up into keys and values but the point is that whatever type you put in a cookie would be changed to a string upon retrieval so if you put in `id=1` and you fetch `id`, you'd get the string `"1"`. Similarly, the boolean `false` is going to be returned as the string `"false"`. — VLAZ, Dec 07 '18 at 14:12
@Liam *If you change your if to if(snippet === true) it'll probably do something different.* This will give us a new question ***if clause doesn't execute when true***, I assume :) — connexo, Dec 07 '18 at 14:30
This indeed did the trick. We have the cookie configured to be storing the boolean value, I did not expect it to be converted to a string. Thanks a lot to everyone. — Phragos, Dec 07 '18 at 16:37

score 1 · Accepted Answer · answered Dec 07 '18 at 14:14

The reason is that you pass a String "false" to your function (cookies always store Strings). Putting that in an if() condition internally converts that String to a Boolean value. Non-empty strings are converted to true in that mechanism.

Here's what Javascript does with non-Boolean values when converting:

// converts val to Boolean and returns it
function truthy(val) {
  return Boolean(val) 
}

console.log(truthy("true"))    // true
console.log(truthy("false"))   // true
console.log(truthy(""))        // false

console.log(truthy(1))         // true
console.log(truthy(0))         // false

console.log(truthy([]))        // true
console.log(truthy([].length)) // false

console.log(truthy({}))        // true

thank you for the clear example. The function is also working fine to ensure the values returned are boolean. We might include this into the cookie reading function when reviewing the whole script. — Phragos, Dec 07 '18 at 16:40

Vanilla JavaScript if clause executes when false

1 Answers1