If (var) vs. if (var != “”)

JavaScript
1

Sample:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Check Text Field Value</title>
    <style>
    </style>
</head>

<body>
    <textarea rows="5" cols="35" id="field" oninput="indicate();"></textarea>
    <div id="indicator"></div>
    <script>
        function indicate() {
            var field = document.getElementById('field');
            var indicator = document.getElementById('indicator');
            if (field.value) {
                indicator.innerHTML = 'Some content';
            } else {
                indicator.innerHTML = 'No content';
            }
        }
        indicate();
    </script>
</body>

</html>

Demo: http://jsfiddle.net/RainLover/eZaRd/

I want to check if the text field is empty or not. I’ve seen many questions and answers some using if (textarea.value) and some using if (textarea.value != “”). Or the following pair:
if (!textarea.value) vs. if (textarea.value == “”).

I wonder what’s the difference between them.

2

Hi Rain Lover,

Let’s start with if (textarea.value != "") and if (textarea.value == ""). These are both explicitly checking for an empty string. The only difference is that the first check will pass if the value is not an empty string whereas the second check passes if the value is an empty string.

The second two conditions, if (textarea.value) and if (!textarea.value), are relying on Javascript to evaluate the contents of textarea.value as either true or false. This means that some values other than an empty string will also be considered false (undefined, null, NaN, 0 and false - see here for more details).

3

Hi there Rain Lover,

does this help…

[color=navy]
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Check Text Field Value</title>

<script>
(function() {
   'use strict';

   var field,indicator;

function init() {
   field=document.getElementById('field');
   indicator=document.getElementById('indicator');
field.oninput=function() {
   indicate();
 }
   indicate();
 }

function indicate() {
if(field.value.replace(/\\s/g,'').length==0) {
   indicator.innerHTML='No content';
 }
else {
   indicator.innerHTML='Some content';
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
})();
</script>

</head>
<body>

<textarea id="field" rows="5" cols="35"></textarea>
<div id="indicator"></div>

</body>
</html>[/color]

coothead

4

Tho you are relatively safe , since you are getting your data from a submitted from and all submitted form data is in string form we should consider variable typing fro the sake of script durability.

S o let’s examine the logic here:

if (var) will be true on:
var any sting character/number value … except 0,‘’, Nan, etc. ( this is what Fretburner was saying, essentially)

if (var!=‘’) will be true if the variable is not an empty string. So for exampe var=’ ', will be false.

The point is you should consider whether you really want to deal with strings, booleans or boolean equivalents.

Condensing what coothead said. You could create a function to check for “whitespace/empty” strings specifically, by trimming the string and then checking the length to be greater than 0. that would be the safest and most scalable solution.

something like :

function checkE(var){
   if(var replace(/\\s/g,'').length>0) {return  true;} 
   return false;
}

you could call this anytime you wanted to check for blank fields.
hope that helps

5

Thanks for the answer! Here’s a sentence form your reference:

There are only five falsey values in JavaScript: undefined, null, NaN, 0, “” (empty string), and false, of course.

The question is: how can the textarea value in my example be undefined, null, NaN, 0, and false? Would you mind giving an example?

6

Dear coothead,

Thanks for the code! However, I don’t want to ignore whitespace.

7

Hi there Rain Lover,

However, I don’t want to ignore white space.

The code only ignores white space if there is no actual content. :wink:

coothead

8

It can be 0 if that’s what was entered - the string “0” gets converted first to the number 0 and then to false.

It is preferable to not use == and != in JavaScript but to use === and !== instead - that way you don’t get any type conversions taking place except where you explicitly specify one.

9

But when I enter 0 into the textarea it displays Some content.
In action, I see absolutely no difference between if (textarea.value) and if (textarea.value != “”).

10

Zero as a string (“0”) is actually considered truthy by JS. You can try this in your browser’s console:

console.log(("0") ? 'truthy' : 'falsey');

anything you put inside the inner parentheses will be evaluated to true or false.

I don’t think it would make much difference in the case of your code, but there are situations where you’d want to distinguish between an empty string / null / undefined etc.

11

Yes but in most cases the form data usually gets processed on the server as well and in some commonly used server side languages the string “0” is considered to be a falsey value - which can lead to the value failing validation on the server if the same validation is applied in both places. So it is best to consider that “0” can be both truthy and falsey if converted to Boolean.

12