5 Strange Yet Funny Things That Only Happen in JavaScript

  • Gabriel Romualdo

  • December 15, 2019

JavaScript is a tricky language and can be very confusing in terms of how its code is parsed and run. It’s an object-oriented language, but for many years it never had classes. It was built for the browser, but now it can also run on a server and work with the filesystem.

Over the years, I have seen some peculiar and equally funny code examples that will only work with JavaScript. Here are five of them.

#1: Array Concatenation Returns a String

JavaScript concatenation can get confusing sometimes. Concatenating arrays with the + operator is a prime example.

JavaScript array concatenation result

This happens because JavaScript converts both arrays to Strings and then concatenates them like this:

[1, 2, 3, 4] + [5, 6, 7, 8]

// is interpreted as:

"1,2,3,4" + "5,6,7,8"

// which yields:

"1,2,3,45,6,7,8"

#2: BaNaNa?

This is a really popular example of JavaScript inferred type when concatenating values.

BaNaNa JavaScript example

This is why this happens:

"b" + "a" + + "a" + "a" 

// is interpreted as:

"b" + "a" + (+"a") + "a"

// (+"a") is interpreted as numeric because of the starting +,
// but "a" cannot be converted to a Number, so it is NaN (not a number):

"b" + "a" + NaN + "a"

// NaN is converted to a String during concatenation, making it "NaN":

"b" + "a" + "NaN" + "a"

// String concatenation:

"baNaNa"

#3: This is VALID JavaScript Code (dubbed JSF***)

[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]][([]+[][(![]+[]
)[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(!![]+[
][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[+!![]+[+[]]]+(
[][[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+[][(
![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(
!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!
![]]])[+!![]+[+[]]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+([][
[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(
![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+[+[]]]+([]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+
[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]
])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[+!![]+[+[]]]+([][[]]+[])[+!![]]+(![]+[])[!

Full code too long to display, see jsf___example.js for full code

Yes, that was valid JavaScript code. Try running it in the console, it will yield:

Code Result: "JavaScript is Confusing" logged to console

It turns out that any JavaScript function, String, variable, or data type can be represented with the combination of 6 characters in JS, and produces completely valid, out-of-the-box JavaScript code. This idea was dubbed as JSF*** after the Brainf*** programming language.

You can read more about JSF*** in this GitHub repo.

#4: You can write HTML Comments in JavaScript?

HTML comments are completely valid in JavaScript, and can be used in place of regular // or /* */ comments. In fact, <!--, --> and <!-- --> all do nothing in JavaScript and are ignored.

HTML comments in JavaScript example

Many JavaScript syntax highlighters do not have this interpreted, so, although amusing, it may not be practical to start using HTML comments fulltime in your JS.

This exists because HTML comments were used inside <script> tags so that browsers that did not support JS ignored it.

Of course, this is not relevant anymore as most browsers support JavaScript, and those that don't likely don't display the contents of the script tag, but still an interesting fact to know.

#5: Min Value is Greater than Zero... ?

Many programming languages have a min and max value feature, representing the maximum numbers the language can hold in a single variable.

Python has its sys.maxsize and JavaScript has its Number.MIN_VALUE constant.

Getting the value of Number.MIN_VALUE yields a very small number, but it is greater than zero too?

JavaScript MIN VALUE constant example

This is in fact correct, because Number.MIN_VALUE actually represents the smallest positive number that can be represented with a float in JavaScript, not the smallest negative number.

Be aware of this when using Number.MIN_VALUE in your programs!

Conclusion

I hope you enjoyed this post and liked the peculiar JavaScript examples. JavaScript is a great but confusing language at times, and I hope you learned something from this article.

If you are interested in some more tricky JavaScript examples, there is an existing repo called WtfJS with hundreds of code snippets and explanations.

Thanks for scrolling.

— Gabriel Romualdo, December 15, 2019