Spread and Rest Operators in JavaScript

Snack story:
Let’s say you have a basket of snacks:

const snacks = ['apple', 'banana', 'chocolate'];

Now, you want to share these snacks with your friends. But instead of giving them the whole basket, you take out each snack and give it to them one by one:

console.log(...snacks);  // Output: apple banana chocolate

The ... (spread) operator is like taking the snacks out of the basket and spreading them on the table. Your friends can now pick them up individually!

On the other hand, if your friends bring even more snacks, you can gather them all into one big basket using the ... (rest) operator:

function collectSnacks(...moreSnacks) {
  console.log(moreSnacks);
}

collectSnacks('cookie', 'chips', 'juice');  // Output: ['cookie', 'chips', 'juice']

Here, the ... operator collects all the snacks into a new basket. This is how the rest operator works!

If you're new to JavaScript, you might have come across two special syntax elements: the spread and rest operators. They both look the same—three dots (...)—but they are used in different ways. Let’s break them down with simple examples!

1. What is the Spread Operator?
The spread operator (...) is used to expand an array or an object into individual elements. It’s like unpacking an array or object into its components.

Example: Expanding an Array
Let’s say you have an array of numbers, and you want to pass them individually into a function.

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

You can use the spread operator to spread the array elements out!

Example: Combining Arrays
If you have two arrays and want to merge them, the spread operator makes it easy:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];
console.log(mergedArray);  // Output: [1, 2, 3, 4, 5, 6]

It’s like laying out all the elements from array1 and array2 into one new array.

Example: Copying an Object
You can also use the spread operator with objects:

const user = { name: "Ahmed", age: 25 };
const updatedUser = { ...user, location: "Bengaluru" };

console.log(updatedUser);
// Output: { name: "Ahmed", age: 25, location: "Bengaluru" }

Here, we copied the properties from the user object and added a new property location.

1. What is the Rest Operator? The rest operator is the opposite of the spread operator. Instead of expanding an array or object, it collects multiple elements into an array or object.

Example: Function with Rest Parameters
Imagine you’re writing a function that takes any number of arguments:

function addNumbers(...nums) {
  return nums.reduce((sum, current) => sum + current, 0);
}

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

In this case, the rest operator ...nums collects all the arguments into an array, making it easier to work with multiple values.

Example: Destructuring with Rest
You can also use the rest operator when destructuring arrays:

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

Here, first gets the first element of the array, and rest collects the remaining elements into a new array.

Conclusion
The spread and rest operators are powerful and versatile tools in JavaScript. To recap:

• Spread (...) expands an array or object into individual elements.
• Rest (...) collects multiple elements into an array or object.

Hope you understood these 2 concepts spread and rest, it will make your JavaScript code more concise and easier to read!

Happy coding :)

The above is the detailed content of Spread and Rest Operators in JavaScript. For more information, please follow other related articles on the PHP Chinese website!