Array.from() vs spread syntax
Spread element (it's not an operator) works only with objects that are iterable (i.e. implement the @@iterator
method). Array.from()
works also on array-like objects (i.e. objects that have the length
property and indexed elements) which are not iterable. See this example:
const arrayLikeObject = { 0: 'a', 1: 'b', length: 2 };// This logs ['a', 'b']console.log(Array.from(arrayLikeObject));// This throws TypeError: arrayLikeObject[Symbol.iterator] is not a functionconsole.log([...arrayLikeObject]);
Also, if you just want to convert something to array, I think it's better to use Array.from()
because it's more readable. Spread elements are useful for example when you want to concatenate multiple arrays (['a', 'b', ...someArray, ...someOtherArray]
).
Well, Array.from
is a static method, i.e., a function whereas the spread
syntax is part of the array literal syntax. You can pass functions around like data, you can invoke them once, several times or not at all. This isn't possible with the spread
syntax, which is static in this regard.
Another difference, which @nils has already pointed out, is that Array.from
also works with array-like objects, which don't implement the iterable protocol. spread
on the other hand requires iterables.
The difference is that spread allows an array to be expanded. Whereas from()
creates a new array. .from()
doesn't expand upon anything, it creates a new array based on the data provided; the spread operator on the other hand can expands an array with new properties.