Arr.map differs from Array.from for an array with no values

Question

I always assumed Array.from behaves the same as Array.map for array. But it seems that for array with no initial values, they are totally different.

arr = new Array(5); 
range = Array.from(arr, (v,idx) => idx); // [0,1,2,3,4]
new_arr = arr.map((v, idx) => {return idx;}); // [undefined, undefined,undefined, undefined,undefined]

So Array.from was still able to get the indices, while arr.map here just skips through all the values, actually it never calls the callback function.

How does JavaScript handles an array with no initial values?

CherryDT · Accepted Answer · 2021-12-03 23:17:42Z

6

new Array(5) creates a sparse array, that is an array with a length of 5 but actually no entries - the elements 0-4 are not just undefined, they actually don't exist. (0 in arr === false)

You are writing above that the result of map is [undefined, undefined, ...] but actually it is another sparse array with no elements. In Chrome Devtools, you'd see this as [empty × 5] instead.

Array.from specifically has the purpose to create a regular array out of array-like things. It basically checks for a length property and creates a new array out of whatever is returned from [0], [1], ..., [length - 1]. Therefore, it turns the sparse array into a dense array with 5x undefined in it, and your callback is called for elements 0-4.

Array.prototype.map however just iterates over the (existing!) elements in the array and returns a new array with the mapped values. Note that the sparse array has no elements, hence your callback is never called, and the returned array looks the same as before.

edited Dec 3, 2021 at 23:17

answered Mar 8, 2020 at 3:31

CherryDT

29.4k5 gold badges56 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaromanda X Over a year ago

callback is never called - you can see this by doing new_arr = arr.map((v, idx) => {console.log('map', idx); return idx;}); vs Array.from(arr, (v,idx) => { console.log('from', idx); return idx;});

Sohail Ashraf · Accepted Answer · 2020-03-08 03:53:23Z

3

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object. It will not care if the array values are assigned or not it will just create a new array from the given array.

Array.map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values." In this case, arr's values have not explicitly assigned values, so map is not iterating over this array.

Difference of Array.from and Array.map.

Array.from is used to create a new array from an existing array-like like object.

And the Array.map is used to manipulate the array values if values are assigned.

edited Mar 8, 2020 at 3:53

answered Mar 8, 2020 at 3:30

Sohail Ashraf

10.7k3 gold badges31 silver badges43 bronze badges

2 Comments

Jaromanda X Over a year ago

you haven't explained why Array.from map callback is different :p

Sohail Ashraf Over a year ago

The simple difference is "Array.from is used to create a new array from an existing array-like like object" and the Array.map is used to manipulate the array values if values are assigned

Collectives™ on Stack Overflow

Arr.map differs from Array.from for an array with no values

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related