All about JavaScript Operators

In the snippet above, we used the spread operator (...) to spread ["Abdul Rehman, "Khams", "Zarsco"]’s content across myBio()’s parameters.

Don’t worry if you don’t understand the rest or spread operators yet. This article has got you covered!

In the following sections, we will discuss how rest and spread work in JavaScript.

So, without wasting any time let’s get started with the rest operator.

Detailed Explanation on Rest Operator

The rest operator is used to put the rest of some specific user-supplied values into a JavaScript array.

So, for instance, here is the rest syntax:

...yourValues

The three dots (...) in the snippet above symbolize the rest operator.

The text after the rest operator references the values you wish to encase inside an array. You can only use it before the last parameter in a function definition.

To understand the syntax better, let’s see how rest works with JavaScript functions.

Working Of Rest Operator

In JavaScript functions, rest gets used as a prefix of the function’s last parameter.

Here’s an example:

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

The rest operator (...) instructs the computer to add whatever otherInfo (arguments) supplied by the user into an array. Then, assign that array to the otherInfo parameter.

As such, we call ...otherInfo a rest parameter.

Note: Arguments are optional values you may pass to a function’s parameter through an invocator. Also you cannot use “use strict” inside a function using Rest Operator.

How Rest Operator works on Destructing Assignments

The rest operator typically gets used as a prefix of the destructuring assignment’s last variable.

Here’s an example:

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

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

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

The rest operator (...) instructs the computer to add the rest of the user-supplied values into an array. Then, it assigns that array to the otherInfo variable.

As such, you may call ...otherInfo a rest variable.

Here’s another example:

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

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

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

In the snippet above, notice that the rest operator assigned a properties object — not an array — to the otherInfo variable.

In other words, whenever you use rest in a destructuring object, the rest operator will produce a properties object.

However, if you use rest in a destructuring array or function, the operator will yield an array literal.

Detailed Explanation on Spread Operator

The spread operator (...) helps you expand iterables into individual elements.

The spread syntax works within array literals, function calls, and initialized property objects to spread the values of iterable objects into separate items. So effectively, it does the opposite thing from the rest operator.

Note: A spread operator is effective only when used within array literals, function calls, or initialized properties objects.

So, what exactly does this mean? Let’s see with some examples.

Example 1 :-  How Spread Works in an Array Literal

const myName = ["Abdul Rehman", "is", "my"];
const aboutMe = ["Khams", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Khams", "Abdul Rehman", "is", "my", "name." ]

The snippet above used spread (...) to copy the myName array into aboutMe.

Example 2 :- How to Use Spread to Convert a String into Individual Array Items

const myName = "Khams Abdul Rehman";

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

// The invocation above will return:
[ "K", "h", "a", "m", "s", "A", "b", "d", "u", "l"," ", "R", "e", "h", "m", "a", "n" ]

In the snippet above, we used the spread syntax (...) within an array literal object ([...]) to expand myName’s string value into individual items.

As such, "Khams Abdul Rehman" got expanded into [ "K", "h", "a", "m", "s", "A", "b", "d", "u", "l"," ", "R", "e", "h", "m", "a", "n" ].

What to know about Spread Operators 

1. Spread operators can’t expand object literal’s values

2. The spread operator does not clone identical properties

3. Beware of how spread works when used on objects containing non-primitives!

Hope this post proved helpful to you , please comment it down if you want more like this.