What is .map() doing in this situation?

Javascript

Javascript Problem Overview


Using the Chrome Console, this is my input and output:

[0].map(Array);

[[0, 0, [0]]]; // output

What is happening here?

EDIT

The reason this makes me curious is because something like

[0].map(String);

Will return

["0"];

And not

["0", "0", "String"]

Javascript Solutions


Solution 1 - Javascript

The .map() function is calling the Array() function with three arguments, the value of the array element which is 0, the index of that element, also 0, and a reference to the whole array.

So it's like doing this:

var a = [0];
var index = 0
Array(a[index], index, a);   // create array with three elements

The array returned by Array() then becomes the first element of the array that .map() creates, hence the extra level of nesting in your [[0, 0, [0]]] result.

EDIT regarding your edit: when you say [0].map(String); that results in String() being called with the same three arguments like String(a[index], index, a), but the String() function ignores all but the first argument, whereas Array() uses all supplied arguments.

Solution 2 - Javascript

Firstly, Array could be used as a function to create arrays:

var arr = Array(1, 2, "Hello");

console.log(arr); // [1, 2, "Hello"]

Secondly, map passes three parameters to its callback: the element, its index from the array and the array itself.

So, since your array contains one element, the line:

[0].map(Array);

is equivalent to:

[Array(0, 0, [0])];     // the element 0 in the original array will be mapped into Array(0, 0, [0])

Solution 3 - Javascript

After you updated question. Other answers provide you info about map

To answer why array and string differ look to constructors

String constructor accept 1 parameter String(thing) while array new Array(element0, element1[, ...[, elementN]])

Solution 4 - Javascript

This call

[0].map(Array);

gives you the same result as if you wrote something like this:

[0].map(function (value, index, array) {
    return Array(value, index, array);
})

Map function is calling Array function with three parameters: value of element, index of element and whole array. This call to Array returns you array with 3 elements: value (number 0), index (number 0), whole array ([0]).

And this new array is wrapped in the original Array, because you maped original element (number 0) to new element (array of 3 elements)

Note: You might be used to using only the first parameter like in

array.map(function (a) { return a * a; });

or using just two to get also index

array.map(function (item, index) { return "index=" + index + ", value=" + item; });

But you need to remember that map still provides 3 parameters you just ignore them in your callback function. That's also the reason why code like:

[0].map(String);

returns

["0"]

It's because String function care only about the first parameter and ignores other passed parameters. If you call

String(11, "Some", "other", "ignored", "parameters")

you will still get

"11"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJacksonkrView Question on Stackoverflow
Solution 1 - JavascriptnnnnnnView Answer on Stackoverflow
Solution 2 - Javascriptibrahim mahrirView Answer on Stackoverflow
Solution 3 - JavascriptVova BilyachatView Answer on Stackoverflow
Solution 4 - JavascriptMariusz PawelskiView Answer on Stackoverflow