How to use Spread operator and Rest parameter in JavaScript? Example Tutorial

Hello guys, if you are wondering what is Spread and Rest operator is in JavaScript are and how to use them in code then you have come to the right place. Earlier, I have shared some fundamental JavaScript concept tutorials like == vs === operator, hoisting, and destructuring, and in this JavaScirpt article, I am going to talk about Spread and Rest operators. JavaScript came out twenty-five years ago. Since then, it has changed a lot. First, it became the top programming language for client-side web development, and then with the emergence of Node.js, it also became the top player in server-side development. 

With every version of ECMAScript, you will find new and updated features in JavaScript.  ES6 in 2015 added many powerful features to this programming language. Two of these became tremendously popular. They are the Spread operator and Rest parameter.

The concept of spread operator and rest parameter is simple but they are very useful. The spread operator is used with arrays and objects. It's denoted with three dots followed by an array or object. You can merge arrays and objects by using the Spread operator in JavaScript.

Similarly, Rest parameters are also denoted with three dots (...) and used in a function to accept a variable number of arguments. It captures arguments inside the array and it's very similar to the varargs feature of Java. 

This was the basic introduction, we will look into a little bit more details. In this article, we will discuss the spread operator and rest parameter and how to use them in JavaScript with examples. 

By the way, if you are new to Javascript development you can also start your journey with these free JavaScript courses and books, they are great resources to learn JavaScript fundamentals for free of cost. If you are a self-learner, I highly recommend you to join an online course or read a book for more structured learning. you will not only learn better but also quicker. 

Spread Operator in JavaScript - Example

As the name suggests, the spread operator “spreads”. The spread operator is used on iterables such as arrays and objects. It's denoted by three dots "..." as shown below:

Observe the following code.

let arr1 = [10, 20, 30, 40, 50];

let arr2 = [60, 70, 80, 90, 100];

let arr3 = arr1.concat(arr2);

console.log(arr3);

Output: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

In the above code, “arr1” is concat with “arr2” using the inbuilt concat method to create a new array. This works fine. But why use an in-built method while we have a simpler way to create a new array out of the multiple arrays? Observe the following code. 

let arr1 = [10, 20, 30, 40, 50];

let arr2 = [60, 70, 80, 90, 100];

let arr3 = [ ...arr1, ...arr2 ];

console.log(arr3);

Output: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

In the above code, the spread operator is used. It is denoted by three dots followed by the name of the iterable. Isn’t this a simpler way? 

Similarly, we can use the spread operator with objects. Observe the following code. 

let obj1 = { name: “John”, age: 27, city: “New York” };

let obj2 = { ...obj1 };

console.log(obj2); 

Output: { name: "John", age: 27, city: "New York" }

In the above code, we used the spread operator to clone “obj1” into “obj2”. We can also merge objects using the spread operator. 

let obj1 = { name: "John" }

let obj2 = { age: 27 }

let obj3 = { city: "New York" }

let obj4 = { ...obj1, ...obj2, ...obj3 }

console.log(obj4)

In the above code, “obj1”, “obj2”, and “obj3” are merged to create “obj4”.

Rest parameter in JavaScript - Example

The spread operator can be used in another way that is known as the Rest parameter. The rest parameter is used with functions.

Observe the following code.

function add(a, b) {

    console.log(a + b);

}

add(10, 20, 30, 40, 50);

Output: 30;

In the above code, function “add” is expecting two arguments but during the function call, five arguments are provided. Though it will not result in an error, the function will consider only the first two arguments. 

This can cause trouble. 

Suppose, we have to find the sum of two numbers in the first function call, the sum of three numbers in the second function call, and the sum of five numbers in the third function call. 

We will not get the result we want because the above function will only add the first two numbers. So, to counter such situations, we have the rest operator. 

Observe the following code.

function add(...args) {

	console.log(args);

}

add(10, 20, 30, 40, 50);

Output: [10, 20, 30, 40, 50]

In the above code, the rest syntax is used to “gather” the parameters of the “add” function into an array. “args” is the array holding all the arguments passed during the function call. Now we can use this array to add the values.

function add(...args) {

 let sum = 0;

  for(let i = 0; i < args.length; i++){

    sum = sum + args[i];

  }

  console.log(sum);

Output: 150

So this is how the rest parameter is used to counter the situation where the number of arguments is not defined. 

That's all about the Spread and Rest operator in JavaScript. The spread operator and rest parameter are very useful concepts. These two are used with iterables such as arrays and objects. The spread operator “spreads” an array or object. It can be used to clone an array or object or to merge them. It is also used as a rest parameter with the function where the number of arguments coming from a function call is not defined.

Other JavaScript Articles and TutorialsYou May like to explore

• Top 5 Modern JavasCript features for Beginners
• What is Destructuring in JavaScript? Example
• Difference between let, var, and const in JavaScript
• 10 Books and Courses to learn Angular
• What are Variable and Function hoisting in JavaScript
• Top 5 Websites to learn React.js for Beginners
• How to use state in React.js? Example
• 5 Online training courses to learn Angular for Free
• 3 Best and Free Svelete.js courses for beginners
• The React Developer RoadMap
• 5 Best courses to learn React Native for Beginners
• My favorite books to learn React.js
• How to use lifecycle methods in React?
• My favorite free Courses to learn Angular and React
• 5 Courses to Learn Ruby and Rails for Free

Thanks for reading this article so far.  If you like this JavaScript Spread Operator and Rest operator tutorial and example then please share it with your friends and colleagues. If you have any questions or feedback, then, please drop a comment.

P. S. - If you are a beginner and want to self-learn JavaScript in-depths then I also suggest you go through the best JavaScript courses. It has many hands-on courses to learn modern JavaScript in depth. It contains the best Javascript courses from Udemy, Coursera, and Pluralsight.