DEV Community

Rajat Gupta
Rajat Gupta

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Example 1: spread out "BANANA" using spread.

console.log(..."BANANA");
Result: B A N A N A
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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'}
Enter fullscreen mode Exit fullscreen mode

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 ๐Ÿ˜€!

Top comments (0)