JAVASCRIPT

Stranger Things, JavaScript Edition

Find the explanation to some of the weirdest JavaScript moments here

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

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

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

map()

map() calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values (including undefined).

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

parseInt()

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

Resolving the mistery

Now 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));
parseInt('1', 0)
1
parseInt('7', 1)
NaN
parseInt('11', 2)
3

Is there a way to get the originally expected result?

Now 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 are 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
('b' + 'a' + + 'a' + 'a').toLowerCase()
"banana"
('b' + 'a' + + 'a' + 'a')
"baNaNa"
b + a + NaN + a + a
+ + 'a'
NaN

Scenario #3: Can’t even name it

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

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

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

Every value in JavaScript as its own boolean value (truthy/falsy), these values are used in operations where a boolean is expected but not given. Very likely you at least once did 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.

  • -0
  • 0n
  • ‘’ or “”
  • null
  • undefined
  • NaN

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

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 kids how to add numbers, and that always if you sum the same numbers you will get the 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
'3' - 1  // -> 2
'3' + 1 // -> '31'
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

I hope you enjoy this post as much as I enjoyed writing it. JavaScript is an amazing language, full of tricks and weirdness, and I hope this article brings you some clarity into some of these interesting topics and that next time you encounter something like this, you know what exactly what is happening.

I’m an entrepreneur, developer, author, speaker, and doer of things. I write about JavaScript, Python, AI, and programming in general.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store