Recently I stumbled upon this picture on Google Images:

The man on the picture is Brendan Eich by the way, the creator of JavaScript and a co-founder of the Mozilla project.

Even with some of the examples are not really related to the language itself, I still find it interesting enough to give it a short breakdown, considering it doesn't make much sense for some people with the classic "strict language"-only programming background.

The breakdown

Starting with the "boring" parts:

Floating-point arithmetic

> 9999999999999999< 10000000000000000> 0.5+0.1==0.6< true> 0.1+0.2==0.3< false

Nothing really surprising here, it's an old concept that has been around for quite a while. And it is, of course, not related to JavaScript "features". Instead of trying to explain it here, I'll just leave a link the tothis great "explainlikeimfive" website dedicated exclusively to explaining floating-point math.

Not A Number is a Number

> typeof NaN< "number"

What is "NaN" after all? It is, in fact, a representation of a specific value that can't be presented within the limitations of the numeric type (the only JS numeric primitive is, in factfloat). NaN was introduced in the IEEE 754 floating-point standard.

So, it's just a number that a computer can't calculate in this particular environment.

Type conversion

JavaScript is a dynamic type language, which leads to the most hated "why it this like that" debugging sessions for those who is not familiar with the silent (implicit) type coercion.

The simple part: strict equality with===

> true === 1< false

Strict equality compares two values. Neither value is implicitly converted to some other value before being compared. If the values have different types, the values are considered unequal. Boolean variable is not equal to 1, which is a number.

On the other hand, there is this:

> true == 1< true

This is an example ofimplicit type coercion. Implicit type coercion is being triggered when you apply operators to values of different types:2+'2','true'+false,35.5+new RegExp('de*v\.to') or put a value into a certain context which expects it to be of a certain type, likeif (value) { (coerced toboolean).

JavaScript type conversion is not the most trivial part, so I would suggest further reading likethis great article by Alexey Samoshkin andthis little MDN doc on equality comparisons. There is also thisequality comparison cheatsheet that may come in handy.

Anyway, let's get back to our picture.

> [] + []< ""

There are 2 types of variables in JS: objects and primitives, with primitives beingnumber,string,boolean,undefined,null andsymbol. Everything else is an object, including functions and arrays.

When an expression with operators that call implicit conversion is being executed, the entire expression is being converted to one of three primitive types:

• string
• number
• boolean

Primitive conversions follow certain rules that arepretty straightforward.

As for the objects: In case ofboolean, any non-primitive value is always coerced totrue. Forstring andnumber, the following internal operationToPrimitive(input, PreferredType) is being run, where optionalPreferredType is eithernumber orstring. This executes the following algorithm:

1. If input is already a primitive, return it as it is
2. Otherwise, input is treated like an object. Callinput.valueOf(). Return if the result is a primitive.
3. Otherwise, callinput.toString(). If the result is a primitive, return it.
4. Otherwise, throw a TypeError.

Swap 2 and 3 ifPreferredType isstring.

Take a look at this pseudo-implementation of the above in actual JavaScript, plus the boolean conversion (the original is acourtesy of Alexey Samoshkin via the article mentioned previously).

functionToPrimitive(input,preferredType){switch(preferredType){caseBoolean:returntrue;break;caseNumber:returntoNumber(input);break;caseString:returntoString(input);breakdefault:returntoNumber(input);}functionisPrimitive(value){returnvalue!==Object(value);}functiontoString(){if(isPrimitive(input.toString()))returninput.toString();if(isPrimitive(input.valueOf()))returninput.valueOf();thrownewTypeError();}functiontoNumber(){if(isPrimitive(input.valueOf()))returninput.valueOf();if(isPrimitive(input.toString()))returninput.toString();thrownewTypeError();}}

So, at the end of the day, the original[] + [] == "" is being interpreted as:

ToPrimitive([])+ToPrimitive([])

Both arrays return an empty string as a result oftoString([]). The final result is a concatenation of two empty strings.

Now, onto the:

> [] + {}< "[object Object]"

Because of theString({}) resulting in a[object Object] the result is a simple concatenation of"" and"[object Object]". Simple enough. Now what the hell is going on here then?

> {} + []< 0

Turns out, JavaScript interprets the first{} as a code block! When the input is being parsed from start to end, it treats{ as the beginning of the block, following by closing} immediately. Hence, using our pseudo-implementation the previous example will be evaluated into the following:

ToPrimitive(+[])

..which is 0. The+ is an unary prefix operator that converts the operand into a number.

Loose equality== and binary+ operators always trigger defaultpreferredType, which assumes numeric conversion (except Date that returns string). That explainstrue+true+true===3 andtrue==1. Thus, as expectedtrue===1 returnsfalse because there are no operators on the left side of the expression and=== does not trigger implicit type coercion. Same with[]==0 which is roughly equivalent toNumber([]) == 0.

Everything brings up interesting examples like the one we have here:

> (!+[]+[]+![]).length< 9

Breaking it down,

• (!+[]) + [] + (![])
• !0 + [] + false
• true + [] + false
• true + '' + false
• 'truefalse'

'truefalse'.length === 9

Very simple.

And last (and the least, to be honest):

Math.max() < Math.min() ?

> Math.max()< -Infinity> Math.min()< Infinity

Thismay be considered as a minor language flaw, in terms of returning a kind of an unexpected result from a function that wants certain arguments.

But there actually is a little bit of some actual math behind that.

Let's make a guess on how (probably)Math.max() works and write down another imaginary transcript into actual #"http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24">