6 'Strange Things' in JavaScript, explained

This article was originally published on Live Code Stream by Juan Cruz Martinez (twitter: @bajcmartinez), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.

If you work long enough in JavaScript, you're guaranteed to come across some very strange behaviors.

Nobody normal ever accomplished anything meaningful in this world. — Jonathan, Stranger Things

Oh course, even though JavaScript may occasionally throw surprises at you, it's a very powerful language that's worthy of some investigation of its mysteries. So in this article, I will explain some of its strange code snippets so that you can add their behaviors to your toolbox. This language can be a weirdo, but we love it!

Scenario #1: [‘1’, ‘7’, ‘11’].map(parseInt)

Let's take a look at the code for our first scenario.

['1', '7', '11'].map(parseInt);

For what you would expect the output to be:

[1, 7, 11]

However, things get a bit off here and the actual result is:

[1,NaN,3]

‍

map()

[1, 2, 3].map(console.log)
1 0 > (3) [1, 2, 3]
2 1 > (3) [1, 2, 3]
3 2 > (3) [1, 2, 3]

‍
As we can see, the map function not only did pass the value of the item but also the index and a copy of the full array on each iteration. This is important and is in part what’s affecting our previous result.

parseInt()

Resolving the mystery

Now that we know enough about the two functions, let’s try to understand what is happening in our case. We will start with our original script and we will explain it step-by-step:

['1', '7', '11'].map(parseInt);

['1', '7', '11'].map((currentValue, index, array) => parseInt(currentValue, index, array));

Starting to get an idea of what happened? When we add the arguments, it comes clear that the parseInt function is receiving additional parameters and not only the actual value of the item in the array. So now we can test what the function would do for each of these value combinations, but we can also ignore the array parameter as it will be discarded by the parseInt function:

parseInt('1', 0
1

parseInt('7', 1
NaN

parseInt('11', 2
3

Is there a way to get the originally expected result?

Now that we know how it works, we can easily fix our script and get the desired result:

['1', '7', '11'].map((currentValue) => parseInt(currentValue));
> (3) [1, 7, 11]

‍
Scenario #2: (‘b'+'a'+ + ‘a’ + ‘a’).toLowerCase() === ‘banana’

You may be thinking that the expression above is false. After all, there is no letter ‘n’ in the string we are building on the left side of the expression, or isn’t it?

Let’s find out:

('b'+'a'+ + 'a' + 'a').toLowerCase() === 'banana'
true

Ok, you probably realized already what is going on, but if not let me quickly explain it here. Let’s focus on the left side of the expression. There’s nothing weird on the right side, believe me.

('b'+'a'+ + 'a' + 'a').toLowerCase()
"banana"

Somehow, we're forming the word ‘banana’. Let’s remove the lower case conversion and see what happens:

('b'+'a'+ + 'a' + 'a')
"baNaNa"

b + a + NaN + a + a

+ + 'a'
NaN

Scenario #3: Can’t even name it

(![] + [])[+[]] +  
	(![] + [])[+!+[]] +  
  ([![]] + [][[]])[+!+[] + [+[]]] +  
  (![] + [])[!+[] + !+[]] === 'fail'

What in the world? How does a bunch of brackets form the word fail? (And no, JS is not failing. We are actually getting the string 'fail' as the output.)

Let’s try to explain it. There are a few things in that bunch that form a pattern.

(![] + [])

Loving it so far? Let’s do some more.

Scenario #4: To be truthy or to be true, that is the question.

To be truthy or to be true, that is the question. To be falsy or to be false, that is the question.

What is truthy and falsy? And why are they different from true or false?

Every value in JavaScript has its own boolean value (truthy/falsy). These values are used in operations where a boolean is expected but not given. It's very likely you've once done something like this:

const array = [];
if (array) {  
	console.log('Truthy!');
}

How do I know what is truthy and what is falsy?

Everything that is not falsy is truthy. Terrible explanation? Fair enough, let’s examine it further.

Everything else would be truthy.

Scenario #5: Array equality

Some things in JS are simply weird. It's the way the language is design and we accept it the way it is. Let’s see some weird array equalities:

[] == ''   // -> true
[] == 0    // -> true
[''] == '' // -> true
[0] == 0   // -> true
[0] == ''  // -> false
[''] == 0  // -> true

[null] == ''      // true
[null] == 0       // true
[undefined] == '' // true
[undefined] == 0  // true

[[]] == 0  // true
[[]] == '' // true

[[[[[[]]]]]] == '' // true
[[[[[[]]]]]] == 0  // true

[[[[[[ null ]]]]]] == 0  // true
[[[[[[ null ]]]]]] == '' // true

[[[[[[ undefined ]]]]]] == 0  // true
[[[[[[ undefined ]]]]]] == '' // true

If you are interested in why all of the above ... is, you can read more about that in section 7.2.13 Abstract Equality Comparison of the specification. Though I have to warn you that it's not for the easily startled :p

Scenario #6: Math is Math, unless….

In our real world, we know that math is math and we know how it works. We were taught since childhood how to add numbers and that whenever you sum the same two numbers together you will get the same result, right? Well… for JavaScript this is not always true… or kind of… let’s see it:

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

All looked good until we got to:

'3' - 1  // -> 2
'3' + 1  // -> '31'

When we subtracted, the string and the number interacted as numbers. But during the addition, both acted as strings. Why? Well… as maddening as it might seem, JS is designed to things this way. Luckily, there’s a simple table that will help you understand how the language handles each case like this:

Number  + Number  -> addition
Boolean + Number  -> addition
Boolean + Boolean -> addition
Number  + String  -> concatenation
String  + Boolean -> concatenation
String  + String  -> concatenation

{  
	// a code block here
 }
 +[]; // -> 0

({} + []); // -> [object Object]

Conclusion

Again, JavaScript is an amazing language — it just happens to be one that's got some tricks and weirdness. I hope this article brings you some clarity into some of these interesting quirks and that next time you encounter something like them you can more easily figure out what exactly is happening.

And by the way, since what we went over above are only some of the situations under which JS can be very weird, I'm officially leaving the door open for a Strange Things in JavaScript Part 2 blog.

Juan’s Live Code Stream writing can be sent to you as a free weekly newsletter. Sign up for updates on everything related to programming, AI, and computer science in general.