Ternary operator strange behavior while doing comparison of number - javascript

Basically below code is doing comparision of rowind variable and displays alert, but somehow it gives output as Not Zero even if it is zero then also it gives output as "Not Zero", can any one let me know what can be it reason?
<head>
<script language="javascript" type="text/javascript">
var rowind = 0;
var newind = ((rowind == '')) ? "Blank" : "Some number";
//Output is Blank
alert(newind);
</script>
</head>
<body>
</body>
</html>

You are checking whether the variable rowind is equal to empty string in your condition.
((rowind == '')) // this will return as false since you variable is not an empty string. Rather it contains a string with 0 character
if you want to compare the string, use the following.
((rowind == '0')) //This will return true since the string is as same as the variable.
Update
The question you are asking is related to javascript type casting.
The MDN Doc
Equality (==)
The equality operator converts the operands if they are not of the same > type, then applies strict comparison. If both operands are objects, then > JavaScript compares internal references which are equal when operands > refer to the same object in memory.
The above explains how the == operator works in javaascript.
In your example, the '' is converted to a number since it is being compared with a type number variable. so javascript treats '' as a number and '' is equal to 0. thus returns true in your condition.
console.log(0 == '0'); //True
console.log(0 == ''); //True
console.log('' == '0'); //False
The following is the strict comparison used as an example.
console.log(3 == '3') //True
console.log(3 === '3') //False

0 == '' returns true in javascript
The left operand is of the type Number.
The right operand is of the type String.
In this case, the right operand is coerced to the type Number:
0 == Number('')
which results in
0 == 0 // which definitely is true
And yes
0 === '' will return false
As , the identity operator === does not do type coercion, and thus does not convert the values when comparing.

The comparison is between strings and '0' does not equal ''.
Because '0' != '' doesn't cast any of them to Boolean, because they are of the same type - String.

Related

The result of []==false is true, why? [duplicate]

I have two statements like this. Why do they both evaluate to false?
console.log([] == true)
console.log(![] == true)
If [] == true is false shouldn't ![] == true result to true?
It's the way coercion works.
The first step of coercion is to convert any non primitive types to primitive types, then using a set of rules convert the left, right or both sides to the same type. You can find these rules here.
In your case [] == true, would pass through these 4 steps:
[] == true
[] == 1
"" == 1
0 == 1
Whereas based on operator precedence the ! in ![] == true is executed first so the expression is converted to false == true which is obviously false.
You can try the live demo by Felix Kling to better understand how the sameness operator works.
In more words:
The value ![] is false, because [] is an Object (arrays are objects) and all objects, not including null, are truthy. So any array, even if it is empty will always be a truthy, and the opposite of a truthy is always false. The easiest way to check if a value is a truthy is by using !!.
console.log("![]: " + ![]);
console.log("!![]: " + !![]);
When you are using a loose comparison (using == instead of ===) you are asking the JavaScript engine to first convert the values into the same type and then compare them. So what happens is the values get converted according to a set of rules, once they are the same type, they get compared though the same process as a strict equality check (===). The first change that [] goes through is to get converted to a string, the string version of an empty array is an empty string "", the empty string is then converted to a number, the numeric value of an empty string is 0, since the numeric value of true is 1 and 0 != 1, the final output is false.
console.log("[] == true => `" + ([] == true) + "`");
console.log("String([]) => `" + String([]) + "`");
console.log("Number('') => `" + Number("") + "`");
console.log("Number(true) => `" + Number(true) + "`");
As per the Abstract Equality Comparison Algorithm - http://es5.github.io/#x11.9.3
Types of x and y are checked when x == y is to be checked.
If no rule matches, a false is returned.
For [] == true , rule 7 matches, so a result of [] == ToNumber(true) is returned i.e. false is returned.
Reason you're getting the same result for ![] == true, because ![] returns false, and false == true returns false .
To get opposite result for your second operation, add a precedence (i.e. wrap) to your expression with braces.
console.log(!([] == true)); // returns true
Put ![] in the console. It's false.
So ![] == true is the same as false == true, which is false.
[] != true is true though
None of the answers so far has addressed the main problem. [Edit: This is no longer true. See Nick Zoum's answer.]
The question essentially is this:
[] == true returns false
=> [] is not true
=> [] is false (because something not true must be false)
=> ![] should be true, since negation of false is true. Then why does ![] == true return false?
[] is actually truthy. (So ![] is actually falsy.)
Still, [] == true returns false -- the reason is coercion. It's another of Javascript's gotchas.
When an array is checked for equality explicitly against a boolean value (that is, against true or false), its elements are first converted to strings and then joined together. An empty array therefore becomes "" — therein lies the problem, because an empty string is falsy.
In brief, an empty array is truthy, but it's coerced (when being compared to a boolean value) to an empty string, which is falsy.
Note the following, which comes from https://www.nfriedly.com/techblog/2009/07/advanced-javascript-operators-and-truthy-falsy/
Arrays are particularly weird. If you just test it for truthyness, an
empty array is truthy. HOWEVER, if you compare an empty array to a
boolean, it becomes falsy:
if ( [] == false ) {
// this code runs }
if ( [] ) {
// this code also runs }
if ([] == true) {
// this code doesn't run }
if ( ![] ) {
// this code also doesn't run }
(This is because when you do a comparison, its elements are turned to Strings and joined. Since it's empty, it becomes "" which is then falsy. Yea, it's weird.)
Read https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/
Rule in JavaScript for The Equals Operator (==)
if
type(x) type(y) result
1.x and y are the same type See Strict Equality (===) Algorithm
2.null Undefined true
3.Undefined null true
4. Number String x == toNumber(y)
5. String Number toNumber(x) == y
6. Boolean (any) toNumber(x) == y
7. (any) Boolean x == toNumber(y)
8.String or Number Object x == toPrimitive(y)
9.Object String or Number toPrimitive(x) == y
***10.otherwise… false

Why do both "[] == true" and "![] == true" evaluate to false?

I have two statements like this. Why do they both evaluate to false?
console.log([] == true)
console.log(![] == true)
If [] == true is false shouldn't ![] == true result to true?
It's the way coercion works.
The first step of coercion is to convert any non primitive types to primitive types, then using a set of rules convert the left, right or both sides to the same type. You can find these rules here.
In your case [] == true, would pass through these 4 steps:
[] == true
[] == 1
"" == 1
0 == 1
Whereas based on operator precedence the ! in ![] == true is executed first so the expression is converted to false == true which is obviously false.
You can try the live demo by Felix Kling to better understand how the sameness operator works.
In more words:
The value ![] is false, because [] is an Object (arrays are objects) and all objects, not including null, are truthy. So any array, even if it is empty will always be a truthy, and the opposite of a truthy is always false. The easiest way to check if a value is a truthy is by using !!.
console.log("![]: " + ![]);
console.log("!![]: " + !![]);
When you are using a loose comparison (using == instead of ===) you are asking the JavaScript engine to first convert the values into the same type and then compare them. So what happens is the values get converted according to a set of rules, once they are the same type, they get compared though the same process as a strict equality check (===). The first change that [] goes through is to get converted to a string, the string version of an empty array is an empty string "", the empty string is then converted to a number, the numeric value of an empty string is 0, since the numeric value of true is 1 and 0 != 1, the final output is false.
console.log("[] == true => `" + ([] == true) + "`");
console.log("String([]) => `" + String([]) + "`");
console.log("Number('') => `" + Number("") + "`");
console.log("Number(true) => `" + Number(true) + "`");
As per the Abstract Equality Comparison Algorithm - http://es5.github.io/#x11.9.3
Types of x and y are checked when x == y is to be checked.
If no rule matches, a false is returned.
For [] == true , rule 7 matches, so a result of [] == ToNumber(true) is returned i.e. false is returned.
Reason you're getting the same result for ![] == true, because ![] returns false, and false == true returns false .
To get opposite result for your second operation, add a precedence (i.e. wrap) to your expression with braces.
console.log(!([] == true)); // returns true
Put ![] in the console. It's false.
So ![] == true is the same as false == true, which is false.
[] != true is true though
None of the answers so far has addressed the main problem. [Edit: This is no longer true. See Nick Zoum's answer.]
The question essentially is this:
[] == true returns false
=> [] is not true
=> [] is false (because something not true must be false)
=> ![] should be true, since negation of false is true. Then why does ![] == true return false?
[] is actually truthy. (So ![] is actually falsy.)
Still, [] == true returns false -- the reason is coercion. It's another of Javascript's gotchas.
When an array is checked for equality explicitly against a boolean value (that is, against true or false), its elements are first converted to strings and then joined together. An empty array therefore becomes "" — therein lies the problem, because an empty string is falsy.
In brief, an empty array is truthy, but it's coerced (when being compared to a boolean value) to an empty string, which is falsy.
Note the following, which comes from https://www.nfriedly.com/techblog/2009/07/advanced-javascript-operators-and-truthy-falsy/
Arrays are particularly weird. If you just test it for truthyness, an
empty array is truthy. HOWEVER, if you compare an empty array to a
boolean, it becomes falsy:
if ( [] == false ) {
// this code runs }
if ( [] ) {
// this code also runs }
if ([] == true) {
// this code doesn't run }
if ( ![] ) {
// this code also doesn't run }
(This is because when you do a comparison, its elements are turned to Strings and joined. Since it's empty, it becomes "" which is then falsy. Yea, it's weird.)
Read https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/
Rule in JavaScript for The Equals Operator (==)
if
type(x) type(y) result
1.x and y are the same type See Strict Equality (===) Algorithm
2.null Undefined true
3.Undefined null true
4. Number String x == toNumber(y)
5. String Number toNumber(x) == y
6. Boolean (any) toNumber(x) == y
7. (any) Boolean x == toNumber(y)
8.String or Number Object x == toPrimitive(y)
9.Object String or Number toPrimitive(x) == y
***10.otherwise… false

Difference between != and !== [duplicate]

This question already has answers here:
Which equals operator (== vs ===) should be used in JavaScript comparisons?
(48 answers)
Closed 5 years ago.
In this function, when it is compared the lenght of the array it is used != operator and when it is comparing all elements of the array it is using !== operator. Why?! Thx.
var a = [1,2,3];
var b = [2,3,4];
function equalArrays(a,b){
if(a.length != b.length) return false;
for(var i = 0; i < a.length; i++)
if(a[i] ==! b[i]) return false;
return true;
}
= is an assignment operator, e.g. If you run var x = 1; then x will have the value of 1.
== (or !=) is a comparison operator that checks if the value of something is equal to the value of something else. e.g. if(x == 1) will evaluate to true and so will if(x == true) because 1 will evaluate to true and 0 evaluate to false.
=== (or !==) is another comparison operator that checks if the value of something is equal to the value of, and is the same type as something else. e.g. if(x === 1) will evaluate to true however, if(x === true) will evaluate to false because 1 (the value of x) is an integer and true is a boolean.
The triple equals (===) not only checks the value, but the type.
The following are true:
false == false
false == null
false == undefined
false == 0
2 == "2"
The following are NOT true:
false === null
false === undefined
false === 0
2 === "2"
!= will only check value regardless of operands type. but !== is used to compare both value & type of 2 operands that are being compared to each other.
When its comparing the length of arrays its obvious that both of them are integer so there is no need to compare their types. But in order to compare the elements in the array their types are important. For example assume its comparing string of 5 and integer 5:
if( '5' !== 5 ){
return false
}else{
return true;
}
The above snippet will return false cause two operands are off different types. But this can not be caught by !=, I mean:
if( '5' != 5 ){
return false;
}else{
return true;
}
will return true.
As a rule of thumb, remember that:
JavaScript has both strict and type-converting equality comparison. For strict equality the objects being compared must have the same type and:
Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another.
Two Boolean operands are strictly equal if both are true or both are false.
Two objects are strictly equal if they refer to the same Object.
Null and Undefined types are == (but not ===). [I.e. (Null==Undefined) is true but (Null===Undefined) is false]
Quoted from: https://stackoverflow.com/a/523647
!==means that two variables are being checked for both their value and their value type (8!==8 would return false while 8!=="8" returns true). != only checks the variable's value (8!=8 and 8!="8" would both return false).
The !== operator returns true when elements are not equal value or not equal type.
Source: W3Schools

JavaScript transitive equality

Learning JavaScript and found that given the expression below, it evaluates to true when given this: transitive([1], 1, {toString:_=>'1'});
I don't understand why.
it makes sense that the y and z are equal but how can the x and y be equal if the x and z are not equal?
function transitive(x,y,z) {
return x && x == y && y == z && x != z;
}
In JavaScript there is a concept of "truthiness" and "falsyness". Values like 1 and '1' are equal when compared with a loose comparison operator like ==, but are not strictly equal using a strict equality operator like ===.
The object is equal to 1 because JavaScript uses type coercion to convert the object to a comparable value to a primitive. It does this by calling the .toString() method of the object, which returns '1' and as we learned above is truthy, as is 1, so they are considered equal when using ==.
This will probably be relevant: MDN: Equality comparisons and sameness.
It is best/common practice in JavaScript to always use === and !== in place of == and !=.
The "loose" equality operator in javascript (==) is not transitive. This is primarily a result of type coercion that occurs before comparison. == uses javascript's "abstract equality" algorithm which roughly boils down to these steps. Successive coercions can occur.
If one operand is a primitive and another is an object (including an array), a not so simple algorithm is used to coerce the object to a primitive, which can involve (among other things) the object's toString, valueOf, or [Symbol.toPrimitive] method.
Booleans are coerced to numbers.
If one operand is a number and the other is a string, the string is coerced to a number.
null and undefined are considered equal to themselves and eachother and nothing else. Otherwise a strict equality comparison is performed.
That's a lot of complexity packed into a single operator and the result is a very wiggly concept of equality with a bunch of gotchas.
// Is an empty array truthy or falsey?
[] == false; // -> true, so [] is falsey?
[] ? true : false; // -> true, so [] is truthy?
// Another case of intransitivity:
false == "0" // -> true
false == [] // -> true
"0" == [] // -> false
// Not super consistent
123 == "123" // -> true
123 == [123] // -> true
true == "true" // -> false
true == [true] // -> false
"true" == [true] // -> true
true == ["1"] // -> true
Applying these coercion rules to your example:
[1] == 1
// Object is coerced to primitive, in this case via toString
"1" == 1
// String is coerced to number
1 == 1
/* true */
1 == {toString:_=>'1'}
// Object is coerced to primitive, in this case via toString
1 == "1"
// String is coerced to number
1 == 1
/* true */
[1] == {toString:_=>'1'}
// Since neither value is a primitive, no coercion occurs.
// Reference equality is checked instead.
/* false */
Just about the only reason I use == is to check if a value is either null or undefined with a single comparison. Otherwise I stick with === which is much easier to reason about.

equality in javascript [duplicate]

This question already has answers here:
Which equals operator (== vs ===) should be used in JavaScript comparisons?
(48 answers)
Closed 6 years ago.
When working within javascript can someone provide me a good reference or explanation over testing for equality/inequality and type coercion?
From what I have been reading I see where there are two principles of thought on using eqeq (==) vs. eqeqeq (===) some feel that you should not use eqeq and always as use eqeqeq as it is safer to use.
I have been playing around with some basic samples and I am having trouble discerning the difference or when best to use one over the other:
For example: here is some basic script I was writing out. When I test using eqeq or eqeqeq I get the same result. I have not seen an example yet where I would get a different results (ie. using eqeq returns true where eqeqeq returns false).
function write(message){
document.getElementById('message').innerHTML += message +'<br/>';
}
var tim = { name: "tim" };
var tim2 = { name: "tim" };
//objects are equal to themselves ( == vs ==== eqeq or eqeqeq)
write("tim eq tim: " + (tim == tim)); //returns true
//objects are only equal to themselves regardless of containing value got that
write("tim eq tim2: " + (tim === tim2)); //returns false
//access the primative type to test true or false
write("tim value eq tim2 value: " + (tim.name === tim2.name)); //returns true
//how does this differ in efficency over the eqeq operator? is one safer to use over the other?
//write("tim value eq tim2 value: " + (tim.name == tim2.name)); //also returns true
//testing primatives
write("apple eqeqeq apple: " + ("apple" === "apple")); //true
write("apple eqeqeq apple: " + ("apple" == "apple")); //true
Can someone provide an explanation or reference I can read that helps clarify this a bit more.
cheers,
The difference between == and === is fairly simple: == is a comparison of value. === is a comparison of value and type. Using === will prevent JavaScript from dynamically determining type and compares values exactly as they are.
5 == "5" //true - JS compares the number 5 to a string of "5" and determines the contents are the same
5 === "5" //false - A character is not a number, they can't be the same.
0 == false //true - false is a bool, 0 is numerical, but JS determines that 0 evaluates to false
0 === false //false - numeric is not boolean, they can't be exactly the same thing
5 == 5.0 //true - need I say more?
5 === 5.0 //true - one is a float and one is an int, but JS treats them all as numerical
I find it's critical for tests with functions that can return both false (for failure) and 0 (as a legitimate result).
JS has a total of 5 primitive types = numerical, string, boolean, null and undefined. === requires both arguments to be of the same type and equal value to return true. There are no float, int, long, short, etc - any type of number is lumped together as numerical.
It is simple.
== performs a type conversion and then compares converted values to your desired value
=== doesnt perform type conversion and directly compares your values.
Obviously === is better in terms of performance and accuracy but == is also convinient in some cases so you can use them both if they suit your needs.
comparisons
Cheers!
Below is a very complete list of things that you won't expect when using equality operators
All of the following are true:
0 == ""
0 == " "
0 == []
false == ""
false == " "
false == []
[] == ""
null == undefined
"str" == ["str"]
"1" == true
"0" == false
"null" != null
"false" != false
"true" != true
"undefined" != undefined
"NaN" != NaN
NaN != NaN //exception: NO exception
{} != {} //exception: same reference
[] != [] //exception: same reference
--------------------------------------
new Number(10) !== 10
new String("str") !== "str"
NaN !== NaN //exception: NO exception
{} !== {} //exception: same reference
[] !== [] //exception: same reference
(Some of them came from this source)
In conclusion, never use ==. Not even when you want to:
"It is highly recommended to only use the strict equality operator. In
cases where types need to be coerced, it should be done explicitly and
not left to the language's complicated coercion rules."
(source)
=== is the strict equality operator which returns true only if the variables have the same type and value.
a = 1;
b = "1";
a == b will return true, a === b will return false
The rule of == is not easy to remember, can you get all the right answer of below examples?
"" == "0" // false
0 == "" // true
0 == "0" // true
false == "false" // false
false == "0" // true
false == undefined // false
false == null // false
null == undefined // true
" \t\r\n" == 0 // true
So it is better only use ===, and never use ==.
You must have heard someone that javascript is very loosely typed language.
So as surreal said above
The (==) operator is used when you only want to compare the values of the arguments and do not care about their type
like 5=="5" will return true. This is the case when you want to see (for instance what key the user pressed and you don't care about the the type of it may be a string, a char or an integer).
But there me be a case when the type of arguments also matters. In such cases you want to compare the types of the operators. So in those cases you use the triple equality operator.
For example if you are performing some addition or multiplication operations then you want to make sure that the operands are of the compatible type. So you use the triple (===) operator.

Categories

Resources