DEV Community

Cover image for Quirks and Features of Weird JavaScript 😵
Pramit Marattha
Pramit Marattha

Posted on • Updated on

Quirks and Features of Weird JavaScript 😵

Hii! Everyone!! In this article, I'll discuss the strange and fantastic peculiarities and characteristics of weird JavaScript. JavaScript is an very unusual programming language. It's not like other programming languages, yet it's a powerful one. It may be used to build front-end, back-end, mobile, as well as desktop apps. Visit my prior article to learn more about JavaScript's fundamentals. => Modern JavaScript explained in a way you've never seen before 🔥

So, without any further ado let's jump right into its weirdness.


!10 + !10

!10 + !10 ---> 0 

Enter fullscreen mode Exit fullscreen mode

The positive numbers in javascript are always true.

This Logical Not (!) represents the opposite. So, the opposite of true is false.

Hence, the false gets converted to 0.

So the answer is 0.


[] + []

[] + [] ---> ""

Enter fullscreen mode Exit fullscreen mode

When using the addition operator, both the left and right operands are converted to primitives.

Converting an array to a primitive return its default value, which for objects with a valid toString() method is the result of calling object.toString()

For arrays this is the same as calling array.join()

Joining empty array results in an empty string.

Hence, the addition operator returns the concatenation of two empty strings, which is the empty string.

For an even more detailed explanation read this article by => Dr. Axel Rauschmayer


[2,4,6,8,10] + [12,14,16,18] = "2,4,6,8,1012,14,16,18"

[2,4,6,8,10] + [12,14,16,18] ---> "2,4,6,8,1012,14,16,18"

Enter fullscreen mode Exit fullscreen mode

Arrays are converted into strings and then they are concatenated.

It follows the same rule as above.


NaN === NaN

NaN === NaN ---> false

Enter fullscreen mode Exit fullscreen mode

Because it was the decision made by the IEEE-754 committee.

function isNaN didint exsist at that time.

For a detailed explanation read this StackOverflow answer by =>Stephen Canon


NaN++

NaN++ ---> NaN

Enter fullscreen mode Exit fullscreen mode

NaN literally means Not A Number.

Hence, NaN cannot be incremented.


undefined + true | undefined + false

undefined + true ---> NaN

undefined + false ---> NaN

Enter fullscreen mode Exit fullscreen mode

True and False can be converted to numbers.

undefined cannot be converted to a number.

However , !!undefined + false => 0 , because (!!undefined means false).

!!undefined === false is true

Hence, If undefined is added with any boolean the result will always be NaN.


+0 === -0

+0 === -0 ---> true

Enter fullscreen mode Exit fullscreen mode

Positive Zero and Negative Zeros are always equal in JavsScript.


[,,,].length

[,,,].length ---> 3

Enter fullscreen mode Exit fullscreen mode

This [,,,] simply means the array containing three empty slots.

The last comma is a trailing comma.


true + false

true + false ---> 1

Enter fullscreen mode Exit fullscreen mode

Both the booleans are converted into their respective numerical representation and their values are added.

Number(true) ---> 1

Number(false) ---> 0

1 + 0 ---> 1


0.2 + 0.1 === 0.3

0.2 + 0.1 === 0.3 ---> false

Enter fullscreen mode Exit fullscreen mode

Just think about representing 1/3 as a decimal value. It's impossible to do exactly! In the same way, 1/10 (decimal 0.1) cannot be represented exactly in binary as a "decimal" value; a repeating pattern after the decimal goes on forever and ever. The value is not exact, and therefore you can't do exact math with it using normal floating-point methods.


2,4 | 1,2,3,4,5 | "quirks","features"

2,4 ---> 4
1,2,3,4,5 ---> 5
"quirks","features" ---> "features"

Enter fullscreen mode Exit fullscreen mode

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand.


!!""

!!"" ---> false

Enter fullscreen mode Exit fullscreen mode

Boolean representation of empty string("") is false.

Boolean("") ---> false

So, !!false ---> false

Inside Logical Not Operator(!) anything with a value is true and anything without a value is false.


+!![]

+!![] ---> 1

Enter fullscreen mode Exit fullscreen mode

Boolean representation of empty array [] is true.

!!true is always true.

Plus operator converts into a numerical representation of that particular Boolean value.

Hence, +true is 1 .


true == "true" ---> false

true == "true" ---> false

Enter fullscreen mode Exit fullscreen mode

Both of these values are converted to numbers .

Number(true) ---> 1

Number("true") ---> NaN

Hence, 1 == NaN is false


020 - 05

020 - 05 ---> 11

Enter fullscreen mode Exit fullscreen mode

020 is treated as an octal number in JavaScript.

Its value in decimal is 16.

Hence, 16 - 5 is 11


"" - - ""

"" - - "" ---> 0

Enter fullscreen mode Exit fullscreen mode

Empty string is converted into 0

It literally means (+0) - (-0)

Hence, (+0) - (-0) is zero.


null + 420

null + 420 ---> 420

Enter fullscreen mode Exit fullscreen mode

Numerical representation of null is always 0.

Number(null) ---> 0

Hence, 0 + 420 is 420


(null - 0) + "0"

(null - 0) + "0" ---> "00"

Enter fullscreen mode Exit fullscreen mode

Number(null) is 0

so, 0 - 0 is 0.

0 + "0" concatenates it and gives "00" as an answer.


Follow me on Github and Twitter

Top comments (0)