Is there some difference between using Array.from(document.querySelectorAll('div')) or [...document.querySelectorAll('div')]?
Here is a example:
let spreadDivArray = [...document.querySelectorAll('div')]; console.log(spreadDivArray); let divArrayFrom = Array.from(document.querySelectorAll('div')); console.log(divArrayFrom); The console.log() will log the same result.
Is there any performance difference?
Spread element or syntax (note that 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 which are not iterable (i.e. objects that have indexed elements and a length property).
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 function console.log([...arrayLikeObject]);Also, if you just want to convert something to an 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]).
Array.from() is an extremely readable way to implement this, I feel that the spread element syntax ...arrayLikeObject is just as readable for people (or more so).
...arrayLikeObject) is much shorter. That can be a factor sometimes, though maybe it shouldn't be.
Array.prototype.reduce to be the array, on which we called it.
var i = 5; Array.from(i) results in [] where as var i = 5; [i] results in [5]
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 Array.from() creates a new array directly.
In your example, [...x] creates a new array by using spread syntax to expand the existing array values into the array literal syntax– the brackets [] are what's actually doing the array-creation bit. Those brackets can be swapped out with any number of other syntax to achieve other results (e.g. spreading into function parameters foo(...x), into an object {...x}, using multiple spreads to concatenate arrays [...x, ...y], etc.).
.from() never expands upon anything, it always creates a new array based on the data provided.
...foo syntax just spreads (expands) all array values as if they were separate, comma-separated arguments. The [] around it is what CREATES a new array. So [...foo] will create a new array and populate it by spreading all array elements as if they were array constructor arguments and does a FULL COPY of every element. Whereas Array.from(foo) will CREATE a new array using the input variable, and is A LOT FASTER because it creates a SHALLOW COPY (this is FASTER).If the input is iterable they do the exact same thing.
Based on the benchmarks, the spread operator performs as good as Array.from for a Set.
let set = new Set(); for (let i = 0; i < 10000; i++) { set.add(Math.random()); } let tArrayFrom = window.performance.now() let arr = Array.from(set) console.log("Array.from():", window.performance.now() - tArrayFrom + "ms") // slightly faster in most of the runs: let tSpread = window.performance.now() let arr2 = [...set]; console.log("Spread syntax:", window.performance.now() - tSpread + "ms") 
I forked the bench from @amin-ya and added some different sources.
Array.from is faster for each source.(sometimes marginally, sometimes significantly - so much variation, that i'm not sure we can trust jsben.ch) https://jsben.ch/hC1rE
tried https://jsbench.me/zxlvvg75ld/1 which also seems inconsistent between runs and between browsers... (results may vary)
Using Babel is a good way to see what's happening internally.
Heads up, though. Make sure latest is selected in Babel, as the default is wrong.
Using your example above, this is the output.
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } var spreadDivArray = [].concat(_toConsumableArray(document.querySelectorAll('div'))); console.log(spreadDivArray); var divArrayFrom = Array.from(document.querySelectorAll('div')); console.log(divArrayFrom); 
[].concat doesn't appear to work if the node list is not concatspreadable? Is that a Babel output?
Is that a Babel output Indeed, I just copied the code to babeljs.io, have you an example?, maybe babel does other transformations when required. This of course is only doing testing for this specific case.[].concat is an incorrect simplification (does only do the same as spread syntax on array arguments), which might be caused by a bug in Babel or some unknown setting.latest in babel makes a difference.. I'll update answer.. with new output.. Thanks for the heads up.
I need to clarify everyone's answers:
...foo syntax just spreads (expands) all array values as if they were separate, comma-separated arguments. It does a shallow spread. Any primities (numbers, strings etc) are COPIED and any complex values (objects) are instead REFERENCED.[] around it is what CREATES a new array.[...foo] will create a new array and populate it by doing a SHALLOW COPY spreading of all array elements as if they were array constructor arguments which in turn takes all those copied elements and puts them in the new array.Array.from(foo) will CREATE a new array using the input variable, but is A LOT FASTER because it ONLY creates a SHALLOW COPY (this is FASTER). So it takes the exact input and just puts every variable/reference into the new array.Array.from().
array.from() creates shallow copies.
Object. performance.. idkArray.fromworks with array-like objects which don't implement the iterator protocol (i.e.Symbol.iterator). Even with ES6 and new browser specs, there are fewer and fewer of those....is not an operator!Array.from()works fine.