Spread and Rest Operators in JavaScript

Introduction

ECMAScript 2015 (ES6) has brought many features that have significantly improved the language's expressiveness, readability, and efficiency.
Among these features, are rest and spread operators.
In this blog post you will learn how to use spread and rest operators and how they can simplify your JavaScript code and make it more flexible.

Understanding the Spread Operator

The syntax of spread operator is using three dots (...), and it allows to expand an array or object into its individual elements.

Expanding arrays
Imagine you have two arrays and you want to combine them into a single array. Before ES6, you might use the concat method:

var fruits = ["apple", "orange"];
var moreFruits = ["cherry", "lemon"];
var allFruits = fruits.concat(moreFruits);

With the spread operator, this becomes much more intuitive and concise:

var fruits = ["apple", "orange"];
var moreFruits = ["cherry", "lemon"];
const allFruits = [...fruits, ...moreFruits];

Expanding objects
ES 2018 extended the spread operator to objects, allowing for shallow-cloning and property merging:

const user = { name: 'Anton', age: 30 };
const location = { country: 'Great Britain', city: 'London' };
const userProfile = { ...user, ...location };

Expanding arrays into function arguments
The spread operator can also be used to pass the elements of an array as arguments to a function:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers));
// Output: 6

Understanding the Rest Operator

While the spread operator expands an array or object into its individual elements, the rest operator does the opposite, collecting multiple elements or properties into a single array or object.
It's used in function parameters and destructuring assignments.

The syntax of rest operator is using three dots (...), actually the same as spread operator.

Functions with Variable Arguments
The rest operator can be used to gather any number of arguments into an array:

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3, 4));
// Output: 10

Destructuring Assignments
In destructuring assignments, the rest operator helps in extracting specific elements while assigning the remaining ones to a variable:

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);
// Output: 1

console.log(rest);
// Output: [2, 3, 4, 5]

Summary

The spread and rest operators are powerful tools in JavaScript that offer syntax for array and object manipulation, function argument handling, and more.
By understanding and utilizing these operators, you can write more concise, readable, and expressive code, making your JavaScript applications cleaner and more efficient.

Hope you find this blog post useful. Happy coding!

Originally published at https://antondevtips.com.

After reading the post consider the following:

• Subscribe to receive newsletters with the latest blog posts
• Download the source code for this post from my github (available for my sponsors on BuyMeACoffee and Patreon)

If you like my content —  consider supporting me

Unlock exclusive access to the source code from the blog posts by joining my Patreon and Buy Me A Coffee communities!