Spread syntax

Spread syntax is another form of destructuring for iterable elements such as strings and arrays. The spread syntax can be used in many situations involving arrays and objects. In this section, we'll quickly look at some of the use cases of spread syntax.

Spreading or unpacking an iterable into an array

An iterable can be expanded/unpacked into an array. In the following example, we will show how to use the spread operator to unpack a string variable:

let name = "stephen"
let name_array = [...name];

The code expands the name string into name_array, hence, name_array will have the following values: ['s', 't', 'e','p', 'h', 'e','n'].

While expanding the string element into the array, we can add other values alongside, as shown in the following code:

let name = "stephen"
let name_array = [...name, 1,2,3]
console.log(name_array)
// output ['s', 't', 'e','p', 'h', 'e','n',1,2,3]

Remember that any iterable can be spread into an array. This shows that we can also spread one array into another, as demonstrated in the following code:

let series = [1,2,3,4,5,6,7,8]
let new_array = [...series, 100, 200]
console.log(new_array)
// output [1, 2, 3, 4, 5,6, 7, 8, 100, 200]

Next, we'll apply the spread operator to objects.

Creating new objects from existing ones

Creating new objects from existing ones follows the same pattern as the Spread operator:

Let data = {
  age: 20,
  firstName: "john",
  lastName: "Doe",
  year:  2019
}
let  new_data = {...data}

This creates a new object having the same property as the former object. While expanding the former object into the new one, new properties can be added alongside:

let data = {
    age: 20,
    firstName: "john",
    lastName: "Doe",
    year: 2019
}
 
let new_data = { ...data, degree: "Bsc", level: "expert" }
console.log(new_data)
//output 
// {
//     age: 20,
//     Degree: "Bsc",
//     FirstName: "John",
//     lastName: "Doe",
//     Level: "expert",
//     Year: 2019
// }

Function arguments

For functions requiring a lot of arguments, the spread syntax can help pass in a lot of arguments at once into the function, thereby reducing the stress of filling in the function's arguments one after the other.

In the following code, we will see how an array of arguments can be passed into a function:

function data_func(age, firstName, lastName, year) {
    console.log(`Age: ${age}, FirstName: ${firstName}, LastName: ${lastName}, Year: ${year}`);
}
let data = [30, "John", "Neumann", '1948']
data_func(...data)
//output Age: 30, FirstName: John, LastName: Neumann, Year: 1984
Age: 30, FirstName: John, LastName: Neumann, Year: 1984

In the preceding code, first, we created a function called data_func and defined a set of arguments to be passed in. We then created an array containing a list of parameters to pass to data_func.

By using spread syntax, we were able to pass the data array and assign each of the values in the array as an argument value – data_func(...data). This becomes handy whenever a function takes many arguments.

In the next section, we will look at scope and closures, and how to use them to understand your JavaScript code better.