Determine what is valid and use duck-typing to check for all three
Photo by Aaron Burden on Unsplash
A common task when validating data is ensuring that a variable, meant to be a string, has a valid value. In the context of a form being filled out, this generally means that the user entered a value.
The Differences Between Each Type
Let?s start by clarifying the fact that undefined, null, and empty string are similar yet ultimately different.
Undefined
The easiest way to explain this state is to consider the variable as non-existent or not declared.
For example, you will receive an error of ReferenceError: a is not defined if you try to print the variable a that has not been declared. Similarly, the data type of an initialized variable is ?undefined?.
console.log(a); // ReferenceError: a is not definedlet b;console.log(b); // undefinedconsole.log(typeof a); // “undefined”console.log(typeof b); // “undefined”
Null
Unlike undefined, the identifier does exist; however, it does not possess any value.
I know, this is weird because the value is in fact null. The two are quite similar, but at the end of the day, we can see that they are different by doing a strict comparison.
let a;console.log(a); // undefinedconsole.log(a == null); // trueconsole.log(a === null); // false
Empty string
A variable that has the data type of ?string? but does not have any character data within it.
An empty string is a valid string; however, functionally it does little being empty and can often cause problems when character data is expected.
let a = “”;console.log(typeof a); // “string”// trying to capitalize the first lettera = a[0].toUpperCase() + a.slice(1);// “TypeError: Cannot read property ‘toUpperCase’ of undefined
In most scenarios, each variable state is different when we compare all three.
let a;let b = null;let c = “”;console.log(a == b); // trueconsole.log(a == c); // falseconsole.log(b == c); // falseconsole.log(a === b); // falseconsole.log(a === c); // falseconsole.log(b === c); // false
Now that we?ve clarified each state, we need to ask the question: ?Is an empty string an invalid value?? There are two solutions depending on the answer.
Empty String Is Invalid
In the event that an empty string is invalid ? meaning we do not want to accept it or we must gracefully handle it ? then we are able to utilize duck-typing to treat the three states as equivalent.
let a;let b = null;let c = “”;if(a) { console.log(“Valid”); } // does not printif(b) { console.log(“Valid”); } // does not printif(c) { console.log(“Valid”); } // does not print
If you?re wondering what the heck duck-typing is, the term alludes to the phrase:
If it walks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck.
Essentially, duck typing prioritizes an object?s attributes and methods rather than its actual type.
Empty String Is Valid
When an empty string is a valid entry, we need to either add to our duck-typed expression or opt for more explicit comparisons.
let a;// the following two expressions evaluate true and would printif(a || typeof a == “string”) { console.log(“Valid”);}if(typeof a != “undefined” && a != null) { console.log(“Valid”);}
For the second example, the order of the expressions is critical.
Because checking for null on an undefined variable will cause an error, we need to validate against undefined first.
In the event that a is undefined, the expression will short-circuit, skipping the null comparison and avoiding the error.
