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.
Nobody normal ever accomplished anything meaningful in this world. — Jonathan, Stranger Things
Scenario #1: [‘1’, ‘7’, ‘11’].map(parseInt)
Let's take a look at the code for our first scenario.
For what you would expect the output to be:
However, things get a bit off here and the actual result is:
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.
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:
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:
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:
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:
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.
Somehow, we're forming the word ‘banana’. Let’s remove the lower case conversion and see what happens:
Scenario #3: Can’t even name it
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?
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:
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….
All looked good until we got to:
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:
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.
Triplebyte helps engineers find great jobs by assessing their abilities, not by relying on the prestige of their resume credentials. Take our 30 minute multiple-choice coding quiz to connect with your next big opportunity and join our community of 200,000+ engineers.