Spread … operator in JavaScript and situations where we can use it.

Published in

Nerd For Tech

3 min readApr 4, 2021

Spread syntax can be used when all elements from iterables or an array need to be included in a list of some kind. we can use spread operator to basically expand an array and add new elements.

Spread operators are used when we need to write multiple values by seperated by commas.

Spread operator not only works on arrays but on all iterables.

We can use spread operator when building an array or when we pass values to a function.

(Iterables : arrays, strings, sets, maps but not objects)

So basically unpacking all the array elements at one .

for ex: we have an array const arr = [7, 8, 9];
// now we want to create an new array based on this array. 
// how we will do it without spread ... operator 👉const oldMethodArr = [1, 2 , arr[0], arr[1], arr[2]];console.log(oldMethodArr);
Output: [1, 2, 7, 8, 9];// BUT WITH SPREAD OPERATOR WE CAN DO IT WITH VERY EASY AND HANDY WAY 👉const newMethodArr = [1, 2, ...arr];
console.log(newMethodArr);
Output: [1, 2, 7, 8, 9];that's it..💯note: BUT if remove ... spread operator before the array it will add new array inside that array👉const newMethodArr = [1, 2, arr];output: [1,2, Array]

So we can see that it’s very easy and handy way .. and it saves lot of time and mess in code.

Spread Operator is used in many other situations like 👉

When we want to pass multiple arguments or elements in function.

for ex: const numbers = function(...numbers){
     console.log(1, 2, 3)}numbers([1,2,3]);
output: 1 2 3

We can see that it saved lot of headache of typing every argument or parameter individually .

Now you might have noticed that spread operator is similar to destructuring, because it also helps us get elements out of arrays. The big difference is spread… operator takes all elements out of an array and doesn’t assign them to variables.

spread …operator used is to create shallow copy of an array.

const arr = [1, 2 ,3 ];
const newArr = [...arr];// it's similar to Object.assign()

To join two arrays

const numbersArr = [1, 2, 3];
const alphabetsArr = [a, b, c];
const bothArrays = [...numbersArr, ...alphabetsArr]
console.log(bithArrays)
output: [1,2,3,a,b,c]

In strings because strings are also iterables and … works on all iterables.

const str = ‘javascript’;
const letters = [...str];
console.log(letters);
output: ['j', 'a' , 'v', 'a', 's', 'c', 'r', 'i', 'p', 't'];

LAST BUT NOT LEAST spread operator also works on objects, even though objects are not iterables.

const mobileSpec = {
   brand: 'apple',
   model: '12 pro max',
   price: 1099,}
// so if we want to add properties of this object to new object and add some new properties we can use spread operator.const moreSpec = {color: 'graphite', ...mobilespec, ram: '4gb'};console.log(moreSpec);
output: {color: 'graphite', 
         brand: 'apple',
         model: '12 pro max',
         price: 1099,
         ram: '4gb'
         }

To create shallow copy of objects.

const mobileSpec = {
   brand: 'apple',
   model: '12 pro max',
   price: 1099,};
const copyMobileSpec = {...mobileSpec};
console.log(copyMobileSpec);output: {
   brand: 'apple',
   model: '12 pro max',
   price: 1099,};

So as we have seen so far that spread operator makes the work very easy when we want to obtain every elements and write them individually separated by commas. And we have almost covered the situations where we can use it.

Spread … operator in JavaScript and situations where we can use it.

Spread Operator is used in many other situations like 👉

Written by GURVINDER MAAN