Array.from() vs spread syntax

by

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 function
console.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]).

More Related Contents:

  1. javascript extract certain properties from all objects in array
  2. Why are Objects not Iterable in JavaScript?
  3. Create object from array
  4. Filtering an array with a function that returns a promise
  5. How to generate range of numbers from 0 to n in ES2015 only?
  6. How to find duplicate values in a JavaScript array of objects, and output only unique values?
  7. Using Array objects as key for ES6 Map
  8. Convert ES6 Iterable to Array
  9. Get list of duplicate objects in an array of objects
  10. Extract certain properties from all objects in array
  11. spread operator vs array.concat()
  12. Unexpected comma using map()
  13. Replace element at specific position in an array without mutating it
  14. Find all values by specific key in a deep nested object
  15. How to create an array of objects from multiple arrays
  16. How to delete property from spread operator?
  17. Compare two Arrays with Objects and create new array with unmatched objects
  18. Find a value in an array of objects in Javascript [duplicate]
  19. Compare JavaScript Array of Objects to Get Min / Max
  20. JavaScript – Difference between Array and Array-like object
  21. Create a and fill it based on a passed array
  22. Group by, and sum, and generate an object for each array in JavaScript
  23. Array Join vs String Concat
  24. What do curly braces mean in JSX (React)?
  25. How to push object to array from for loop properly in JavaScript?
  26. How should I import the Spatial Illusions milsymbol library into my webpage?
  27. How to correctly use axios params with arrays
  28. JavaScript foreach loop on an associative array object
  29. JavaScript asynchronous programming: promises vs generators
  30. ES6 arrow function and lexical scope inside a function [duplicate]

Leave a Comment