Thread by @OilmoneDev

@unicodeveloper …The Weird Parts…

Let’s go through each instances in this tweet, but first, let’s refresh our minds on some key topics to demystifying this weird expressions.

BOOLEAN
The boolean type has only two values: true and false.

Conversion to boolean can be performed explicitly...

@unicodeveloper ...with a call to Boolean(value), where value can be a primitive (3, “@OilmoneDev", etc), an expression (5 >3) or even an Object ({}).


When an explicit conversion is made (using “Boolean” keyword; without quotes) or the JS engine implicitly coerces a value, object, expression

@unicodeveloper … to boolean.

the following values returns “false” (without quotes)
0, null, undefined, NaN, ""

Boolean(0) == false
Boolean(0) === false

Same for null, undefined, NaN or empty string (“”).
Every other value is true.

Now, we have a ‘little’ insight on how Boolean works.

@unicodeveloper Let’s talk about the Logical NOT Operator (!)

Logical NOT Operator (!)

This basically, calls Boolean on a value and then invert the boolean value returned by the Boolean operator.

For Example: !null will return true.

Below is how the semantics is evaluated during runtime..

@unicodeveloper ...Runtime Semantics: Evaluation
UnaryExpression : ! UnaryExpression
1. Let expr be the result of evaluating UnaryExpression.
2. Let oldValue be ToBoolean(GetValue(expr)).
3. ReturnIfAbrupt(oldValue).
4. If oldValue is true, return false.
5. Return true.

@unicodeveloper Reference:
ecma-international.org/ecma-262/6.0/#…

@unicodeveloper Abstract Equality Comparison (==)
The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows:
1. ReturnIfAbrupt(x).
2. ReturnIfAbrupt(y)...

@unicodeveloper 3. If Type(x) is the same as Type(y), then
1. Return the result of performing Strict Equality Comparison x === y.
4. If x is null and y is undefined, return true.
5. If x is undefined and y is null, return true.

@unicodeveloper 6. If Type(x) is Number and Type(y) is String,
return the result of the comparison x == ToNumber(y)
7. If Type(x) is String and Type(y) is Number,
return the result of the comparison ToNumber(x) == y
8. If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y

@unicodeveloper .
9. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
10. If Type(x) is either String, Number, or Symbol and Type(y) is Object, then
return the result of the comparison x == ToPrimitive(y).

@unicodeveloper 11. If Type(x) is Object and Type(y) is either String, Number, or Symbol, then
return the result of the comparison ToPrimitive(x)==y
12. Return false

It is important to state here that NaN(Not a Number) is not equal to any other value, not even itself. Yes, that’s our it works

@unicodeveloper Reference:
ecma-international.org/ecma-262/6.0/#…

@unicodeveloper Enough of the talk… Let’s apply the above explanation to @unicodeveloper tweet.

===========================
On line with code:
[] == ![]; -> true

To evaluate the above expression, we follow the steps below:

Step 1: Identify the Operators in the expression
== and !

@unicodeveloper Step 2: Understand the operator precedence
Logical NOT (!) will be executed before Abstract Equality Comparison (==)

Step 3: Apply the conditions as stated in the specification until the operators are exhausted.

@unicodeveloper Apply the conditions for Logical NOT (!):

let x = [], y = ![]

y = !Boolean([]) -> !true -> false

Now we are done with Logical NOT Operator and y is false.

Next we Apply the == operator which is a binary operator and will compare two operands.

[] == false

@unicodeveloper From the condition we can see that to evaluate this expression, we need to know the type of each operand. Hence…

Type(x) = typeof([]) -> “object"
Type(y) = typeof(false) -> "boolean"

Now we know the types of the operands.

@unicodeveloper Next, we go through the conditions for == operator
Since Type(y) is a boolean, Rule/Condition 9 is the first to hold:

If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).

Which is: x == ToNumber(y) -> [] == Number(false) -> [] == 0

@unicodeveloper We are done with Rule/Condition 9, which finally results to:
[] == 0

Going down the Rule/Condition, condition 11 holds
Type(x) -> typeof([]) -> “object” and
Type(y) -> typeof(0) -> “number”

We apply rule 11 and we have:
ToPrimitive(x) == y.

@unicodeveloper This will result to:
x.toString() -> [].toString() -> “” empty string

The link below describes how ToPrimitive works.
ecma-international.org/ecma-262/6.0/#…

We are done with Rule/Condition 11, which finally results to:
“” == 0

@unicodeveloper Going through the conditions again, condition 7 is the first to hold:
Type(x) is String and Type(y) is number. Then, evaluate to:
ToNumber(x) == y

Which further evaluates to:
Number(x) == y -> Number(“”) == 0

Since Number(“”) -> 0

We then have:
0 == 0 -> true

@unicodeveloper ======================
!!"false" == !!"true"; -> true

Remember that when a logical NOT operator is used in an expression, it first attempts to convert the expression at the right hand side to a Boolean value.

@unicodeveloper Also remember that converting a String to Boolean will always return true unless in the case of empty string “”. So, Boolean(“false”) for example will return true.

Therefore, Boolean(”false”) -> true
!!true -> !(!true) -> !false -> true

@unicodeveloper Also, Boolean(“true”) -> true
!!true -> !(!true) -> !false -> true

true == true -> true

@unicodeveloper ========================

"b" + "a" + +"a" + "a"; -> "baNaNa"

Here, having the understanding that the + operator can act as arithmetics operator, concatenation operator or as a unary operator is very important.

@unicodeveloper In this expression "b" + "a" + +"a" + “a”, we have two use cases: Concatenation and Unary operator.

See picture below:

@unicodeveloper If you have doubts why +”a” is the first step, see developer.mozilla.org/en-US/docs/Web…

@unicodeveloper ==========================
NaN === NaN; -> false

This holds because the value NaN is not equal to any other value, not even itself.

@unicodeveloper ==========================

0.1 + 0.2 !== 0.3 -> true

Here, it’s not entirely a thing of Javascript weird parts, rather it has to do with how floating-point values are formatted and stored in the computer. Computer Scientists will understand better.

@unicodeveloper In Javascript (even in Python)
0.1 + 0.2 === 0.30000000000000004
0.30000000000000004 !== 0.3 -> true

When dealing with arithmetic expressions involving floating-point values the result is not always 100% correct.

Reference:
docs.oracle.com/cd/E19957-01/8…

@unicodeveloper And that's all for now.

P.S: My points here may not be entirely correct. Please feel free to like, retweet and make corrections (if any…)

Thank you!

@unicodeveloper While the Concatenation + operator attempts to join two strings together, the Unary + Operator converts its operand to Number type.

+"a" - > Number("a") - > NaN

@unicodeveloper @unicodeveloper @js_tut @iambolajiayo @BenQoder @hackSultan @EhinzeEmeka @Kolokodess

Please review my (javascript) points here.

https://twitter.com/OilmoneDev/status/1168522751612719106

Thank you!