JavaScript Spread & Rest Operators

The Spread and Rest operators are powerful tools in JavaScript and React projects. They are represented by a single operator denoted by three dots |…|. The spread operator is used to split array elements or object properties. By using this operator, we can easily spread an array or object.

For instance, if we have an existing array and we want to add all the elements from it to a new array, while also appending one or two additional elements, we can use the spread operator. The syntax for this would be:

The spread operator in JavaScript and React is a powerful tool that allows us to manipulate arrays and objects in various ways. It is denoted by three dots |…| and can be used as a spread or rest operator depending on the context in which it is used.

When used as a spread operator, it can be used to split array elements or object properties. For example, if we have an old array and we want to create a new array that contains all the elements from the old array, along with one or more new elements, we can use the spread operator to do this easily. The syntax for doing so would be:

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5];

In this case, the spread operator in front of the old array simply pulls out all the elements and adds them to the new array, after which we can add any additional elements we want.

The spread operator can also be used with objects. If we want to create a new object that includes all the properties and values of an existing object, along with one or more new properties, we can use the spread operator to achieve this. For example:

const oldObject = { a: 1, b: 2, c: 3 };
const newObject = { ...oldObject, d: 4, e: 5 };

In this case, the spread operator helps us to pull out all the properties of the old object and their values, and add them as key-value pairs to the new object. If the old object and the new object have a property with the same name, the value of the new property would overwrite the value of the old property.

This is how the spread operator works, and it can be a very useful tool for manipulating arrays and objects in JavaScript and React projects.

Rest Operator

Although the Rest operator is the same as the Spread operator, it is used differently. In the following example, it is used to merge a list of function arguments into an array. The Rest operator is used in a function argument list to receive an unlimited number of arguments.
Regardless of the number of arguments passed to the function, we can use a single parameter named “args” with three dots|…|. All the arguments will be merged into an array, and we can apply array methods to our argument list for convenient storage.

Let’s have a deeper look at console!

const numbers =[1,2,3]
const newNumbers =[...numbers, 4];
console.log(newNumbers)

output

Let’s break down the code example:

We first create an array of numbers [1, 2, 3, 4]. Next, we create a new array called newNumbers using the spread operator |…| and including the old array of numbers, as well as a new number 4. If we run the function and log the newNumbers array, we will see that it contains all the numbers from the old array, as well as the new number 4. The output will be [1, 2, 3, 4]. As demonstrated in the example, the spread operator is used to copy properties of arrays or objects and add them to a new object or array with the same key-value pair.

Let’s now take a look at how the spread operator works with objects.

const person = {
name: "Soner"
};
const newPerson = {
...person,
age:20
}
console.log(newPerson)

output

Breaking down the codes

In the following example, we create a person object with a name property. Then, we create a new object called newPerson using the spread operator | … | on the person object. By using the spread operator, we copy all the property value pairs of the old object and add a new property, age: 20 with a new value.

If we console.log(newPerson), we can see that our newPerson object now has a copy of the name property from the original object, as well as the new age property with its key-value pair.

Rest operator in JS

const filter = (...args) => {
return args.filter(el => el === 1);
}
console.log(filter(1,2,3));

Output

Breaking down the codes

In this example, we’ve implemented a filter function using the ES6 arrow function syntax. The function takes in any number of arguments, which we represent with the spread operator |…|. We can also write this using inline syntax to keep it on one line.

We then return the arguments and call the built-in filter method, which is available on arrays. Don’t forget to use the spread operator when passing the arguments, which merge them into an array. We can then use array methods, like filters, on this array.

The filter method executes a function on each element in the array. In this case, we’re using an inline arrow function that returns true or false. The filter method expects this function to return true if the element meets some condition, and false otherwise. Here, we’re checking if the element is equal to the number 1 using the strict equality operator (===). This means that the element must not only have the same value, but also the same data type.

When we call console.log(filter(1, 2, 3)), we should see the number 1, since it’s the only argument that meets the condition in our filter function.

The spread operator is a versatile tool in JavaScript that can be used for a variety of tasks, including:

• Copying an array
• Concatenating or combining arrays
• Using Math functions
• Using an array as arguments
• Adding an item to a list
• Adding to state in React
• Combining objects
• Converting a NodeList to an array

In each case, the spread syntax allows us to expand an iterable object, typically an array, but it can also be used on any iterable, including a string.

Another useful feature in JavaScript is destructuring, which allows us to extract individual items from an object or an array and assign them to variables. For example, we can destructure an array like this:

const address = [141E, 'Lexington', 'NY'];
const [houseNo, , city] = address;
console.log(houseNo, city);
// Output: 141E 'NY'

In the example above, we declare the variables that will hold the extracted values to the left of the = sign, using either const or let. Then, we specify the names of the variables in an array-like syntax, surrounded by [ and ]. We can omit values by using consecutive commas, like , , in the example above, and any values that are not assigned to variables are simply ignored.