Code Challenges #1: parseInt() deep dive

This week in Code Challenges, I was asked to do a deep dive into the parseInt() function in JavaScript.

Question: What does the following snippet output, and why?


With this, if we ran it, we'd get:

[12341234, NaN, 2, NaN, 27]

There's a lot going on here behind the scenes.

So, right off the bat, we're using the function to iterate over an array of string elements. For each of these elements, we're applying the parseInt() function to it.

The parseInt() function takes in two arguments. The first argument is the string value that we want to parse, and the second argument is a number from 2-36 to be used as the radix/base (by default, it uses base 10).

While we don't actually see the arguments being passed into parseInt, what's actually happening here is something like this:

['12341234','5678901234','10','7890','123456a'].map((a, b) => parseInt(a, b))

The provided example is a syntactic sugar for this.

Since the first argument of the function is the element and the second is the index, what really gets passed into parseInt() are as follows...

'12341234', 0
'5678901234', 1
'10', 2
'7890', 3
'123456a', 4

In the first iteration, we're asking to parse the string '12341234' with a base of 0. It's likely that since 0 is falsey, the implementation of parseInt() assumes that we didn't pass in a base at all. Because of this, it will by default assume that base 10 is to be used. That's why it spits 12341234 back out.

In the second iteration, we've actually provided a value. We're trying to use base 1. However, this just isn't valid. It's not between 2 and 36, so it returns NaN.

The third iteration expects as we would imagine. '10' is binary for 2 and we're parsing it to base 2.

The fourth iteration with "7890" attempts to parse the int into a base 3 number but results in a NaN because the parseInt() implementation cannot even parse the first digit (7). In base 3, the symbol (7) doesn't exist, only 0-2.

For example:

parseInt('0', 3) // => 0
parseInt('1', 3) // => 1
parseInt('2', 3) // => 2
parseInt('3', 3) // => NaN

In the final iteration with "123456a", we attempt to parse it down to base 4. However, only the symbols "123" are understood in base 4.

Since "123" in base 4 can also mathematically be represented by (1 * 4^2) + (2 * 4^1) + (3 * 4^0). We can see that the value is indeed 27.

(1 * 4^2) + (2 * 4^1) + (3 * 4^0) = 27

That's what I got out of this question, what do you think? Leave a comment below if you have any ideas you'd like to share on this topic.


Liked this? Sing it loud and proud πŸ‘¨β€πŸŽ€.


Be the first to leave a comment


Stay in touch!

About the author

Khalil Stemmler,
Developer Advocate @ Apollo GraphQL ⚑

Khalil is a software developer, writer, and musician. He frequently publishes articles about Domain-Driven Design, software design and Advanced TypeScript & Node.js best practices for large-scale applications.

View more in Code Challenges

You may also enjoy...

A few more related articles

Books that Developers Should Read in 2020 [List]
These books β€œare basically cheat codes” for leveling up your skills and knowledge as a developer.
There Is No Dominant Paradigm | Software Professionalism
Functional programming is not the end to all of our problems. Quality software is all three paradigms.
Name, Construct & Structure | Organizing Readable Code - Part 1
Naming files & folders well, using well-understood technical constructs and strategically organizing files well are three ways to ...
Over $85 billion spent on fixing bad code [bootcamps, junior devs, JavaScript, and software design principles]
More and more money is being spent by companies on maintaining bad JavaScript code. Here's where I think our industry needs to cha...

Want to be notified when new content comes out?

Join 5000+ other developers learning about Domain-Driven Design and Enterprise Node.js.

I won't spam ya. πŸ–– Unsubscribe anytime.

Get updates