Undefined or null variable in function - javascript

In these example I am ruining a function with conditions;
function validPrice(price)
{
if(price=="" || price==0 || price==null || price==undefined )
{
//do something
}
else
{
// do something different
}
}
var priceNew = $("li#listedProd").attr("price");
validPrice(priceNew);
My question is what are the different in these condition price=="" || price==0 || price==null || price==undefined

Whoever first wrote that code was either
a) Being very defensive against future use.
b) Didn't understand how attr works.
The method attr (or the underlying call of getAttribute will return either
A string value, of the attribute is found
null, if it is not.
Importantly, should there have been a 0 value, it would be a string 0, and thus not caught in the test below -- caught against the price == 0 test because the system would have automatically converted it to a number as part of the == compare.
if(price=="" || price==0 || price==null || price==undefined )
And, due to the way that conversions work internally, those tests don't work as intended. == and === are different. It should be:
if(price === "" || price === 0 || price === null || price === undefined )
All of which can easily be reduced to simply "price" due how how coercion to boolean work:
if (!price)
Or, if you want to catch "0" values
if (!price || +price === 0)
(the +price forces price to be a number, so we catch 0 0.00 and other variations.)

Let's look at your conditional statement term-by-term:
price == ""
This is true if price is the empty string, and false otherwise.
price == 0
This is true if price is the integer 0, the string "0", or the empty string, and false otherwise. You should change this comparison to price === 0 if you want to catch when price is the integer 0.
price == null
This is true if price is passed to your function and is of the type null, and false otherwise.
price == undefined
Note: You should probably make this comparison via price === undefined to see that price is both undefined and has the type undefined.
This is true if price is not passed to your function, or if price is otherwise undefined, and false otherwise.
I would recommend just making the entire conditional statement !price:
function validPrice(price) {
if (!price) {
//do something
}
else {
// do something different
}
};
var priceNew = $("li#listedProd").attr("price");
validPrice(priceNew);

EDIT added definitions
JavaScript has 2 operators that test for equality (and conversely 2 operators that test for inequality.)
A strict equality comparison (e.g., ===) is only true if the operands are of the same type AND if the object is actually the same object, or the primitives have the same value (e.g., 0 === 0, and 'a' === 'a' are both true). *Note there is a slight exception to this rule for NaN (see below)
An abstract equality comparison (e.g. ==) converts the operands to the same Type (if they aren't already) before making a strict equality comparison. If however one of the operands is null or undefined, the comparison is true if and only if the other operand is either null or undefined.
So in short the == equality operator is considered by many to be unsafe. To see the difference checkout http://dorey.github.io/JavaScript-Equality-Table/
For instance '' ==: 0, '', [], false, [[]]
And 0 ==: false, 0, '0', '', [], [[]], [0]
While null ==: null, undefined
And finally undefined ==: null, undefined
It is better to use strict equal === or just test for a falsey value ('', 0, undefined, null, false)
if (!price) { //do something }
Below I have provided more details about strict vs abstract equality comparison
details came from ECMA-262, Edition 5 11.9.1
Summary of strict equality algorithm
1. If typeof(x) is different from typeof(y), return false.
2. If typeof(x) is undefined, return true.
3. If x is null, return true.
4. If typeof(x) is number, then
a. If x is NaN, return false.
b. If y is NaN, return false.
c. If x is the same Number value as y, return true.
d. If x is +0 and y is -0, return true.
e. If x is -0 and y is +0, return true.
f. Return false.
5. If typeof(x) is string, then
a. If x and y are exactly the same sequence of characters (same length and same characters in
corresponding positions), return true.
b. Else, return false.
6. If typeof(x) is boolean, then
a. If x and y are both true or both false, return true.
b. Else, return false.
7. If x and y are the same Object value, return true.
8. Return false.
And ... details came from ECMA-262, Edition 5 11.9.1
Summary of Abstract Equality Algorithm
1. If typeof(x) is the same as typeof(y), then
return the result of performing strict equality comparison algorithm x === y.
2. If x is null and y is undefined, return true.
3. If x is undefined and y is null, return true.
4. If typeof(x) is number and typeof(y) is string,
return the result of the comparison x == Number(y).
5. If typeof(x) is string and typeof(y) is number,
return the result of the comparison Number(x) == y.
6. If typeof(x) is boolean, return the result of the comparison Number(x) == y.
7. If typeof(y) is boolean, return the result of the comparison x == Number(y).
8. If typeof(x) is either string or number and typeof(y) is object,
return the result of the comparison x == [[ToPrimitive]](y).
9. If typeof(x) is object and typeof(y) is either string or number,
return the result of the comparison [[ToPrimitive]](x) == y.
10. Return false.
[[ToPrimitive]] is an internal function call
Bullets 8 and 9 basically mean that objects are converted like object.valueOf().toString() so:
{} == '[Object object]'
{ hi: 'hi'} == '[Object object]'
{ valueOf: function(){ return 0; }} == 0
{ toString: function(){ return 'hi'; }} == 'hi'
{ valueOf: function(){ return 0; }, toString: function(){ return 'hi'; }} == 0
Full ecma-262/5.1/#sec-11.9 spec

Related

null >= false and null <= false both return true in javascript [duplicate]

I had to write a routine that increments the value of a variable by 1 if its type is number and assigns 0 to the variable if not, where the variable is initially null or undefined.
The first implementation was v >= 0 ? v += 1 : v = 0 because I thought anything not a number would make an arithmetic expression false, but it was wrong since null >= 0 is evaluated to true. Then I learned null behaves like 0 and the following expressions are all evaluated to true.
null >= 0 && null <= 0
!(null < 0 || null > 0)
null + 1 === 1
1 / null === Infinity
Math.pow(42, null) === 1
Of course, null is not 0. null == 0 is evaluated to false. This makes the seemingly tautological expression (v >= 0 && v <= 0) === (v == 0) false.
Why is null like 0, although it is not actually 0?
Your real question seem to be:
Why:
null >= 0; // true
But:
null == 0; // false
What really happens is that the Greater-than-or-equal Operator (>=), performs type coercion (ToPrimitive), with a hint type of Number, actually all the relational operators have this behavior.
null is treated in a special way by the Equals Operator (==). In a brief, it only coerces to undefined:
null == null; // true
null == undefined; // true
Value such as false, '', '0', and [] are subject to numeric type coercion, all of them coerce to zero.
You can see the inner details of this process in the The Abstract Equality Comparison Algorithm and The Abstract Relational Comparison Algorithm.
In Summary:
Relational Comparison: if both values are not type String, ToNumber is called on both. This is the same as adding a + in front, which for null coerces to 0.
Equality Comparison: only calls ToNumber on Strings, Numbers, and Booleans.
I'd like to extend the question to further improve visibility of the problem:
null >= 0; //true
null <= 0; //true
null == 0; //false
null > 0; //false
null < 0; //false
It just makes no sense. Like human languages, these things need be learned by heart.
JavaScript has both strict and type–converting comparisons
null >= 0; is true
but
(null==0)||(null>0) is false
null <= 0; is true but (null==0)||(null<0) is false
"" >= 0 is also true
For relational abstract comparisons (<= , >=), the operands are first converted to primitives, then to the same type, before comparison.
typeof null returns "object"
When type is object javascript tries to stringify the object (i.e null)
the following steps are taken (ECMAScript 2015):
If PreferredType was not passed, let hint be "default".
Else if PreferredType is hint String, let hint be "string".
Else PreferredType is hint Number, let hint be "number".
Let exoticToPrim be GetMethod(input, ##toPrimitive).
ReturnIfAbrupt(exoticToPrim).
If exoticToPrim is not undefined, then
a) Let result be Call(exoticToPrim, input, «hint»).
b) ReturnIfAbrupt(result).
c) If Type(result) is not Object, return result.
d) Throw a TypeError exception.
If hint is "default", let hint be "number".
Return OrdinaryToPrimitive(input,hint).
The allowed values for hint are "default", "number", and "string". Date objects, are unique among built-in ECMAScript object in that they treat "default" as being equivalent to "string".
All other built-in ECMAScript objects treat "default" as being equivalent to "number". (ECMAScript 20.3.4.45)
So I think null converts to 0.
console.log( null > 0 ); // (1) false
console.log( null == 0 ); // (2) false
console.log( null >= 0 ); // (3) true
Mathematically, that’s strange. The last result states that "null is greater than or equal to zero", so in one of the comparisons above it must be true, but they are both false.
The reason is that an equality check == and comparisons > < >= <= work differently. Comparisons convert null to a number, treating it as 0. That’s why (3) null >= 0 is true and (1) null > 0 is false.
On the other hand, the equality check == for undefined and null is defined such that, without any conversions, they equal each other and don’t equal anything else. That’s why (2) null == 0 is false.
I had the same problem !!.
Currently my only solution is to separate.
var a = null;
var b = undefined;
if (a===0||a>0){ } //return false !work!
if (b===0||b>0){ } //return false !work!
//but
if (a>=0){ } //return true !
It looks like the way to check x >= 0 is !(x < 0) In that way make sense the response.

Javascript array equal to zero but not itself

I've been playing around with arrays in JavaScript and cannot figure out why this happens:
console.log(0 == 0)
//true
console.log([] == 0)
//true
console.log(0 == [])
//true
console.log([] == [])
//false
console.log([] == ![])
// true
The empty array is equal enough to zero both left and right, but why isn't it equal to itself?
I realise that comparing two objects would not result true, but why are they coerced to 0 (or falsy, which shouldn't be the case) if you compare them to 0, while threated as an object if you compare them to the other array?
console.log(0 == [])
//true
You are trying to compare object with an integer, so your object is implicitly typecasted to equivalent integer value that is 0
console.log([] == [])
//false
as two objects are never equal
console.log([] == [])
That will compare whether array1 and array2 are the same array object in memory, which is not what you want.
In order to do what you want, you'll need to check whether the two arrays have the same length, and that each member in each index is identical.
console.log([].length == [].length)
// true
Since the complete answer is never given and I actually understand it now, I'll provide the answer myself.
I found this in the Ecma-262 pdf:
It basically reads that [] == 0 is the same as Number([]) == 0 which is the same as 0 == 0 which is true. This does not apply to strict ===.
There is no rule to compare objects other then rule number one, which is x is the same as y. This means the same in everything, also memory address. Since they are not sharing the same memory address, rule 10 applies (return false).
The comparison x == y, where x and y are values, produces true or
false. Such a comparison is performed as follows:
If Type(x) is the same as Type(y), then
a. Return the result of performing Strict Equality Comparison x === y.
If x is null and y is undefined, return true.
If x is undefined and y is null, return true.
If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).
If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.
If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
If Type(x) is either String, Number, or Symbol and Type(y) is Object, return the result of the comparison x == ToPrimitive(y).
If Type(x) is Object and Type(y) is either String, Number, or Symbol, return the result of the comparison ToPrimitive(x) == y.
Return false
This question is handled with the knowledge of object reference and type conversion more properly.First,in javascript, object value is stored by reference.So we can tell it is different from [] and [],because the two array correspond with two different addr in memory.Second, '==' is a not rigorous operation for both left and right, [] and 0 are both transformed to false.

Javascript true/false function

I'm new in JavaScript, and I just discovered strange behavior that I can't understand:
var magicVar = Math.sin;
magicVar == true; // it returns false
magicVar === true; // it returns false
if (magicVar) console.log("???"); // it prints "???"
What is happening?
Thank you.
var magicVar = Math.sin;
From here on magicVar is a reference to the Math.sin function, which is actually an Object (see Function on MDN)
The Function constructor creates a new Function object. In JavaScript
every function is actually a Function object.
magicVar == true; // it returns false
This is false: from the Equality comparison and sameness on MDN if you compare an operand of type Object with an operand of type Boolean using the == operator you always get false (look at the Loose equality using == table).
[EDIT] As Bergi pointed out in the comments you could actually in some cases have objects that loosely compared to a boolean value return true.
What is actually happening behind the scenes is that the comparison algorithm described in ES6 §7.2.12 is applied.
7.2.12 Abstract Equality Comparison
The comparison x == y, where x and y are values, produces true or
false. Such a comparison is performed as follows:
ReturnIfAbrupt(x).
ReturnIfAbrupt(y).
If Type(x) is the same as Type(y), then Return the result of performing strict Equality Comparison x === y.
If x is null and y is undefined, return true.
If x is undefined and y is null, return true.
If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).
If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.
If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
If Type(x) is either String, Number, or Symbol and Type(y) is Object, then return the result of the comparison x == ToPrimitive(y).
If Type(x) is Object and Type(y) is either String, Number, or Symbol, then return the result of the comparison ToPrimitive(x) == y.
Return false.
In your case what happens is:
magicVar == true
magicVar == Number(true) // Step 9. x == ToNumber(y).
magicVar == 1
toPrimitive(magicVar) == 1 // Step 11. ToPrimitive(x) == y.
magicVar.toString() == 1
"function sin() { [native code] }" == 1
Number("function sin() { [native code] }") == 1 // Step 7. ToNumber(x) == y.
NaN === 1 // Step 3. x === y.
false
But comparing for example to an object like:
{
valueOf: function(){
return 1;
}
}
you would get:
true == {valueOf(){return 1;}} // it returns true
magicVar === true; // it returns false
This is trivially false, the types of the operands are different and the === operator checks for the operands to have same types and values.
if (magicVar) console.log("???"); // it prints "???"
As all the others answers have said magicVar here is in a Boolean context and gets coerced to true
magicVar is true as a value. It is true in the sense that it's not empty, it's not null or undefined. So, any non-null value would be a true value. But is this value equal to true ? No. It is true as a boolean not true as a value.
To summarize:
magicVar == true || magicVar === true; // returns false
Boolean(magicVar); // returns true
The concept to grasp here is the difference between truthy and falsy values compared to true and false booleans. See here for truthy and here for falsy
Long story short, an if condition passes if the expression is truthy, and magicVar is a function (truthy).
magicVar is not equal to true.
It is equal to the Math.sin function.
So, in the if statement, it is evaluated to a truthy value (it is defined and does not evaluate to a falsy value).
http://www.sitepoint.com/javascript-truthy-falsy/
Comparison function Math.sin with boolean constant return false, because this variables have different types.
But when you put not-bool variable to if condition: for example if (Math.sin)... or if (window)... this return true if variable not equal null.

'&&' operator in Javascript vs in Java

I am currently reading JavaScript from JavaScript: The Definitive Guide. On page 76, there is this statement written,
o && o.x // => 1: o is truthy, so return value of o.x
Being a Java programmer I want to ask, why is it returning 1 instead of 'true' In Java this was not the case, but anyway I know JavaScript is different but the Logical AND mechanism is the same everywhere.(In C it returns 1 as true.)
I am asking is, why does it makes sense for this behavior at all?
Is there any way, I can ensure to return only the true or false values?
As per the Spec for Binary Logical Operators
The value produced by a && or || operator is not necessarily of type
Boolean. The value produced will always be the value of one of the two
operand expressions.
This is a feature used in javascript a lot, one common use case is to assign a default value to a variable if it is not defined. Like assume you are expecting a options object as a param but is not mandatory so the user may not pass it
function x(options){
options = options || {};
//now your can access optionx.a without fearing whether options is undefined
}
You can do something like !!(o && o.x) to always get a true/false
if we have:
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.
So if we have:
Var xyz = a && b; //where a is undefined(false) and b is 123, then it will allocate undefined.
In case of if statements, these values are specifically converted to boolean.
Refer the following link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators"
You can use Boolean(o && o.x); to get true or false
It's returning the value of the right operand. If the value of o.x was true, it would return true. If the value of o.x was 'banana', it would return 'banana'.
var o = {x:true};
console.log(o && o.x);
Technically && operator implemented to return the first operand if it's value is not zero, and returns the second operand otherwise in a lot of languages including Java, C/C++, Javascript, Perl...
While most of the languages accepts any type of operands, Java forces you to use boolean operands so it always returns true or false.
In order to force a boolean result in Javascript use:
Boolean(a && b)
This behaviour is called coercion. Coercion is the action of forcing an object to behave like other type, and the logical operators can produce coercion when trying to access the value of the object to be evaluated.
It is important to remember the table for truthy and falsy values, because due to coercion, different results can be obtained.
false produces false
0 produces false
“” produces false
NaN produces false
null produces false
undefined produces false
Everything else produces true, including the text "0" and "false", functions, arrays and empty objects.
Given the rules for logic operators, exists short-circuit evaluation in JavaScript, e.g:
0 && 1; //-> 0, falsy value
!(0 && 1); //-> true, falsy value negated
!!(0 && 1); //-> false, boolean falsy value
void 0 && alert("1") //-> undefined (void produces undefined)
[] && Math.ceil(9.1) //-> 10, truthy value
{} && someFunc() //-> the result of someFunc()
0 || null; //-> null, falsy value
null || "0"; //-> "0", truthy value
"" || void 1; //-> undefined, falsy value
!!(+"5px" || {}); //-> true, boolean truthy value
Coercion is useful when you have to validate default values, in order to prevent errors, e.g.
function divide (a, b) {
a = +a; //-> coerced to number
b = +b; //-> coerced to number
if (!a) return 0; //-> NaN or zero
return b && a / b; //-> b must be a number different from zero
}
divide(); //-> 0
divide(5); //-> NaN, no error thrown!
divide(5, "a"); //-> NaN, no error thrown!
divide(5, 0); //-> 0, division by zero prevented!
divide(49, 6); //-> 8.1666
If you want to prevent returning NaN, just add another coercion in the return statement:
return (b && a / b) || 0;
You can check other coercion cases: JavaScript Coercion
Happy coding!

Short-circuiting an empty array in JS has an unexpected outcome: `[] || true == []`

In my code I assumed the following || short-circuiting was safe:
var $holidayExpandBarOrOpeningHours =
$(".expandBar + .holidayHours_c").prev() || $(".openingHours");
But to my surprise if we short-circuit an empty array with a true statement an empty array is still returned. I will demonstrate with some console code below and my question is why [] || true evaluates to [].
false || "expected"
"expected"
false == []
true
[] || "expected"
[]
typeof([])
"object"
({}) || "expected"
Object {}
({}) == false
false
{} == false
SyntaxError: Unexpected token ==
Part of me thinks that it is because an array is an object which evaluates to true, however if that was the case than based on ({}) == true one would expect [] == true.
Last thing I would like to note is the outcome is the same when using use 'strict' mode.
When converted to a boolean value, [] is true.
> !![]
true
> ![]
false
When converted to a number, [] is 0. That's why comparing it with false returns true: when comparing two values of different types, JavaScript first converts both to numbers and then compares the numbers.
> +[]
0
> +false
0
> +[] == +false
true
This is because || and use == different rules for the conversion.
The logical-or uses ToBoolean while the equality equals uses ToNumber/ToPrimitive.
From 11.11 Binary Logical Operators:
3) If ToBoolean(lval) is true, return lval.
Since ToBoolean([]) is true, [] || x results in []. This is also why if([]) { /* this runs */ }: arrays in JavaScript are "truthy" values.
From 11.9.3 The Abstract Equality Comparison Algorithm:
7) If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
9) [..then] If Type(x) is Object and Type(y) is either String or Number,
return the result of the comparison ToPrimitive(x) == y.
5) [..then] If Type(x) is String and Type(y) is Number,
return the result of the comparison ToNumber(x) == y.
The logic applied to [] == true is ToNumber(ToPrimitive([])) == ToNumber(true).
And the conversion values:
ToBoolean([]) is true
ToNumber(true) is 1
ToPrimitive([]) is an empty string (from DefaultValue/toString)
So:
ToNumber(ToPrimitive([])) == ToNumber(true)
ToNumber("") == 1
0 == 1
false
(Which is a long way to say what John Kugelman said.)
Also, ({}) == true is normally false and follows the same conversions as above.
Under a default environment, ToPrimtive({}) returns a non-empty string (i.e. "[object Object]" as per Object.prototype.toString). This string will evaluate to NaN after ToNumber such that NaN == 1; or false.
See Why an empty Array type-converts to zero? +[] for more details on the ToPrimitive conversion.
An empty array is an object; objects coerced to booleans are true. So
({}) || true; // -> {}
[] || true; // -> []
"" || true; // -> true (empty strings are coerced to false)
Sidenote - the parentheses around {} are required to avoid parsing it as a block.

Categories