What is spread syntax? Explain with example

What is spread syntax?

The spread syntax allows an iterable (array, string) to be expanded in places.

• If it is used on a function call then zero or more arguments are expected.
• If it is used on an array literals then zero or more elements are expected
• If it is used on an object expression then zero or more key-value pairs are expected.

Spread for array merge:

Let say we have multiple arrays and we want to merge that to one array. We can use powerful spread syntax to merge them into one.

This spread syntax can be good a replacement of concat, splice, push methods. Consider the following example:

Before ES6:

let scriptingLanguages = ['JavaScript', 'PHP', 'Ruby']
let languages = ['Java', 'C#', 'Kotlin', 'Scala'];
let lang = languages.concat(scriptingLanguages);
console.log(lang);
// Output: ["Java", "C#", "Kotlin", "Scala", "JavaScript", "PHP", "Ruby"]

With ES6:

let scriptingLanguages = ['JavaScript', 'PHP', 'Ruby']
let languages = ['Java', 'C#', 'Kotlin', 'Scala', ...scriptingLanguages];
console.log(languages);
// Output: ["Java", "C#", "Kotlin", "Scala", "JavaScript", "PHP", "Ruby"]

Spread for copying array:

We can use spread syntax for copying arrays. Previously we used to use slice method on arrays to copy array in JavaScript.

But now in ES6 we can use spread syntax to copy array without affecting base array. See the example below:

Before ES6:

var languages = ['Java', 'C#', 'Kotlin', 'Scala'];
var lang = languages.slice();
console.log(lang);
// Output: ["Java", "C#", "Kotlin", "Scala"]

With ES6:

let languages = ['Java', 'C#', 'Kotlin', 'Scala'];
let lang = [...languages];
console.log(lang);
// Output: ["Java", "C#", "Kotlin", "Scala"]

Spread to replace unshift:

unshift is used to insert one or more elements at the beginning of the array. Spread syntax can be used to insert element at any position of the array.

If we use the spread syntax then it will insert the array elements at the beginning of the array.

Let see code the code below of inserting elements at the beginning of the array before ES6 and with ES6:

Before ES6:

let scriptingLanguages = ['JavaScript', 'PHP', 'Ruby']
let languages = ['Java', 'C#', 'Kotlin', 'Scala'];
Array.prototype.unshift.apply(languages, scriptingLanguages)
console.log(languages);
// Output: ["JavaScript", "PHP", "Ruby", "Java", "C#", "Kotlin", "Scala"]

With ES6:

let scriptingLanguages = ['JavaScript', 'PHP', 'Ruby']
let languages = [...scriptingLanguages, 'Java', 'C#', 'Kotlin', 'Scala'];
console.log(languages);
// Output: ["JavaScript", "PHP", "Ruby", "Java", "C#", "Kotlin", "Scala"]

Spread to object literals:

Spread syntax can be used to object literals in ES6. We can use it to do a shallow copy of one object to another object. See the following code:

let obj = { name: 'Joe Smith', age: 26 };
let newObj = {...obj};
console.log(newObj);
// Output: {name: "Joe Smith", age: 26}

The spread syntax can be used to merge objects. See the following code segment:

let obj1 = { name: 'Joe Smith', age: 26 };
let obj2 = { name: 'Joe Smith', gender: 'Male' };
let newObj = {...obj1, ...obj2};
console.log(newObj);
// Output: {name: "Joe Smith", age: 26, gender: "Male"}

In the above code segment the obj1 and obj2 are merged to newObj. As we can see the common properties are merged into one.