The story behind 69
A long time ago, I posted a tweet: https://twitter.com
The stupidest, most obscure way to write 69: ~~!![]|~~!![]<<~!~~![]*~[]|~~!![]<<~~~!![]*~~~!![]*~!~~![]*~[]+~~~!![]
I then clarified it was JavaScript code, which when evaluated, indeed gives you 69 (see for yourself). Of course, all 3 of my Twitter followers were confused, so here is how it works!
The weird kid
JavaScript is kind of like this weird kid in your classroom who doesn't speak much, and does some sort of witchery in their free time. Wait, that kid's me.
Either way, there are some fun things we can do by abusing the fact that not only JS doesn't enforce types, the rules for type conversion are a little strange. Take [] which is an empty array. If we do maths on an empty array, it evaluates to zero, therefore []*1 equals 0. However, []+0 equals "0" which is text and not a number, because + in this context is a string concatenation operator, and not mathematical addition.
If the array contains one numerical element (number or a string that can be converted into a number), it will be used for the operations- For instance,
[5]*2 equals 10, and [5]+1 is "51". That is because the array is converted into a string without the brackets, and then into a number if required. Feel free to experiment with various data types and operators on your own.
Numbers without digits
The point of my exercise was to produce a number without using any digits. Thankfully we have a few more utilities at disposal - the logical NOT ! and the bitwise NOT ~ operators. These can be used to generate integers between -2 and 1, since the bitwise NOT converts the statement into a number. In fact there are virtually infinite representations of these numbers we can achieve by adding ~~ or !~ into the right place ad infinitum. Here are a couple examples:
-2: ~!![] ~~~!![] ~!~~![]
-1: ~[] ~![] ~!!![]
0: ~~[] ~~![] ~~~~![]
1: ~~!![] ~~!!~![]
Note that
![] is effectively the same as checking if an object is not present, which is not true since an array is actually very present indeed, and therefore the statement is false. If that is not confusing enough for you, think about this - how did we get 4 different numbers out of true and false?
How to 69
Now, let's go back to the tweet. Why did I choose 69? Because I'm a mature individual of course, and.. nevermind. But it was a good choice, because it led to some fun maths!
To make matters simpler, let's convert 69 to binary. 69 is 64+4+1 or 26+22+20, which gives us 1000101. In programming, we can use bitwise operators and decimal numbers to create binary numbers. For this particular case, I will take the number 1 and use the bit shift << to move it to the left. That way I can myself the binary numbers 1, 100, and 1000000, and then combine them in any order using the bitwise OR | operator.
Thus the goal is to get 1|1<<2|1<<6 which gives us the wanted binary number: 1000101. Numbers are always displayed in decimal so conversion is not required. You can try running this code as well and see for yourself.
Connecting the bits together
(Haha, get it? Bits? I'll see myself out...)
Now we just need to convert 1|1<<2|1<<6 into something marginally uglier for no good reason whatsoever. Let's look at our table again!
-2: ~!![] ~~~!![] ~!~~![]
-1: ~[] ~![] ~!!![]
0: ~~[] ~~![] ~~~~![]
1: ~~!![] ~~!!~![]
We can start replacing the numbers with their silly equivalent from the table. I made the table after creating the original tweet, so it the result is neither the most compact nor confusing way to write it, and I ended up mostly repeating the same number representations and mathematical operations instead of mixing them up. More foresight will be had next time!
Let's replace the ones first:
1|1<<2|1<<6
~~!![]|~~!![]<<2|~~!![]<<6
For the 2, I went with (-2)*(-1).
~~!![]|~~!![]<<2|~~!![]<<6
~~!![]|~~!![]<<~!~~![]*~[]|~~!![]<<6
Finally, the way I wrote 6 was more complicated than it probably should have, but why not go for (-2)*(-2)*(-2)*(-1)+(-2) if it was the first one that came to my mind looks wonderful?
~~!![]|~~!![]<<~!~~![]*~[]|~~!![]<<6
~~!![]|~~!![]<<~!~~![]*~[]|~~!![]<<~~~!![]*~~~!![]*~!~~![]*~[]+~~~!![]
~~!![]|~~!![]<<~!~~![]*~[]|~~!![]<<~~~!![]*~~~!![]*~!~~![]*~[]+~~~!![]
The summary
Now that you know this critically important information, I think we can all agree that JavaScript is pain a beautiful language with many opportunities of writing creative code. Either way, hope you had fun on our journey of figuring out the secret of 69!
Of course, you can use this to generate any number within the integer range for JavaScript's bitwise operations (normal integers go up to 253-1, bitwise operators work with up to 232-1 which is about 4 billion). If you feel extra adventurous, you can ignore binary and use decimal and regular arithmetic, but it seems to be disadvantageous in most cases. Get creative!
Post-mortem
During the redesign of my website in August 2016, I have revisited the article and rewrote several parts of it. As a little extra bonus, I also compacted the original code - the principle is the same, I just made it look even more tubular!
((_,$)=>_|_<<$*~[]|_<<$*$*$*~[]+$)(~~!![],~!![])