Array.from vs Array.prototype.map

Question

So what is the difference between this two functions?

They both create new Array object. Only difference I found so far is that Array.from supp

Answer 1

The purpose of Array.from() is to take a non-array (but array-like) object and make a copy of it into an actual array. This then allows you to use ALL array methods on the copy including things beyond just iterating it such as .splice(), .sort(), .push(), .pop(), etc... which is obviously much more capable than just make .map() work with array-like things.

Answer 2

Static method vs instance method

I know a lot of time has passed since the question was asked. A lot of good things have been said. But I would like to add some more. If we try to determine the nature of the two methods we can say that Array.from has no relation to any instance of Array. It is static method like Array.isArray or Array.of. You also have static properties like length for the Array object. As a static method Array.from can not be Called from instance. For example:

var indexes=[0,1,2,3]
index.from()
>>> index.from is not a function

In the other hand if you write Array.map() you will end up with a Array.map is not a function. It is because Array.prototype.map Exist for the instance of array. In our little example indexes is an instance of Array then we use map on it. Example

var indexes=[0,1,2,3]
function doubleIt(x){
    return 2*x;
}
indexes.map(doubleIt);

With array.from it shoud be something like

Array.from(indexes, doubleIt)

I used quokka plugin on vscode to evaluate performance on vs code in a windows machine. It is not real case of performance benchmarking. But it can help to have an idea. I came up with the same conclusion as @rileynet map seem more performant but only for large array.

var N=10
var tabIndex=[ ...Array(N).keys()]

function doubleIt(x){
    return 2*x;
}
tabIndex.map(doubleIt);/*?.*/ 0.040ms

Array.from(tabIndex, doubleIt)/*?.*/ 0.009ms

if N=100

tabIndex.map(doubleIt);/*?.*/ 0.052ms

Array.from(tabIndex, doubleIt)/*?.*/ 0.041ms

if N=1000

tabIndex.map(doubleIt);/*?.*/ 0.228ms

Array.from(tabIndex, doubleIt)/*?.*/ 0.339ms

if N=10000

tabIndex.map(doubleIt);/*?.*/ 2.662ms

Array.from(tabIndex, doubleIt)/*?.*/ 1.847ms

N=100000

tabIndex.map(doubleIt);/*?.*/ 3.538ms

Array.from(tabIndex, doubleIt)/*?.*/ 11.742ms

Answer 3

Array.map seems to be a bit more performant as well:

var a = () => [{"count": 3},{"count": 4},{"count": 5}].map(item => item.count);
var b = () => Array.from([{"count": 3},{"count": 4},{"count": 5}], x => x.count);

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    b();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    a();
};
console.timeEnd('Function #2')

Running this code using Chrome (Version 65.0.3325.181) on this page gave me the follow results:

Function #1: 520.591064453125ms
Function #2: 33.622802734375ms

Answer 4

Making Array.prototype the prototype object for every single array-like "Class" in JS (more importantly, in DOM, where most of the 'array-like' objects live) would be a potential mistake.

What would a .reduce( ) on a list of HTML elements/attributes look like?

Array.from is the official version of [].slice.call(arrayLike); with the added benefit of not having to create an unused array, just to create an array.

So really, Array.from can be polyfilled with function (arrLike) { return [].slice.call(arrLike); }, and minus native-implementation speed/memory improvements, it's the same result.

This has little to do with map|reduce|filter|some|every|find, which are the keys to living a long and happy life, without the need of micromanaging loops to get things done.