DEV Community

Cover image for What the heck is this?
Ahmad Fathy
Ahmad Fathy

Posted on • Updated on

What the heck is this?

Ok I knew it doesn’t make sense, but after finishing this article you will change your mind.

Grab your cup of coffee or your cup of tea or whatever you drink and read this article


Let’s start with the easiest one

Why Math.max() returns -Infinity and Math.min() returns Infinity?

That is because Math.max() uses (-Infinity) as the initial comparant because almost every other value is bigger, that's why when no arguments are given, -Infinity is returned. And the same thing with Math.min() but it uses (infinity) instead of (-infinity).

0.1 + 0.2 == 0.3 // false
That’s not in JavaScript only you can read about it here
0.30000000000000004.com


Before we diving into the details you must know three things:

Firstly there are two ways to convert the type of your value in JavaScript
The explicit way and we all know this

String(1234)                            // "1234"
Number("1234")                          // 1234
Boolean(0)                              // false 
Enter fullscreen mode Exit fullscreen mode

The second way is implicit… and it happens when we use some operators like these (-, +, ==, ||, &&)
Secondly there are three types you can convert to (String, Number, Boolean)
Thirdly there are primitive values like String and reference value like Object

So let’s talk about the two ways that we can use to change or convert the primitive values to another type

convert to String

Most of all conversions go as you expect
Implicit way

1234 +""                      // "1234"
Enter fullscreen mode Exit fullscreen mode

Explicit way

String(true)                                     // 'true'
String(false)                                   // 'false'
String(1)                                        // '1'
String(-1.5)                                   // '-1.5'
String(null)                                   // 'null'
String(undefined)                        // 'undefined'
String(Symbol('my symbol'))     // 'Symbol(my symbol)'

Enter fullscreen mode Exit fullscreen mode

Except symbol you can’t convert it with the implicit way it will throw an error

Symbol('my symbol') + ""                   // TypeError is thrown
Enter fullscreen mode Exit fullscreen mode

convert to Boolean

The result will be true or false
Explicit way
To make it easy everything except this list will be true even if the type of value is a reference type.

Boolean('')                                       // false
Boolean(0)                                       // false
Boolean(-0)                                      // false
Boolean(NaN)                                  // false
Boolean(null)                                   // false
Boolean(undefined)                       // false
Boolean(false)                                 // false
Enter fullscreen mode Exit fullscreen mode

Implicit way
Implicit conversion happens in logical context, or is triggered by logical operators (||, &&, !).
To explain it butter I should make a lot of examples but let’s say for now logical operators return the value of original operands, even if they are not Boolean.

false || 'text'               // 'text'
true && 12                  //12

Enter fullscreen mode Exit fullscreen mode

To understand it more I extremely recommend MDN

convert to Number

Explicit way
When we convert String to number first thing the spaces around the string will removed then after this if the string contains valid number will converted else returning NaN and if the string was empty returning 0
What about null or false the converted to 0
And undefined converted to NaN
true converted to 1

Number(null)                   // 0
Number(undefined)              // NaN
Number(true)                   // 1
Number(false)                  // 0
Number(" 12 ")                 // 12
Number("-12.34")               // -12.34
Number("\n")                   // 0
Number(" 12s ")                // NaN
Number(123)                    // 123

Enter fullscreen mode Exit fullscreen mode

Implicit way
It’s triggered by a lot of operators (comparison operators, arithmetic operators, bitwise operators).

+'1234'                               // 1234
1234 != '1234'                  // false
4 > '5'                                //  false
5/null                                // infinity because null will be 0
true | 0                            //  1
Enter fullscreen mode Exit fullscreen mode

Notes:

  • == does not trigger numeric conversion when both operands are strings.
  • + does not trigger numeric conversion, when any operand is a string.
  • symbol doesn’t convert with implicit or explicit way.
  • null equals only to null or undefined, and does not equal to anything else.
  • NaN does not equal to anything even itself

Ok now we are going to explain what happen when we convert the reference type?

As we said before there are only three types to convert to (Boolean, String, Number)
We can’t convert reference types with the explicit way except in special cases like when the array has one element and when we dealing with date

So let’s go with implicit way

When we convert the reference type there are few steps happening behind the scene

  • Check If the input is already a primitive if it is, do nothing and return it.
  • Call input.toString(), if the result is primitive, return it.
  • Call input.valueOf(), if the result is primitive, return it.
  • If neither input.toString() nor input.valueOf() yields primitive, throw TypeError.

Numeric conversion first calls the step (3) followed by step (2).
String conversion does the opposite step (2) followed by step (3).
Note
_ Most built-in types do not have valueOf, or have valueOf returning this object itself, so it’s ignored because it’s not a primitive. That’s why numeric and string conversion might work the same — both end up calling toString()._

let's take some examples

[] + 0 + 5
"" + 0 + 5
"0" + 5
"05"
Enter fullscreen mode Exit fullscreen mode
![] + [] && 3
!true + [] && 3
false + "" && 3
"false" && 3
3
Enter fullscreen mode Exit fullscreen mode

So now you can tell me the explanation for every single code in the picture

Top comments (0)