Handling boolean values

Question

Hi Everyone,

Setting default values is one of my favourite things to do when creating JavaScript applications. While working, i came across a bug that could have easily escaped me.

This is how the object is used.

var obj = new App({
             imgs: [];
             preload: false
          });

This is how the object is defined.

var App = function(o) {

    this.imageFolder = o.imgs;

    this.preload = o.preload || true; // the idea is to set a default value of true

    if(this.preload) {

     // preload images here    

   }

}

My question is, how do you handle boolean values when using the || operator

Answer 1

this.preload = "preload" in o ? o.preload : true;

Answer 2

|| stands for or. Let's look at some sample values:

this.preload = o.preload || true;

If o.preLoad = true:

true || true is the same as  = true;

If o.preLoad = false:

false || true always will equal true

Since you define o.preLoad as having a default value of false, the statement will always evaluate to true.

Answer 3

My question is, how do you handle boolean values when using the || operator?

Mine is not an exhaustive answer. @bkail's solution should do the trick. However, I would like to point out the following:

The || operator produces the value of its first operand if the first operand is truthy. Otherwise it produces the value of the second operand¹.

var preload;                     // undefined is falsy
preload = preload || true;
console.log(preload);            // true

var preload = false;             // false is obviously falsy
preload = preload || true;
console.log(preload);            // true

var preload = "";                // empty string is falsy
preload = preload || true;
console.log(preload);            // true

var preload = null;              // null is falsy
preload = preload || true;
console.log(preload);            // true

var preload = "something else";  // a non-empty string is truthy 
preload = preload || true;
console.log(preload);            // returns "something else", the first operand

var preload = {};                // even an empty object is truthy
preload = preload || true;
console.log(preload);            // returns "Object {}"

---

¹ Source: JavaScript: The Good Parts by Douglas Crockford - Page 17

Answer 4

I don't think that construct is appropriate when assigning boolean values (I'd also be careful doing this with numbers) for just the reason you've given- a false value will be considered invalid, even though it's fine and indeed desired.

in your case you could do the assignment with

this.preload = o.preload && true;

Answer 5

try this:

 this.preload = !o || o.preload == null ? true : o.preload;

Answer 6

This should work

this.preload = o.preload === false ? false : true;

If o.preload IS false, then we set it to false, otherwise, it's true

You just might want to add a o = o || {}; at the start to ensure o exists

Answer 7

Just typecast it:

this.preload = Boolean(this.preload);

Or if you don't want non boolean values evaluating to true:

this.preload = typeof this.preload === 'boolean' ? this.preload : false;