Original post written by Juan Cruz Martinez for Auth0 blog.
This is a story of the odd and the strange. A story involving dimensions, monsters, and JavaScript
It is 1995, in a small US town. A group of friends is playing Dungeons & Dragons. When they see that Demogorgon enters the game, Brendan casts Fireball. He rolls the die, but it goes missing on the floor. They keep playing.
After the game ends, Brendan rides his bike through the woods, passing by the Netscape Communications Corporation. Then he sees something weird in front of him. He loses his balance, falls down a steep hill, and crashes.
The boy runs home. He's shivering as he looks back, ensuring that thing doesn't follow him. He arrives home only to find out no one is there. He tries to call his parents, but he can't get through.
Something unlocks the door. Brendan runs out to the backyard when he sees the thing. A light glows brightly and then fades, revealing no one is there anymore.
After ten days of searching, Brendan Eich reappears in the forest, but he is not alone. A yellow and mysterious creature is with him, with odd characteristics but a powerful presence.
It is too late for the world. JavaScript is out!
The Weirdo on Maple Street
Joey, Andrea, and Juan are wandering in the woods when they encounter JavaScript. They freeze as the programming language tries to communicate with them but can't figure out what it's trying to say.
With the help of an interpreter, they managed to capture the strange language, but what does it all mean?
In front of them lay the script
([![]] + [][[]])[+!+[] + [+[]]] +
([![]] + [][[]])[+!+[] + [+!+[]+!+[]]]
+ " " +
(![] + [])[+[]] +
(![] + [])[+!+[]] +
([![]] + [][[]])[+!+[] + [+[]]] +
(![] + [])[!+[] + !+[]] +
(![] + [])[+!+[]+!+[]+!+[]]
After some thought, the team got to work on the problem. They split it up into smaller chunks and worked it out.
First let's take a look at ([![]] + [][[]]) which is repeated throughout the snippet.
Breaking it down, even more, we get:
[![]] and we know that ![] is false, so we have [false] as a result.
Next, [][[]] looks confusing, but looking into more details, it follows this pattern: array[index] where array = [] and index = [], and accessing an empty array at any position, will return undefined, even if that position happens to be another array.
Putting this part of the script back together, we get:
([![]] + [][[]]) === [false] + undefined &&
[false] + undefined === 'falseundefined'
And so they replaced
'falseundefined'[+!+[] + [+[]]] +
'falseundefined'[+!+[] + [+!+[]+!+[]]]
+ " " +
(![] + [])[+[]] +
(![] + [])[+!+[]] +
'falseundefined'[+!+[] + [+[]]] +
(![] + [])[!+[] + !+[]] +
(![] + [])[+!+[]+!+[]+!+[]]
But then:
(![] + []) === 'false'
and
'falseundefined'[+!+[] + [+[]]] +
'falseundefined'[+!+[] + [+!+[]+!+[]]]
+ " " +
'false'[+[]] +
'false'[+!+[]] +
'falseundefined'[+!+[] + [+[]]] +
'false'[!+[] + !+[]] +
'false'[+!+[]+!+[]+!+[]]
Now we understand more. Using this strange language, we could decode strings. Since JavaScript allows us to access any character in a string by asking for its position, each particular line seems to be capturing a unique character on each string.
We have the strings, but we need a way to build up indexes; fortunately, there are a few tricks we can use.
For starters, thanks to Math in JavaScript, we know that +true === 1 and that +false === 0, why? the + sign at the beginning tells JavaScript to cast the boolean value to its numeric form.
Once we have those numbers, we can make any combination. For example, 2 can be written as +true+true, but what if we want something in the two digits order? It will take a long of those... Or we can use a different technique.
number1+[number2] === "numbernumber2", this happens because the sum now acts as a concatenate and converts each side of the + sign into a string. This is done by design, as JavaScript can't add an array to an integer.
Finally, we can use this little array to bool conversion table to get our numbers:
+[] -> +false -> 0
!+[] -> !false -> true
+!+[] -> +true -> 1
Now that we can form single and two-digit numbers, we can easily convert all the indexes into numbers or strings and form our final answer:
'falseundefined'['10'] +
'falseundefined'['12']
+ " " +
'false'[0] +
'false'[1] +
'falseundefined'['10'] +
'false'[2] +
'false'[3]
Now, we have to count.
i
e
" "
f
a
i
l
s
That's it! He is trying to say, "ie fails"!
Holly, Jolly, and The Body
Carla, Brendan's mom, is sure that he is trying to communicate with her through the lights of her house. Carla is determined to find out, so she elaborates on a simple math test.
"Brendan, can you hear me?" she asks. If you can hear me, tell me, what is 1 + 1, and the lights go on and off two times.
For the second test, 3 + 1, the lights go on and off four times.
Is this a coincidence? She is, by now, freaking out.
"3" - 1, and the lights go twice.
It has to be him! One more to be sure
"3" + 1, but the lights start a different show this time. They go on and off for a while. When they stopped, she had counted "31".
Maybe I am a mess; maybe I'm crazy, she concluded. What kind of math is that?
She doesn't know JavaScript, or she would have understood. The lights were correct, according to JavaScript, of course.
If the same happens to you, remember, in JavaScript.
Number + Number -> addition
Boolean + Number -> addition
Boolean + Boolean -> addition
Number + String -> concatenation
String + Boolean -> concatenation
String + String -> concatenation
For example:
3 - 1 // -> 2
3 + 1 // -> 4
'3' - 1 // -> 2
'3' + 1 // -> '31'
'' + '' // -> ''
[] + [] // -> ''
{} + [] // -> 0
[] + {} // -> '[object Object]'
{} + {} // -> '[object Object][object Object]'
'222' - -'111' // -> 333
[4] * [4] // -> 16
[] * [] // -> 0
[4, 4] * [4, 4] // NaN
Top comments (0)