
Spread and Rest Operators in JavaScript
The spread and rest operators, both represented by three dots (...), are versatile features in JavaScript introduced in ES6. Although they share the same syntax, they serve distinct purposes: the spread operator is used for expanding elements, while the rest operator is used for collecting elements.
1. Spread Operator
The spread operator is used to expand elements of an array, object, or iterable into individual elements.
A. Spreading in Arrays
The spread operator can be used to copy, concatenate, or pass array elements.
Example: Copying Arrays
1 2 3 | const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2);
|
Copy after login
Copy after login
Example: Concatenating Arrays
1 2 3 4 | const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);
|
Copy after login
Copy after login
Example: Passing Elements to Functions
1 2 | const numbers = [10, 20, 30];
console.log(Math.max(...numbers));
|
Copy after login
Copy after login
B. Spreading in Objects
You can use the spread operator to copy or merge objects.
Example: Copying Objects
1 2 3 | const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2);
|
Copy after login
Example: Merging Objects
1 2 3 4 | const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged);
|
Copy after login
2. Rest Operator
The rest operator collects multiple elements into a single array or object. It is commonly used in function parameters or destructuring assignments.
A. Using Rest in Function Parameters
The rest operator can collect an indefinite number of arguments into an array.
Example: Collecting Arguments
1 2 3 4 | function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4));
|
Copy after login
B. Using Rest in Destructuring Arrays
The rest operator collects remaining elements in an array destructuring operation.
Example: Array Destructuring
1 2 3 4 | const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);
console.log(second);
console.log(rest);
|
Copy after login
C. Using Rest in Destructuring Objects
The rest operator collects remaining properties in an object destructuring operation.
Example: Object Destructuring
1 2 3 | const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2);
|
Copy after login
Copy after login
3. Key Differences Between Spread and Rest Operators
Aspect |
Spread Operator |
Rest Operator |
Purpose |
Expands elements into individual items |
Collects items into a single entity |
Use Cases |
Copying, merging, passing elements |
Collecting function arguments, destructuring |
Data Types |
Arrays, Objects, Iterables |
Arrays, Objects |
Aspect |
Spread Operator
|
Rest Operator |
Purpose
|
Expands elements into individual items |
Collects items into a single entity |
Use Cases |
Copying, merging, passing elements |
Collecting function arguments, destructuring |
Data Types1 2 3 4 | const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);
|
Copy after login Copy after login
|
Arrays, Objects, Iterables |
Arrays, Objects |
4. Practical Examples
1 2 | const numbers = [10, 20, 30];
console.log(Math.max(...numbers));
|
Copy after login
Copy after login
A. Swapping Array Elements
-
B. Combining Rest with Spread
-
5. Summary-
Spread Operator (...): Expands arrays, objects, or iterables into individual elements.
Rest Operator (...)
: Collects multiple elements into an array or object.
Both operators make JavaScript code more concise and flexible, especially when working with arrays, objects, and function parameters.
Hi, I'm Abhay Singh Kathayat!
I am a full-stack developer with expertise in both front-end and back-end technologies. I work with a variety of programming languages and frameworks to build efficient, scalable, and user-friendly applications.
Feel free to reach out to me at my business email: kaashshorts28@gmail.com.
The above is the detailed content of Mastering Spread and Rest Operators in JavaScript. For more information, please follow other related articles on the PHP Chinese website!