Tutorial :Javascript: Why compare with null?



Question:

An open source JavaScript project I work on includes code:

if (color) {        tapeDiv.style.backgroundColor = color;        // set color here if defined by event. Else use css      }  

A contributor wants to change it to

if (color != null) {  // this line changed        tapeDiv.style.backgroundColor = color;        // set color here if defined by event. Else use css      }  

color is a string var. Only a string of more than 0 characters should be used to explicitly set the color.

Since JS casts "" and null as boolean false, why would the comparison != null be needed?

Am I missing something in thinking that the first form is just as good (and a bit shorter) than the second?

I see comparisons with null quite often in JS source. Why are they needed when all JS simple objects have known results when cast as booleans?

Thanks,

Larry

ps. I suppose if 0 (an integer) was a valid case, then if(0) would be false [a problem] and if(0 != null) would be true [allows the 0 case]. Any other reason?

pps. Should have mentioned that the tapeDiv is newly created. So there's no point to resetting the style to "" since the div is brand new.


Solution:1

No, and your ps is correct. Null would evaluate to false, and if null needs to be distinguished from empty string or 0, then you'd do the null check.

Or it could just be for clarity. It's more descriptive to indicate that you're specifically looking for null.


Solution:2

Evaluate the assignment with all possible falsy values and you'll get your answer:

tapeDiv.style.backgroundColor = false; // does nothing    tapeDiv.style.backgroundColor = 0;     // sets as "black",                                          // but ignored by FF    tapeDiv.style.backgroundColor = null;  // resets the background-color                                         // to use whatever is defined                                         // in a stylesheet (if any),                                         // but ignored by IE.    tapeDiv.style.backgroundColor = '';    // resets the background-color                                         // to use whatever is defined                                         // in a stylesheet (if any).  

The check for "if (color)" will not let any of them through.

The check for "if (color != null)" will let 1), 2) and 4) through. 1) doesn't do anything, 2) won't work as expected in Firefox, and 4) will always work as expected. However, "works" is dependent on your context (which you did not provide).

Hope that helps.


Solution:3

Does backgroundColor = "" do anything? Does that set the color to the default color? If that is the case, then it would make sense, as a way to reset the color.

if(color) {}

would fail if color is "", but in your 2nd case it would reset the backgroundColor.


Solution:4

If color could come in as an integer, you couldn't set the background to black (#000000 = 0).


Solution:5

Only a string of more than 0 characters should be used to explicitly set the color.

Why? Assigning the empty string means the color will be reset (ie the default value defined by CSS will be used), a perfectly valid use case.

All you should do is check if color is defined, ie

typeof color !== 'undefined'  

or if it's a string variable

// checks for primitive strings  typeof color === 'string'    // checks for primitive strings and string objects  typeof color === 'string' || color instanceof String    // checks for primitive strings and string objects, cross-frame safe  Object.prototype.toString.call(color) === '[object String]'  

if it might contain values of incorrect type.


Solution:6

if(typeof color == 'string' && color.length)

For typeof is enough to use "==" and if the typeof is string then it will check for color.length. Otherwise, it will exit if before checking second condition. This I believe is the most complete solution.

But, if you're sure color is a string variable and is defined somewhere before being initialized, then you could use just "if(color)" as you did, but keep in mind that if color is not defined at the moment of if statement, you will get a ReferenceError.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »