Fun time with implicit conversion of values

JavaScript is a loosely typed language, which means that you don’t need to explicitly declare the type of a variable, and even more, when the interpreter expects a defined type for a statement or argument, it will try to adapt or convert the provided value into the expected value. You can read more about this subject in JavaScript quirk 1: implicit conversion of values. But assuming you have understood the matter well, you’ll realize that the + operator only works with numeric or string values. Should other type will be provided to a + operator, JavaScript will try to convert it to either a string or numeric value. So, even in an apparently nonsense like number + object JavaScript will try to make its best to perform the operation in terms of strings or numbers:

Another no less surprising example:

The explanation here is that [] (an empty array) is implicitly conversed to “” (an empty string), but hey, what the hell happened with {} and where does “[object Object]“ comes from? Well, when JavaScript tries to convert an object to a String, eventually will call the argument toString(), which with any empty object yields the string “[object Object]“

We have that [] + {} when implicitly conversed by the interpreted is equivalent to

So, where is the fun in all this? i saw once in an obscure forum a guy’s signature with something like this:

If you evaluate that in your JS console, you’ll see a friendly “loosely”. Go ahead, try it now!

So, do you get what’s happening? It’s simple if you understand the above example and how implicit conversion works. Let’s take for example, how to yield the string “a” using only []()+! characters (at this point, I don’t know if somebody has a name for this). If you input (![]+[])[!![]+![]] in your console you’ll see the fabulous “a”. I’ll explain step by step what’s happening here, you can follow me in your console:

Starting with the first part of the expression (![]+[]) :

  1. []+[] // When implicitly conversed, it’s evaluated as “” + “”, which results in an empty string “”
  2. ![]+[] // But now using the negation  operator ! over the first [] which  is equivalent to !Boolean([]) which evaluates as false (boolean), but here operates as (!true) + “” producing the string “false”
  3. (![]+[]) // The parenthesis only parses the expression as a statement, so we finally have the string “false”

Ok genius, what’s the result of “false”[1] ? Bingo! it’s “a”. But how do we get that goddamned 1 index? Pretty much the same way we got our “false” string, so let’s continue with the second part, [!![]+![]] :

  1. !![] // as we saw, ![] it’s the same as !Boolean([]) which results in false (boolean value). Hence !![] is equals true
  2. !![]+![] //…but as the + operator only performs operations with numbers or strings, true + false is conversed as 1 + 0 …which is equals to 1 (number)
  3. Finally “false”[1] is “a” (string)

There you are, the expression (![]+[])[!![]+![]] is equivalent through the magic of loosely types and implicit conversion to  “false”[1]

Neato, isn’t it? So technically it’s a matter of time to get the full alphabet out of braces, brackets and parenthesis []()+! characters, if you know many other JavaScript quirks such as NaN, Infinity, etc. But now you get the basis of this esoteric and fun aspect of JavaScript.

I wrote some code to get every single letter in the latin alphabet using this technique, the primary data structure is a dictionary (an object in JavaScript) for simplicity sake. I couldn’t think of an easy way to get the letters h,k,p,w,x,z as many other examples make use of ECMAScript behavior that is no longer supported by modern browsers. My point here is to simply use this quirk to get any string consisting of letters and transform it to braces, brackets and parenthesis, so I don’t wish to add any boilerplate. If you get a clever way to get the missing letters, please let me know!

  • Kayode Rotato Poti Anthony

    cool post bro.