{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/mapping-arrays-like-a-pro","result":{"data":{"markdownRemark":{"excerpt":"Let's get started with some mapping. Previously I made a post about filtering arrays like a pro and this one also will be somewhat same, so…","html":"

Let's get started with some mapping. Previously I made a post about
\nfiltering arrays like a pro and this one also will be somewhat same, so put your seat belts on.
\nIn this post, I will show you some cool tricks and hacks to map arrays.

\n

To map arrays like a PRO we will use Array.prototype.map() method.

\n

Mapping Number()

\n

Using the Number object\nwe can convert any string of arrays to numbers easily.

\n
['1', '2', '-1', '0'].map(Number);\n// -> [1, 2, -1, 0]
\n

So, you might think that Number.parseInt will also work in this situation because it is also a function which we can pass into the map function, But no. See why:-

\n
['1', '2', '-1', '0'].map(Number.parseInt);\n// -> [1, NaN, -1, 0]
\n

It results in [1, NaN, -1, 0] because we mostly use parseInt with one argument, But it takes two, input & radix.

\n
/**\n * @param {string} input\n * @param {number} radix\n */\nparseInt('0011', 2)\n// -> 3
\n

Thus when we pass parseInt to Array.prototype.map, it passes 3 arguments to the parseInt, the element, index & the array.

\n
/*  1st iteration (index is 0): */ parseInt(\"1\", 0);  // 1\n/*  2nd iteration (index is 1): */ parseInt(\"2\", 1);  // NaN\n/*  3rd iteration (index is 2): */ parseInt(\"-1\", 2); // -1\n/*  4th iteration (index is 2): */ parseInt(\"0\", 2);  // -1
\n
\n

Checkout Mozilla Docs for better explaination of this

\n
\n

Mapping Object()

\n

Well, this one is a bit of useless 😂, By passing the Object into map you can get the primitive value of the element.

\n
let arr = ['1', '2', '-1', [1,3], {a : 1}, 0, null]\narr.map(Object)\n// -> [String{\"1\"}, String{\"2\"}, String{\"-1\"}, [1, 3], {a: 1}, Number{0}, {}]
\n

You can also try this for fun.

\n
Object.values(window).map(Object)\n// OR\nObject.values(window).map(String)\n// OR\nObject.values(window).map(Number)\n// -> lot of things!
\n

Freezing Objects In An Array 🥶

\n

By using the Object.freeze we can freeze all the objects inside the array.

\n
let obj1 = { data: 'hello' };\nlet obj2 = { data: 'world' };\n[obj1, obj2].map(Object.freeze)
\n

Mapping getOwnPropertyDescriptors()

\n

Same as Object.freeze we can also pass Object.getOwnPropertyDescriptors to map all the propertyDescriptors.

\n
[{a: 1}, {b: 2}].map(Object.getOwnPropertyDescriptors)\n/* ->\n[\n  { a: { value: 1, writable: true, enumerable: true, configurable: true } },\n  { b: { value: 2, writable: true, enumerable: true, configurable: true } }\n]\n*/
\n

Mapping CharCodes

\n

Let's do some fun stuff :p
\nWith the help of Array.fill() and String.fromCharCode method, we can map all the charCodes in an array.

\n
new Array(100).fill(1).map(String.fromCharCode)\n// -> This is soo weird that i can't even copy paste the output!
\n

Mapping Math

\n

Let's also use map with the Math Object.

\n
[0.2,1.5,-0.5,5,1,0,-0.8].map(Math.ceil)\n// -> [1, 2, -0, 5, 1, 0, -0]\n[0.2,1.5,-0.5,5,1,0,-0.8].map(Math.floor)\n// -> [0, 1, -1, 5, 1, 0, -1]\n[0.2,1.5,-0.5,5,1,0,-0.8].map(Math.abs)\n// -> [0.2, 1.5, 0.5, 5, 1, 0, 0.8]
\n

You can also try to map other Math methods.

\n

Mapping The Error Object

\n

We can also directly map the Error Object.
\nWell, i don't know where will you find usefulness of this. 😂

\n
['hello', 'world'].map(Error)\n// -> [Error: hello at Array.map (<anonymous>) at <anonymous>:1:20, Error: world at Array.map (<anonymous>) at <anonymous>:1:20]
\n

Side Note

\n

Same as my previous post about filtering arrays, you can also use those methods to map Boolean values into the array.

\n
[undefined, null, 0, '', 'str', 2.5, 2, { a: 1 }, []].map(Boolean);\n// -> [false, false, false, false, true, true, true, true, true]\n[undefined, null, 0, 'str', 1, { a: 'b' }, [5, 6], [{ a: 5 }]].map(isArray)\n// -> [false, false, false, false, false, false, true, true]
\n
\n

That's it for this post, I hope you enjoyed these mapping tricks, and i know most of them are not very useful, But sometimes fun is what all you need.

\n

hope you like this, and now you are also a PRO at mapping arrays! 😉.

\n

And Don't forget to comment down your favorite array tricks and tips and let me know your thought's about these tricks. See ya!.

\n

And also don't forget to checkout my other post:- filtering arrays like a pro

","timeToRead":4,"id":"4b925f27-6f57-54d8-bb76-66960e22babe","frontmatter":{"date":"November 18, 2019","title":"Mapping Arrays Like A Pro"}}},"pageContext":{"slug":"/blog/mapping-arrays-like-a-pro"}},"staticQueryHashes":["1033876704","3435786681","550521386"]}