Detailed explanation of the difference between JavaScript spread operator and rest operator

JavaScript uses the symbol three dots (...) as the rest operator and the spread operator, but there is a difference between these two operators.

The main difference is that the rest operator puts the rest of some specific value provided by the user into a JavaScript array, while the spread operator expands the iterable object into a single element.

For example, the following code uses the rest operator to store partial values ​​in an array:

// Use rest to enclose the rest of specific user-supplied values ​​into an array:
function myBio(firstName, lastName, ...otherInfo) { 
 return otherInfo;
}

// Invoke myBio function while passing five arguments to its parameters:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

// The invocation above will return:
["CodeSweetly", "Web Developer", "Male"]

View the running results

In the code above, we use ...otherInfo to store the remaining parts of the parameters passed into the myBio() function, "CodeSweetly", "We Developer" and "Male" into an array.

Then let's look at the following example, which uses the spread operator:

 // Define a function with three parameters:
function myBio(firstName, lastName, company) { 
 return `${firstName} ${lastName} runs ${company}`;
}

// Use spread to expand an array's items into individual arguments:
myBio(...["Oluwatobi", "Sofela", "CodeSweetly"]);

// The invocation above will return:
“Oluwatobi Sofela runs CodeSweetly”

View the running results

In the code above, we use the spread operator (...) to expand the contents of the array ["Oluwatobi", "Sofela", "CodeSweetly"] one by one and pass them to the parameters of the function myBio().

If you are not familiar with the rest operator and the spread operator, don’t worry, we will introduce them later in this article.

In the following chapters, we will discuss in detail how the rest operator and spread operator work in JavaScript.

What is the rest operator?

As mentioned above, the rest operator puts the rest of some specific value provided by the user into a JavaScript array. The syntax is as follows:

 ...yourValues

The three dots (...) in the code above are used to represent the rest operator.

The rest operator is used to represent the value you want to fill in the array. Note that you can use the rest operator only in the last argument of a function definition.

How does the rest operator work in JavaScript functions?

In a JavaScript function, the rest operator is used before the last parameter of the function. As shown in the following code:

 // Define a function with two regular parameters and one rest parameter:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

Here, the rest operator tells the JavaScript program to add whatever value the user provides to the otherInfo parameter to an array. Then, assign the array to the otherInfo parameter.

Therefore, we call ...otherInfo the remaining parameters.

It is important to note that the remaining parameters in the actual parameters passed to the function when calling are optional.

Another example:

 // Define a function with two regular parameters and one rest parameter:
function myBio(firstName, lastName, ...otherInfo) { 
 return otherInfo;
}

// Invoke myBio function while passing five arguments to its parameters:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

// The invocation above will return:
["CodeSweetly", "Web Developer", "Male"]

View the running results

In the above code, 5 parameters are passed in when calling the myBio() function, but the actual parameters of the myBio() function are only 3. That is, the parameters "Oluwatobi" and "Sofela" are passed to firstName and lastName respectively, and the other parameters ("CodeSweetly", "Web Developer" and "Male") are passed to the remaining parameter otherInfo. So, the result returned by the function myBio() is ["CodeSweetly", "Web Developer", "Male"], which are the contents of the remaining parameter otherInfo.

Notice! You cannot use "use strict" in a function body that contains rest parameters

Remember, you cannot use the "use strict" directive inside any function body that contains rest parameters, default parameters, or parameter destructuring. Otherwise, JavaScript will report a syntax error.

Consider the following code:

 // Define a function with one rest parameter:
function printMyName(...value) {
 "use strict";
 return value;
}

// The definition above will return:
"Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list"

Note: "use strict" can be placed outside a function body only when the entire script or enclosing scope is in strict mode.

Now that we know how the rest operator works in functions, let’s look at how it works in parameter destructuring.

How does the rest operator work in argument destructuring?

The rest operator is usually used before the last variable in parameter destructuring assignment. Here is an example:

 // Define a destructuring array with two regular variables and one rest variable:
const [firstName, lastName, ...otherInfo] = [
 "Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male"
];

// Invoke the otherInfo variable:
console.log(otherInfo); 

// The invocation above will return:
["CodeSweetly", "Web Developer", "Male"]

View the running results

The rest operator (...) here tells the JavaScript program to add the remaining values ​​provided by the user to an array. Then, assign the array to the otherInfo variable.

Therefore, we call ...otherInfo here the remaining variable.

Another example:

 // Define a destructuring object with two regular variables and one rest variable:
const { firstName, lastName, ...otherInfo } = {
 firstName: "Oluwatobi",
 lastName: "Sofela", 
 companyName: "CodeSweetly",
 profession: "Web Developer",
 gender: "Male"
}

// Invoke the otherInfo variable:
console.log(otherInfo);

// The invocation above will return:
{companyName: "CodeSweetly", profession: "Web Developer", gender: "Male"}

View the running results

Note that in the code above, the rest operator assigns a properties object (not an array) to the otherInfo variable. That is, when you use the rest operator when destructuring an object, it generates a properties object instead of an array.

However, if you use the rest operator while destructuring an array or a function, it will generate an array literal.

You may have noticed that there are some differences between JavaScript arguments and rest parameters. Let’s take a look at what those differences are.

What are the differences between JavaScript arguments and rest parameters?

Below I list some of the differences between JavaScript arguments and rest parameters:

Difference 1: The arguments object is an array-like object, but it is not a real array!
Keep in mind this, the JavaScript arguments object is not a true array. It is an array-like object without any of the properties that an array has.

The rest parameter is a real array, and you can use any methods you have for arrays on it. For example, you can use the sort(), map(), forEach(), or pop() methods on a rest argument. You cannot use these methods on arguments objects.

Difference 2: The arguments object cannot be used in arrow functions. The arguments object is not available in arrow functions, while the rest parameters are available in all functions, including arrow functions.

Difference 3: Prefer rest parameters Prefer rest parameters over the arguments object, especially when writing ES6-compatible code.

Now that we have seen how the rest operator works, let’s discuss the spread operator and see how it differs from the rest operator.

What is the spread operator and how does it work in JavaScript?

The spread operator (...) expands an iterable object into individual elements.

The spread operator can be applied to array literals, function calls, and initialized property objects. It expands the values ​​of an iterable object into individual elements one by one. In fact, it is the opposite of the rest operator.

Note that the spread operator only works when used within an array literal, a function call, or an initialized property object.

Let's look at some practical examples.

Example 1: How the spread operator works in array literals

 const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Oluwatobi", "Sofela", "is", "my", "name." ]

View the running results

In the code above, the spread operator (...) copies the myName array into aboutMe.

Notice:

• Any changes to myName will not be reflected in aboutMe. Because all the values ​​in the myName array are primitives. The spread operator simply copies and pastes the contents of the myName array into aboutMe without creating any references to the original array elements.
• The spread operator only does a shallow copy. So, when the myName array contains any non-primitive value, JavaScript will create a reference between myName and aboutMe. For more information on how the spread operator handles primitive and non-primitive values, you can look here.
• Suppose we had not used the spread operator to copy the contents of the myName array, for example, we wrote this line of code const aboutMe = [ "Oluwatobi", myName, "name." ] In this case JavaScript would assign a reference to myName, so that all changes made to the myName array would be reflected in the aboutMe array.

Example 2: How to convert a string into an array using the spread operator

 const myName = "Oluwatobi Sofela";

console.log([...myName]);

// The invocation above will return:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]

View the running results

In the code above, we use the spread operator ( [...]) in an array literal to expand the value of the myName string into an array. Thus, the contents of the string "Oluwatobi Sofela" are expanded into the array [ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ].

Example 3: How the spread operator works in a function call

 const numbers = [1, 3, 5, 7];

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

console.log(addNumbers(...numbers));

// The invocation above will return:
16

View the running results

In the above code, we use the spread operator to expand the contents of the numbers array and pass it to the parameter of the addNumbers() function. If the numbers array has more than 4 elements, JavaScript will only pass the first 4 elements as parameters to the addNumbers() function and ignore the rest.

Here are some other examples:

 const numbers = [1, 3, 5, 7, 10, 200, 90, 59];

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

console.log(addNumbers(...numbers));

// The invocation above will return:
16

View the running results

 const myName = "Oluwatobi Sofela";

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

console.log(spellName(...myName)); // returns: "Olu"

console.log(spellName(...myName[3])); // returns: "wundefinedundefined"

console.log(spellName([...myName])); // returns: "O,l,u,w,a,t,o,b,i, ,S,o,f,e,l,aundefinedundefined"

console.log(spellName({...myName})); // returns: "[object Object]undefinedundefined"

View the running results

Example 4: How the spread operator works in object literals

 const myNames = ["Oluwatobi", "Sofela"];
const bio = { ...myNames, runs: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ 0: "Oluwatobi", 1: "Sofela", runs: "codesweetly.com" }

View the running results

In the code above, we use the spread operator inside the bio object to expand the values ​​of the array myNames into individual attributes.

What we need to know about the spread operator

Here are three basic pieces of information to keep in mind when using the spread operator.

1. The spread operator cannot expand the value of an object literal

Since attribute objects are non-iterable objects, the spread operator cannot be used to expand their values. However, you can use the spread operator to clone the properties of one object into another object.

Consider the following example:

 const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName, website: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };

View the running results

In the code above, we use the spread operator to clone the contents of the myName object into the bio object.

Notice:

• The spread operator can only spread the values ​​of iterable objects.
• An object is an iterable only if it contains a property with an @@iterator key.
• Array, TypedArray, String, Map, and Set are all built-in iterable types because they all have the @@iterator attribute by default.
• The properties object is a non-iterable array type because it has no @@iterator attribute by default.
• You can add @@iterator to a property object to make it an iterable object.

2. Spread operator does not clone the same properties

Suppose we use the spread operator to clone the properties of object A into object B. If object B contains the same properties as those in object A, then the properties of object B will overwrite the properties of object A. In other words, in this process, those properties in object A that are the same as those in object B will not be cloned.

Consider the following example:

 const myName = { firstName: "Tobi", lastName: "Sofela" };
const bio = { ...myName, firstName: "Oluwatobi", website: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };

View the running results

Note that the spread operator does not copy the value of the firstName property of the myName object to the bio object because the bio object already contains a firstName property.

3. Note how the spread operator works with objects containing non-primitives

If you use the spread operator on an object (or array) containing only primitive values, JavaScript does not create any references between the original and the copied object.

Consider the following code:

 const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
["Oluwatobi", "Sofela", "is", "my", "name."]

View the running results

Note that each element in myName is a primitive value, so when we use the spread operator to clone myName into aboutMe, JavaScript does not create any references between the two arrays. So, any changes made to the myName array will not be reflected in the aboutMe array, and vice versa.

Let's add an element to the myName array:

 myName.push("real");

Now let's check the values ​​of myName and aboutMe:

console.log(myName); // ["Sofela", "is", "my", "real"]

console.log(aboutMe); // ["Oluwatobi", "Sofela", "is", "my", "name."]

Note that our modifications to the myName array are not reflected in the aboutMe array because the spread operator does not create any references between the original and copied arrays.

What if the myName array contains non-primitive items?

Suppose myName contains non-primitive items. In this case, the spread operator will create a reference between the non-primitive items in the original array and the cloned items.

Take a look at the following example:

 const myName = [["Sofela", "is", "my"]];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Oluwatobi", ["Sofela", "is", "my"], "name." ]

View the running results

Note that the myName array here contains a non-primitive item.

So when the spread operator is used to clone the contents of myName into aboutMe, JavaScript will create a reference between the two arrays. This way, any changes made to the myName array will be reflected in the aboutMe array, and vice versa.

As an example, let's also add an element to the myName array:

 myName[0].push("real");

Now let's check the values ​​of myName and aboutMe:

 console.log(myName); // [["Sofela", "is", "my", "real"]]

console.log(aboutMe); // ["Oluwatobi", ["Sofela", "is", "my", "real"], "name."]

View the running results

Notice that changes to the myName array are reflected in the aboutMe array because the spread operator creates a reference between the original array and the copied array.

Another example:

 const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName };

myName.firstName = "Tobi";

console.log(myName); // { firstName: "Tobi", lastName: "Sofela" }

console.log(bio); // { firstName: "Oluwatobi", lastName: "Sofela" }

View the running results

In the code above, the updated content of myName is not reflected in the bio object because we use the spread operator on an object that only contains primitive values.

Note that developers often refer to myName here as a shallow object because it contains only primitive items.

Another example:

 const myName = { 
 fullName: { firstName: "Oluwatobi", lastName: "Sofela" }
};

const bio = { ...myName };

myName.fullName.firstName = "Tobi";

console.log(myName); // { fullName: { firstName: "Tobi", lastName: "Sofela" } }

console.log(bio); // { fullName: { firstName: "Tobi", lastName: "Sofela" } }

View the running results

In the above code, the updated content of myName is reflected in the bio object because we use the spread operator on an object containing non-primitive values.

Notice:

• We call myName here a deep object because it contains non-primitive items.
• When cloning one object to another, if a reference is created, a shallow copy is performed. For example, ...myName produces a shallow copy of the myName object because any changes you make to one object are reflected in the other.
• When cloning an object into another object, a deep copy is performed if no reference is created. For example, I can deep copy the myName object into the bio object by using const bio = JSON.parse(JSON.stringify(myName)). This way, JavaScript will clone myName into bio without creating any references.
• We can sever the reference between myName and bio by replacing the fullName subobject in either myName or bio with a new object. For example, use myName.fullName = { firstName: "Tobi", lastName: "Sofela" } to break the pointer between myName and bio.

Conclusion

This article discusses the difference between rest operator and spread operator and explains how they work in JavaScript with examples.

This concludes this article on the differences between the JavaScript spread operator and the rest operator. For more information about the JavaScript spread operator and the rest operator, please search for previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!