{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/tricky-use-case-of-array-map-in-js","result":{"data":{"markdownRemark":{"id":"a67cfa06-a36b-5699-89e6-77a33ac9bed5","html":"

If you are familiar with functional programming, Array.prototype.map must be a function that you work with every day.

\n

For me, map() is a powerful function, but there might be some tricky use case of it that you don’t know about!

\n

Let’s walk through some basic knowledge

\n
\n

The map() method creates a new array from the calling array by applying a provided callback function once for each element of the calling array

\n
\n

Simple use cases

\n

Giving this array

\n
const devs = [\n\t{ id: \"1\", name: \"Leo\", yob: 1995 },\n\t{ id: \"2\", name: \"Paul\", yob: 1995 },\n\t{ id: \"3\", name: \"Jesse\", yob: 1996 },\n\t{ id: \"4\", name: \"Ken\", yob: 1997 }\n];
\n

What can we do using map() function:

\n\n
const ages = devs.map(dev => {\n\tconst currentYear = new Date().getFullYear()\n\treturn currentYear - dev.yob\n});\n\nconsole.log(ages); // => [25, 25, 24, 23]
\n\n
const names = devs.map(dev => dev.name);\n\nconsole.log(names); // => [\"Leo\", \"Paul\", \"Jesse\", \"Ken\"]
\n\n
import React from \"react\";\n\nexport default DeveloperProfiles = ({ devs }) => {\n\treturn (\n\t\t<ul>\n\t\t\t{\n\t\t\t\tdevs.map(dev => <li key={dev.id}>{dev.name}</li>)\n\t\t\t}\n\t\t</ul>\n\t);\n}
\n

Tricky use case

\n

It is common to pass the pre-defined callback function as map() argument like this:

\n
const extractId = (dev) => {\n\treturn dev.id\n};\n\nconst ids = devs.map(extractId);\n\nconsole.log(ids); // => [\"1\", \"2\", \"3\", \"4\"]
\n

But this habit may lead to unexpected behaviors with functions that take additional arguments.

\n

Consider this case - we need to get all ids as numbers:

\n
// ids = [\"1\", \"2\", \"3\", \"4\"]\nconst idsInNumber = ids.map(parseInt);\n\nconsole.log(idsInNumber); // => ???
\n

You might expect the result is [1, 2, 3, 4], but the actual result is [1, NaN, NaN, NaN] 😮😮

\n

We encountered this problem at Cốc Cốc recently, it took me a while to figure out, and here’s the answer…

\n

Usually, we use map() callback with 1 argument (the element being traversed), but Array.prototype.map passes 3 arguments:

\n\n

And the callback in this case - parseInt is often used with 1 argument but it takes 2:

\n
// Syntax\nparseInt(string [, radix])
\n\n

For example:

\n
parseInt(\"10\"); // => 10\nparseInt(\"10\", 10); // => 10\nparseInt(\"10\", 2); // => 2\nparseInt(\"10\", 4); // => 4
\n

And here you can see the source of confusion 👀!

\n

The third argument of map() is ignored by parseInt - but not the second one!

\n

Hence, the iteration steps of map() look like this:

\n
// map(parseInt) => map(parseInt(value, index))\n\n/* index is 0 */ parseInt(\"1\", 0); // => 1\n/* index is 1 */ parseInt(\"2\", 1); // => NaN\n/* index is 2 */ parseInt(\"3\", 2); // => NaN\n/* index is 3 */ parseInt(\"4\", 3); // => NaN
\n

Solution

\n

As you’ve known the source of the problem, the solution is not to pass all of the map()’s arguments to your callback if you’re not sure how it works

\n\n
function returnInt(element) {\n  return parseInt(element, 10)\n}\n\n[\"1\", \"2\", \"3\", \"4\"].map(returnInt);\n// => [1, 2, 3, 4]\n\n// Same as above, but using the concise arrow function syntax\n// Better use this if you don't need to re-use the callback\n[\"1\", \"2\", \"3\", \"4\"].map(numb => parseInt(numb, 10));\n// => [1, 2, 3, 4]
\n\n
[\"1\", \"2\", \"3\", \"4\"].map(Number);\n// => [1, 2, 3, 4]
\n

And that’s what I know about Array.prototype.map function, feel free to share your use case in the comment section 👇

\n

Happy coding!

\n

References

\n","fields":{"slug":"/posts/tricky-use-case-of-array-map-in-js","tagSlugs":["/tag/javascript/","/tag/array/","/tag/map/","/tag/functional-programming/","/tag/use-cases/"]},"frontmatter":{"date":"2020-09-21T22:12:03.284Z","description":"If you are familiar with functional programming, Array.prototype.map must be a function that you work with every day. We encountered a tricky use case of it at Cốc Cốc recently, it took me a while to figure out, and here's the answer...","tags":["javascript","array","map","functional-programming","use-cases"],"title":"Tricky use case of Array.prototype.map in JS","socialImage":"/media/header-book-n-coffee.jpg","headerImage":"/media/header-book-n-coffee.jpg"},"timeToRead":4}},"pageContext":{"slug":"/posts/tricky-use-case-of-array-map-in-js"}}}