Null checking in Javascript (with ternary operator) - javascript

want to check null values. any() method returns null or array of matched result (actually there's a match() method inside which is returned).
$scope.isMobileBrowser = !isMobile.any() ? false : true;
If any() method returns null I want false to be assigned to $scope.isMobileBrowser variable, otherwise true. will the over mentioned snippet fail in any probable case? Is there any other more efficient workaround?
for more details of isMobile object:
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};

Empty string is also a falsy value.
If any() returns an empty string, !isMobile.any() ? false : true will return false, but you probably want true.
This means your code is incorrect for this case.
I'd just do something like isMobile.any() !== null.

As per the any() function, you are returning value of the following expression:
(isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS()
|| isMobile.Opera() || isMobile.Windows())
Each of these functions can either return an Array or null as seen in the doc for match
So while evaluating the OR it will evaluate to the first truth value encountered and doesnt evaluate any further as the expression is already fit to be true. So, for example if the browser is android the expression evaluates to ["Android"]. If windows it will be ["Windows"]. If none of these, it will be null. Which makes it clear that any() can only return an Array or null.
isMobileBrowser should be true if it's any of these mobile browsers, which means isMobileBrowser should be true if:
any() evaluates to an Array
OR in other way:
If any() does not evaluate to null
which is:
$scope.isMobileBrowser = isMobile.any() instanceof Array;//looks messy
$scope.isMobileBrowser = (isMobile.any()).constructor === Array;//looks messy
$scope.isMobileBrowser = Array.isArray(isMobile.any());//looks messy
$scope.isMobileBrowser = Object.prototype.toString.call(isMobile.any())
=== "[object Array]";//looks messy
OR the other way:
$scope.isMobileBrowser = isMobile.any() !== null;
$scope.isMobileBrowser = !(isMobile.any() === null);
isMobileBrowser = !(Object.prototype.toString.call(isMobile.any())
=== "[object Null]");//looks messy
So we just discussed different ways to check for null and Array. You have two possible sets of outputs
null value which is always false
An Array which is always true (You can check this empty array scenario although that doesn't apply here)
So you can simply do the following to convert those to exact boolean without worrying much:
isMobileBrowser = Boolean(isMobile.any()); //to convert value to boolean
isMobileBrowser = !!isMobile.any(); //another way to convert to boolean
//!!["Android"] is true
//!!null is false
#rossipedia explains the !! well in his answer.

A compact way of representing what you want would be:
$scope.isMobileBrowser = !!isMobile.any();
The !! there does two things:
The first ! evaluates the "truthiness"1 of the return value of isMobile.any() and then negates it.
The second ! negates that value again.
So what you end up with is false if .any() returns null, otherwise true.
However, this may fail in edge cases where .any() returns something that is "falsy". In that case, checking for null specifically is what you want:
isMobile.any() !== null
1: "Truthiness":
In JavaScript, a truthy value is a value that translates to true when evaluated in a Boolean context. All values are truthy unless they are defined as falsy (i.e., except for false, 0, "", null, undefined, and NaN).
From MDN

Try this:
$scope.isMobileBrowser = isMobile.any() === null;

Related

Javascript - is null or true - What would be the most elegant solution?

Since we all know null is evaluated as false, how could I write "is null or true" in Javascript?
I have tried:
function isNullOrTrue(nullableBool){
return !(nullableBool != null && nullableBool != true);
}
Is there a better way to do this?
If the three possible inputs are only null, true and false, you can use
return nullableBool !== false
but explicitly listing the matching values isn't bad for readability either
return v === null || v === true
Using === instead of == isn't actually necessary here, as null != false (whereas Boolean(null) == false), but it might help for clarity if you're not familiar with the loose equality rules.
The elegant solution to is null or true is to use nullish coalescing operator
return nullableBool ?? true
It will return true if nullableBool is either null or undefined. Otherwise, it will return the value of nullableBool. If you only want to return true or false, then you can use double bang:
return !!(nullableBool ?? true)
Now, it will return true if nullableBool is either null, undefined or truthy value. Otherwise, return false.

Eloquent Javascript Ch. 7 - assignment statement with boolean expression

I'm having difficulty understanding the "atDest" variable declaration in this lesson that appears to be taking on two values (both a boolean and an object).
http://eloquentjavascript.net/07_elife.html
actionTypes.eat = function(critter, vector, action) {
var dest = this.checkDestination(action, vector);
var atDest = dest != null && this.grid.get(dest);
if (!atDest || atDest.energy == null)
return false;
critter.energy += atDest.energy;
this.grid.set(dest, null);
return true;
};
Any tips here would help. When I try testing out variables with similar syntax with console.log I've been noticing that the object value overrides the bool. Is this an inherent Javascript trait where a variable can have more than one value?
The boolean operators || and && actually return the value of one of the specified operands.
var a = 5 || false; // 5 is assigned to a
var b = true && 5; // 5 is assigned to b
The logical && returns the first expression if it can be converted to false, otherwise it returns the second expression (or 5 in the example above)
So if dest != null is not false in the following statement
var atDest = dest != null && this.grid.get(dest);
then atDest is assigned the value of this.grid.get(dest).
Here is the documentation you are looking for.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
http://dorey.github.io/JavaScript-Equality-Table/
The gist is that in JavaScript everything can be interpreted as boolean. The above doc makes it very clear. Values like null, undefined, NaN, 0, "" will be interpreted as falsy. What !atDest really means is basically to check if atDest is not assigned (likely null or undefined).
The next part is also worthy mentioning. atDest.energy == null is a loose equality check (notice the == instead of ===). This check will actually check for both null and undefined. But the difference between atDest.energy == null and !atDest.energy is that atDest.energy == null will not match 0, "", nor NaN.
JavaScript values can be falsy like
false
0 (zero)
"" (empty string)
null
undefined
NaN (a special Number value meaning Not-a-Number!)
or truthy, which is everything else including the empty object {}. Falsy values are equivalent to false in a boolean check and truthy values are equivalent to true in a boolean check.
Now, if you attempt to read a non-existent property on an object you'll get undefined. However if you attempt to read a non defined property off the special value of null or undefined, you will get an error. Something like
Unable to get property 'energy' of undefined or null reference
if you attempt to read atDest.energy when atDest is null or undefined.
So if you want to check if a property is of value xyz on an object that you are not sure is null or undefined, you have to do 2 things
First check if you can actually read the property without error i.e. that the object is not null or undefined.
Then read the property and do the check.
In your example, this
if (!atDest || atDest.energy == null)
does pretty something equivalent. This part
!atDest
evaluates to false if atDest is null or undefined (because both these values are falsy) and short circuits the loop (i.e. doesn't read atDest.energy). In effect what the code attempts to do is this
if (atDest === undefined || atDest === null) {
.... do something ....
else if (atDest.energy == null) {
.... do same something ....
else
.... do something different ....

Can I always use `||` to assign default parameter values?

Optional Parameters
I often have JavaScript functions with optional parameters.
Instead of writing a long check like this:
if(param === null || param === undefined){
param = {};
}
I usually use the following syntax:
function doSomething(optionalParam, optionalCallback, optionalFlag){
optionalParam = optionalParam || {};
optionalParam["xyz"] = "value"; //Won't fail if the user didn't pass a value
optionalCallback = optionalCallback || function(){};
optionalCallback(); //If I need the function on 20 places, I don't have to insert a typeof-check everywhere
optionalFlag = optionalFlag || false;
}
The advantages are clear and I can deal with both undefined and null parameters.
This will, however, not work for optional flags that default to true:
someFlag = someFlag || true; //Will never evaluate to false.
Return values
Here's another example where I use that syntax:
function getValueOfIndex(idx){
return anArray[idx] || null; //Returns null if the index is out of bounds
}
My Question:
How does the || operator work in my use case?
Can I use || for all of these situations?
Is there any reason not to use it?
Are there any other types or values where this syntax will fail?
Edit: I recognised that my last point (difference between null||undefined and undefined||null) should belong to a seperate question, so I removed it.
The general answer is that you can't use
parameter = parameter || default;
if the user should be able to pass an explicit parameter that's falsey, and that should take precedence over the default. In that case you need to test explicitly for undefined:
parameter = typeof parameter == "undefined" ? default : parameter;
If the user should be able to pass an explicit undefined value and have that take precedence (a very perverse thing to do), you'll need to test arguments.length to determine how many arguments were passed, so you can default only the remainder.
Why do the following two expression return different values?
null || undefined //evaluates to undefined
undefined || null //evaluates to null
something || somethingElse is an expression, meaning it will always return a value, either the first truthy value, otherwise the last value at all. For example false || 17 is 17. Both null and undefined are falsy, so in both cases, || will return the last value.
Can I use || for all of these situations?
|| Can sometimes do something you wouldn't expect
function thisIsUnexpected (a) {
a = a || "other value";
reurn a;
}
thisIsUnexpected(); // will return "other value";
// it can fail when you pass in a falsy value
thisIsUnexpected(false); // you would want it to return false, yet it will return "other value"
To get the correct behavior, you'd want to use a ternary expression as follows. This can never fail.
function thisIsExpected (a) {
a = (a === undefined) ? "other value" : a;
reurn a;
}
The logical OR operator can be used as long as the expression used to test for the presence of an argument returns true for all the cases where an argument is supplied.
someFlag = someFlag || true; //Will never evaluate to false.
Your example above doesn't work because I can supply the argument false and the expression used to test for the presence of an argument (in this case simply someFlag) will still evaluate to false, implying that an argument was not specified.
So you would need to modify the code to something like:
someFlag = (typeof someFlag === 'boolean') ? someFlag : true;

what does && return in javascript expression

I was reading the javascipt code in some application and code was this
getTotalFees:function(){
return this.grid
&&this.grid.getStore().sum('fees');
}
Now i am confused what it will return.
IT looks to me like
return a&&b
won't it return true or false rather than b
Logical AND (&&):
expr1 && expr2 Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false.
Source
So, basically:
If the first parameter is falsy, it returns that parameter. Else, it literally returns the second parameter.
In your case, this means that, if this.grid exists, it returns this.grid.getStore().sum('fees');
This is done to protect against calling a method on undefined property, witch would cause an error. So if this.grid is undefined, then undefined is returned.
In expressions if a && b when a equals to false (or in javascript it can be an expression like in Cerburs answer), then a is returned.
Similarly with || operator, the first from the left that equals to true (in javascript not 0, not undefined, not null, not NaN, and not false of course) is returned.
You misunderstand what && does. Let a and b be "entities". Then a && b does:
evaluate a
if a is falsy return a
if a is truthy evaluate b
return b
Example:
var f = function() {
console.log("test");
return 'foo';
}
> 0 && f()
0
> 1 && f()
test
"foo"
Note that in first case we didn't get console.log because f() was not evaluated because 0 is falsy. This property is important and actually
a && b != b && a
even though mathematically it should be the same (but it is not due to side-effects of evaluation).
Falsy values include: 0, false, "" (empty string), null, undefined,NaN (not a number type). I don't think there are any other possible values (someone correct me if I'm wrong). Every other object is truthy.
So in your case the code can be rewritten as:
if (this.grid) {
return this.grid.getStore().sum('fees');
} else {
return this.grid;
}
Ok, let's assume that this.grid.getStore().sum('fees') returns something, let's say "okay!".
now the return statement in your code is a convoluted way of saying :
if(this.grid)//this.grid is defined and doesn't evaluate as 'false'
return this.grid.getStore().sum('fees');
else
return this.grid;
if this hasn't got a grid, we return undefined, else we call gridStore... and return its own return.
It is a common way of avoiding "undefined has no method 'gridStore'"
the VERY important part is that, in a && f(), f() will NOT be called if 'a' evaluates to false. there are many things that evaluate to false, such as any undefined variable, null, empty strings... (note that strings that contain falsy things like "false" or "0000" are actually truthy). or even unreadable babble like function(){return null;}(); may evaluate as false.

How to check for an undefined or null variable in JavaScript?

We are frequently using the following code pattern in our JavaScript code
if (typeof(some_variable) != 'undefined' && some_variable != null)
{
// Do something with some_variable
}
Is there a less verbose way of checking that has the same effect?
According to some forums and literature saying simply the following should have the same effect.
if (some_variable)
{
// Do something with some_variable
}
Unfortunately, Firebug evaluates such a statement as error on runtime when some_variable is undefined, whereas the first one is just fine for it. Is this only an (unwanted) behavior of Firebug or is there really some difference between those two ways?
I think the most efficient way to test for "value is null or undefined" is
if ( some_variable == null ){
// some_variable is either null or undefined
}
So these two lines are equivalent:
if ( typeof(some_variable) !== "undefined" && some_variable !== null ) {}
if ( some_variable != null ) {}
Note 1
As mentioned in the question, the short variant requires that some_variable has been declared, otherwise a ReferenceError will be thrown. However in many use cases you can assume that this is safe:
check for optional arguments:
function(foo){
if( foo == null ) {...}
check for properties on an existing object
if(my_obj.foo == null) {...}
On the other hand typeof can deal with undeclared global variables (simply returns undefined). Yet these cases should be reduced to a minimum for good reasons, as Alsciende explained.
Note 2
This - even shorter - variant is not equivalent:
if ( !some_variable ) {
// some_variable is either null, undefined, 0, NaN, false, or an empty string
}
so
if ( some_variable ) {
// we don't get here if some_variable is null, undefined, 0, NaN, false, or ""
}
Note 3
In general it is recommended to use === instead of ==.
The proposed solution is an exception to this rule. The JSHint syntax checker even provides the eqnull option for this reason.
From the jQuery style guide:
Strict equality checks (===) should be used in favor of ==. The only
exception is when checking for undefined and null by way of null.
// Check for both undefined and null values, for some important reason.
undefOrNull == null;
EDIT 2021-03:
Nowadays most browsers
support the Nullish coalescing operator (??)
and the Logical nullish assignment (??=), which allows a more concise way to
assign a default value if a variable is null or undefined, for example:
if (a.speed == null) {
// Set default if null or undefined
a.speed = 42;
}
can be written as any of these forms
a.speed ??= 42;
a.speed ?? a.speed = 42;
a.speed = a.speed ?? 42;
You have to differentiate between cases:
Variables can be undefined or undeclared. You'll get an error if you access an undeclared variable in any context other than typeof.
if(typeof someUndeclaredVar == whatever) // works
if(someUndeclaredVar) // throws error
A variable that has been declared but not initialized is undefined.
let foo;
if (foo) //evaluates to false because foo === undefined
Undefined properties , like someExistingObj.someUndefProperty. An undefined property doesn't yield an error and simply returns undefined, which, when converted to a boolean, evaluates to false. So, if you don't care about
0 and false, using if(obj.undefProp) is ok. There's a common idiom based on this fact:
value = obj.prop || defaultValue
which means "if obj has the property prop, assign it to value, otherwise assign the default value defautValue".
Some people consider this behavior confusing, arguing that it leads to hard-to-find errors and recommend using the in operator instead
value = ('prop' in obj) ? obj.prop : defaultValue
Checking null with normal equality will also return true for undefined.
if (window.variable == null) alert('variable is null or undefined');
This is the only case in which == and != should be used:
if (val == null) console.log('val is null or undefined')
if (val != null) console.log('val is neither null nor undefined')
For any other comparisons, the strict comparators (=== and !==) should be used.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
https://2ality.com/2011/12/strict-equality-exemptions.html
In newer JavaScript standards like ES5 and ES6 you can just say
> Boolean(0) //false
> Boolean(null) //false
> Boolean(undefined) //false
all return false, which is similar to Python's check of empty variables.
So if you want to write conditional logic around a variable, just say
if (Boolean(myvar)){
// Do something
}
here "null" or "empty string" or "undefined" will be handled efficiently.
If you try and reference an undeclared variable, an error will be thrown in all JavaScript implementations.
Properties of objects aren't subject to the same conditions. If an object property hasn't been defined, an error won't be thrown if you try and access it. So in this situation you could shorten:
if (typeof(myObj.some_property) != "undefined" && myObj.some_property != null)
to
if (myObj.some_property != null)
With this in mind, and the fact that global variables are accessible as properties of the global object (window in the case of a browser), you can use the following for global variables:
if (window.some_variable != null) {
// Do something with some_variable
}
In local scopes, it always useful to make sure variables are declared at the top of your code block, this will save on recurring uses of typeof.
Firstly you have to be very clear about what you test. JavaScript has all sorts of implicit conversions to trip you up, and two different types of equality comparator: == and ===.
A function, test(val) that tests for null or undefined should have the following characteristics:
test(null) => true
test(undefined) => true
test(0) => false
test(1) => false
test(true) => false
test(false) => false
test('s') => false
test([]) => false
Let's see which of the ideas here actually pass our test.
These work:
val == null
val === null || val === undefined
typeof(val) == 'undefined' || val == null
typeof(val) === 'undefined' || val === null
These do not work:
typeof(val) === 'undefined'
!!val
I created a jsperf entry to compare the correctness and performance of these approaches. Results are inconclusive for the time being as there haven't been enough runs across different browsers/platforms. Please take a minute to run the test on your computer!
At present, it seems that the simple val == null test gives the best performance. It's also pretty much the shortest. The test may be negated to val != null if you want the complement.
here's another way using the Array includes() method:
[undefined, null].includes(value)
Since there is no single complete and correct answer, I will try to summarize:
In general, the expression:
if (typeof(variable) != "undefined" && variable != null)
cannot be simplified, because the variable might be undeclared so omitting the typeof(variable) != "undefined" would result in ReferenceError. But, you can simplify the expression according to the context:
If the variable is global, you can simplify to:
if (window.variable != null)
If it is local, you can probably avoid situations when this variable is undeclared, and also simplify to:
if (variable != null)
If it is object property, you don't have to worry about ReferenceError:
if (obj.property != null)
This is an example of a very rare occasion where it is recommended to use == instead of ===. Expression somevar == null will return true for undefined and null, but false for everything else (an error if variable is undeclared).
Using the != will flip the result, as expected.
Modern editors will not warn for using == or != operator with null, as this is almost always the desired behavior.
Most common comparisions:
undeffinedVar == null // true
obj.undefinedProp == null // true
null == null // true
0 == null // false
'0' == null // false
'' == null // false
Try it yourself:
let undefinedVar;
console.table([
{ test : undefinedVar, result: undefinedVar == null },
{ test : {}.undefinedProp, result: {}.undefinedProp == null },
{ test : null, result: null == null },
{ test : false, result: false == null },
{ test : 0, result: 0 == null },
{ test : '', result: '' == null },
{ test : '0', result: '0' == null },
]);
You can just check if the variable has a value or not. Meaning,
if( myVariable ) {
//mayVariable is not :
//null
//undefined
//NaN
//empty string ("")
//0
//false
}
If you do not know whether a variable exists (that means, if it was declared) you should check with the typeof operator. e.g.
if( typeof myVariable !== 'undefined' ) {
// myVariable will get resolved and it is defined
}
Similar to what you have, you could do something like
if (some_variable === undefined || some_variable === null) {
do stuff
}
This is also a nice (but verbose) way of doing it:
if((someObject.someMember ?? null) === null) {
// bladiebla
}
It's very clear what's happening and hard to misunderstand. And that can be VERY important! :-)
This uses the ?? operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator). If the value of someObject.someMember is null or undefined, the ?? operator kicks in and will make the value null.
TBH, I like the explicitness of this thing, but I usualle prefer someObject.someMember == null, it's more readable and skilled JS developers probably know what's going on here.
whatever yyy is undefined or null, it will return true
if (typeof yyy == 'undefined' || !yyy) {
console.log('yes');
} else {
console.log('no');
}
yes
if (!(typeof yyy == 'undefined' || !yyy)) {
console.log('yes');
} else {
console.log('no');
}
no
Open the Developer tools in your browser and just try the code shown in the below image.
If the purpose of the if statement is to check for null or undefined values before assigning a value to a variable, you can make use of the Nullish Coalescing Operator. According to the data from caniuse, it should be supported by around 85% of the browsers(as of January 2021). An example of the operator is shown below:
const a = some_variable ?? '';
This will ensure that the variable will be assigned to an empty string (or any other default value) if some_variable is null or undefined.
This operator is most suited for your use case, as it does not return the default value for other types of falsy value such as 0 and ''.
As mentioned in one of the answers, you can be in luck if you are talking about a variable that has a global scope. As you might know, the variables that you define globally tend to get added to the windows object. You can take advantage of this fact so lets say you are accessing a variable called bleh, just use the double inverted operator (!!)
!!window['bleh'];
This would return a false while bleh has not been declared AND assigned a value.
In order to understand, Let's analyze what will be the value return by the Javascript Engine when converting undefined , null and ''(An empty string also). You can directly check the same on your developer console.
You can see all are converting to false , means All these three are assuming ‘lack of existence’ by javascript. So you no need to explicitly check all the three in your code like below.
if (a === undefined || a === null || a==='') {
console.log("Nothing");
} else {
console.log("Something");
}
Also I want to point out one more thing.
What will be the result of Boolean(0)?
Of course false. This will create a bug in your code when 0 is a valid value in your expected result. So please make sure you check for this when you write the code.
With Ramda, you can simply do R.isNil(yourValue)
Lodash and other helper libraries have the same function.
I have done this using this method
save the id in some variable
var someVariable = document.getElementById("someId");
then use if condition
if(someVariable === ""){
//logic
} else if(someVariable !== ""){
//logic
}
In ES5 or ES6 if you need check it several times you cand do:
const excluded = [null, undefined, ''];
if (!exluded.includes(varToCheck) {
// it will bee not null, not undefined and not void string
}
let varToCheck = ""; //U have to define variable firstly ,or it throw error
const excluded = [null, undefined, ""];
if (!excluded.includes(varToCheck)) {
// it will bee not null, not undefined and not void string
console.log("pass");
} else {
console.log("fail");
}
for example I copy vladernn's answer to test, u can just click button "Copy snippets to answer" to test too .
Testing nullity (if (value == null)) or non-nullity (if (value != null)) is less verbose than testing the definition status of a variable.
Moreover, testing if (value) (or if( obj.property)) to ensure the existence of your variable (or object property) fails if it is defined with a boolean false value. Caveat emptor :)
Best way to compare undefined or null or 0 with ES5 and ES6 standards
if ((Boolean(some_variable_1) && Boolean(some_variable_2)) === false) {
// do something
}
You can make use of lodash library.
_.isNil(value) gives true for both null and undefined
Test on - https://bazinga.tools/lodash
You must define a function of this form:
validate = function(some_variable){
return(typeof(some_variable) != 'undefined' && some_variable != null)
}
Both values can be easily distinguished by using the strict comparison operator.
Sample Code:
function compare(){
var a = null; //variable assigned null value
var b; // undefined
if (a === b){
document.write("a and b have same datatype.");
}
else{
document.write("a and b have different datatype.");
}
}

Categories