DEV Community

Cover image for 5 Strange Yet Funny Things That Only Happen in JavaScript
Gabe Romualdo
Gabe Romualdo

Posted on • Updated on • Originally published at xtrp.io

5 Strange Yet Funny Things That Only Happen in JavaScript

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"
Enter fullscreen mode Exit fullscreen mode

#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"
Enter fullscreen mode Exit fullscreen mode

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

[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]][([]+[][(![]+[]
)[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(!![]+[
][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[+!![]+[+[]]]+(
[][[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+[][(
![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(
!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!
![]]])[+!![]+[+[]]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+([][
[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(
![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+[+[]]]+([]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+
[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]
])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[+!![]+[+[]]]+([][[]]+[])[+!![]]+(![]+[])[!
Enter fullscreen mode Exit fullscreen mode

Full code is unfortunately too long to display.

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

Top comments (4)

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

1) The right way todo conact arrays is array1.concat(array2). Plus does not mean concat in Javascript. In python this works withs lists. In Java this would also not work. Nothing strange in js.
2) Is correct and here it how the unary plus (+) works: developer.mozilla.org/en-US/docs/W.... Usually an error like this is shown by your editor :)
3) I would advise everybody to read the explination :)
4) This only happens in .html files if you try todo that in .js files you will get an error
5) Really nothing special to JS in Java for example MIN_VALUE float is 2-149. Just how signed float(numbers) in computer science usually work.

Collapse
 
brieucp profile image
brieucp

There are even JS to JSFUCK converter \o/
jsfuck.com/

Collapse
 
gaberomualdo profile image
Gabe Romualdo • Edited

Yup, that's how I made the code example :)

— Gabriel

Thread Thread
 
brieucp profile image
brieucp

I'm disappointed, I thought you wrote it manually ;)