javascript – What is .map() doing in this situation?-ThrowExceptions

Exception or error:

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"]
How to solve:

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.

###

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])

###

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]])

###

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"

Leave a Reply

Your email address will not be published. Required fields are marked *