Spread syntax in JavaScript

Let's see what MDN has to say:

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Didn't understand this ☝️

Don't worry!

So, spread syntax is used to spread out the elements of an array (or object) and its syntax is 3 dots followed by array (or object) name. That's all you need to know. Now, let's understand more via below examples:

console.log(...[1, 2, 5, 7, 9]);
//Result: 1, 2, 5, 7, 9

//Hence,    ...[1, 2, 5, 7, 9] = 1, 2, 5, 7, 9

Example 1: spread out "BANANA" using spread.

console.log(..."BANANA");
Result: B A N A N A

Example 2: Make a new array combining the below arrays using spread.

const parentsArray = ['Tom', 'Jenny'];
const childrenArray = ['Nathan', 'Naveen', "Jerry"];

let familyArray = [...parentsArray, ...childrenArray];

console.log(familyArray)

Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry']

Example 3: Add 2 newborns in the above familyArray.

familyArray = [...parentsArray, 'Elon', ...childrenArray, 'Gary'];
console.log(familyArray)

Result: ['Tom', 'Jenny', 'Elon', 'Nathan', 'Naveen', 'Jerry', 'Gary']

Imp: In javascript, arrays and objects are reference data types. It means that whenever we assign an original array to a new variable, actually the address of the original array is assigned and if we make changes in the new array, the original array also gets changed. Let's understand what I mean by the below code:

let originalArray = ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry'];
let newArray = originalArray;

newArray.push("newBaby");

console.log(newArray);
//Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry', 'newBaby']

console.log(originalArray);
//Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry', 'newBaby']

You can see in the example above that our original array also gets changed. We can use spread syntax in order to avoid this from happening. See below 👇

let originalArray = ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry'];

let newArray = [...originalArray, 'newBaby'];

console.log(newArray)
//Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry', 'newBaby']

console.log(originalArray);
//Result: ['Tom', 'Jenny', 'Nathan', 'Naveen', 'Jerry']

The spread syntax can also be used to pass an array (or object) to functions that normally require a list of many arguments. See the below code:

Example 4: Write a function to perform addition.

function sum(a, b, c, d){
      return a+b+c+d;
}

const numbersArray = [2, 5, 9, 6]

We wrote the function to add numbers. Now, there are 2 ways by which we can add all elements of the given array.

sum(numbersArray[0], numbersArray[1], numbersArray[2], numbersArray[3]);

// Alternatively, we can use spread 

sum(...numbersArray);

Whatever operations we performed on array using spread, can also be performed on an object. See the below examples (spread with objects):

Example 5: Merging 2 or more objects:

const personName = {'firstName': 'Elon', 'lastName': 'Musk'};
const personHobbies = {'company': 'spaceX', 'hobby': 'flyingRockets'};

const personsMerged = {...personName, ...personHobbies}
console.log(personsMerged);

//Result: {firstName: 'Elon', lastName: 'Musk', company: 'spaceX', hobby: 'flyingRockets'}

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web-development (yes, every single f*cking day). Follow me here if you are learning the same..

If you love the article follow me on twitter: @therajatg

If you are the linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!