Let us use these two arrays for this whole post:
const fruits = ["apple", "orange"]; const vegetables = ["carrot", "pottato"];
Shallow copy an array
Spread can be used to shallow copy an array as shown below. Basically, the fruits array is expanded as individual elements by the spread operator, which then is used by the bracket  to construct the array the usual way.
// Shallow copy fruits into a new array plate1 const plate1 = [...fruits]; console.log(plate1); // ["apple", "orange"]
Append an array
Array.prototype.push() is used to append individual elements to an array. It takes one or more individual elements as argument. Spread operator can be used to expand the second array as individual elements so that they can be used as arguments to push.
// plate1 already has fruits. Now append vegetables plate1.push(...vegetables); console.log(plate1); // ["apple", "orange", "carrot", "pottato"]
Merge two arrays creating a new one
Each array can be spread to create a new array using .
// Copy fruits and vegetables into plate2 at one go const plate2 = [...fruits, ...vegetables]; console.log(plate2); // ["apple", "orange", "carrot", "potato"]
Combine arrays and elements
Spread operator can be used anywhere inside the  brackets along with other individual elements.
// Add 'bread', copy vegetables, add 'chicken' and add fruits // to plate3 const plate3 = ['bread', ...vegetables, 'chicken', ...fruits]; console.log(plate3); // ["bread", "carrot", "potato", "chicken", "apple", "orange"]
Prepend an array
Spread operator can be used to prepend an array to another array.
// plate4 has 'Bagel'. Prepend fruits. It involves changing // the array reference, so we declare using let // instead of const let plate4 = ['Bagel']; plate4 = [...fruits, ...plate4]; console.log(plate4); // ["apple", "orange", "Bagel"]
*iterable – An object is iterable if it implements @@iterator method, it should have a property @@iterator which is a method as defined by the iterator protocol. It takes no argument and returns a method next(). next() returns an object with two properties i) done (boolean) and value (any type of value). Built-in iterables are string, array, TypedArray, Map, Set.
Here is an example of how spread operator works with string, which is a iterable.
const country = "USA"; console.log([...country]); // ["U", "S", "A"] // Each character of the string is an element in the array.
The whole code in this post is available as a gist: