Brain Exercises for JS

[Sarlecc]

Recently I've been reading "Expert JavaScript" by Mark E. Daggett (which I highly recommend) when I came across a chapter that focused on some interesting programmatic jargon. Some of this jargon I can not see as being particularly useful in production code (except where it can shorten some common operations). However I believe one can use this to expand their knowledge on how JS functions. I encourage you to try and figure out what is happening behind each example and what it may equal.  I will also try to explain in spoilers the process for each example I show (note this is based off my own observations and from my reading please feel free to correct me if I am wrong).


Using Bitwise operations for math (math is not always what it appears):


-~5
~-5
2*~8
2*~-8
2/~9
2/~-9

Spoiler

-~5 adds one to the 5 result 6.


~-5 subtracts one from the 5 result 4.


2*~8 invert the 8 to a negative number, subtract one you now have -9 multiply by 2 you get -18.


2*~-8 subtract 1 and you get 7 multiply by 2 and you now have 14.


2/~9 invert the 9 to a negative number, subtract one you now have -10, take the 2 and divide -10 from it you now have -0.2.


2/~-9 subtract 1 from the 9 leaving you with 8, take the 2 and divide 8 from it you now have 0.25.

Cryptic Coercion:


console.log((![]+[])[+[!+[]+!+[]]]+(![]+[])[+[]+!+[]+!+[]+!+[]+!+[]]+(![]+[])[+[]+!+[]+!+[]+!+[]+!+[]]+(!![]+[])[+[+[]]])

Spoiler

So what in the world is happening up their you may be asking... (And do note that I can not see any real scenario where this should be used I just found it quite interesting)


Well in this example we have



(![]+[]) // ![] is false which then gets concatenated to a string with the + []
[+[!+[]+!+[]]] //+!+[] is equal to 1 because !+[] equals true this gets added to !+[] giving us 2 which in turn gets placed in an array.
//so now we can turn this into the following code for easier translation
"false"[2]
//this gives use the letter "l"
+(![]+[])[+[]+!+[]+!+[]+!+[]+!+[]]
//like before the first part gives use the string "false"
//the second part gives us 4 wrapped in an array
"false"[4]
//this gives us the letters "le" now
"false"[4]
//repeating this one more time gives us "lee"
+(!![]+[])[+[+[]]]
//The first part gets notted twice giving us the string "true"
//the second part givs us the number 0 wrapped in an array
"true"[0]
//this gives us the letter "t" we now have "leet"


What other weird brain exercises have you found in JS that may or may not have use in production code?

 

[ロリ先輩]

I wouldn't personally use them in code, since it makes it less readable and less maintainable. However, I would certainly use them as output for a minification or obsfucation for web distribution/streaming for clientside pages. Since we don't compile JS to bytecode or machine code, the actual filesize of our JS code is important when we're loading it over HTTP; smaller size is a quicker download, a quicker download means that the page loads faster. This isn't overly relevant in RM if you're using a local nwjs container or Cordova container, since in those instances, we're streaming code locally.

 

[Iavra]

I only ever use bitwise operations, if i'm working with positive numbers and want a faster alternative to Math.floor:


4.5|0; // 4


This has the added benefit of converting NaN values to 0.


Actually, there are multiple ways to do this:


- Double negation (~~)


- Bitwise shift (<< 0 or >> 0)


- Bitwise or (|)


- possibly more


but jsperf shows, that the version i use is the fastest on average among the most used browsers.

 

[Lemur]

Question is, how much speed do you gain for the obscurity of it? Not everyone's going to have experience bit-twiddling, and even fewer have read things like Hacker's Delight.


I just feel like this isn't likely to be your main bottleneck of performance.

 

[Sarlecc]

@Iavra I actually use bitwise | (OR) for coercing a boolean value to a number value. There was like four or five other methods I could have used but I found this one to be the most readable for me. i.e:


false | 0; // => 0


true | 0; // => 1


edit Didn't know that about NaN.


@Lemur Speed wise running this calculation just once you would gain virtually nothing based off my research.

 

[Iavra]

I don't have performance concerns, but when i'm animating thousand of particles every frame and, in worst case, need to compare them with each other (for stuff like collision), i'm happy about every little bit i can save.


I just tried running this, btw: https://jsperf.com/jsfvsbitnot/8


On firefox, the performance was pretty close, with only parseInt lacking behind (i also use bitwise OR as a parseInt alternative).


On chrome, the bitwise operations were actually 4 times as fast as Math.floor (and 19 times as fast as parseInt).