CODEWITHSUNDEEP
javascriptobject
Q_Mlilo
Q_Mlilo

Reputation: 1787

Handling boolean values

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

Upvotes: 0

Views: 356

Answers (7)

balupton
balupton

Reputation: 48630

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;

Upvotes: 0

CaffGeek
CaffGeek

Reputation: 22054

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

Upvotes: 0

Daniel Vassallo
Daniel Vassallo

Reputation: 344291

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 operand1.

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 {}"

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

Upvotes: 1

Zafer
Zafer

Reputation: 2190

try this:

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

Upvotes: 0

lincolnk
lincolnk

Reputation: 11238

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;

Upvotes: 2

Tom Gullen
Tom Gullen

Reputation: 61737

|| 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.

Upvotes: 1

Brett Kail
Brett Kail

Reputation: 33936

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

Upvotes: 4

Related Questions