In JavaScript, the three dots (…) serve as two distinct operators depending on their context.
- The Spread operator allows for elements of iterable objects, like arrays, or properties of objects to be expanded or distributed.
- The Rest operator collects a list of arguments into an array when working with function parameters, or collects remaining object properties when destructuring.
These operators add to the flexibility and expressiveness of JavaScript, making the manipulation of arrays, objects, and function arguments more succinct and intuitive, they both utilize the same ellipsis syntax, but their functions are quite different.
Read What Does ‘$’ Mean in JavaScript?
First: The Spread Operator
The Spread Operator can be used in many cases, such as combining arrays, merging, copying, and more.
1. Array and Iterable Expansion:
One of the primary uses of the Spread operator is to expand elements of an array or other iterable objects into individual elements:
const greeting = 'Hello';
const chars = [...greeting];
console.log(chars); // Outputs: ['H', 'e', 'l', 'l', 'o']
2. Function Arguments from Array:
When applied in function calls, it can pass the elements of an array as individual arguments to a function.
- Example 1:
const numbers = [1, 2, 3];
const maxNumber = Math.max(...numbers); // Same as Math.max(1, 2, 3)
Example 2:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Outputs: 6
3. Object Cloning:
The Spread operator can be used to copy properties from one object to another, creating a new object.
Example 1:
const obj = { a: 1, b: 2 };
const copy = { ...obj }; // { a: 1, b: 2 }
Example 2:
const user = { name: 'John', age: 30 };
const userWithId = { ...user, id: '123' };
console.log(userWithId); // Outputs: { name: 'John', age: 30, id: '123' }
4. Merging Arrays:
Merges properties from multiple objects into a new object.
Example 1:
const defaults = { a: 1, b: 2 };
const options = { b: 3, c: 4 };
const settings = { ...defaults, ...options }; // { a: 1, b: 3, c: 4 }
Example 2:
const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits); // Outputs: ['apple', 'banana', 'orange', 'grape']
5. Array Concatenation:
Combines two or more arrays:
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
Second: The Rest Operator
While it looks identical to the Spread operator, the Rest operator is used to condense multiple elements into an array.
1. Function Parameters into an Array:
When defining function parameters, the Rest operator allows us to gather any number of arguments into an array.
Example 1:
function logArguments(...args) {
console.log(args);
}
logArguments(1, 2, 3); // [1, 2, 3]
Example 2:
function multiply(multiplier, ...theArgs) {
return theArgs.map(element => multiplier * element);
}
const result = multiply(2, 1, 2, 3);
console.log(result); // Outputs: [2, 4, 6]
2. Destructuring Arrays Elements:
The Rest operator is handy at capturing all remaining elements in an array during destructuring.
Example 1:
const [first, ...rest] = [1, 2, 3, 4]; // first = 1, rest = [2, 3, 4]
Example 2:
const [first, ...restOfItems] = [10, 20, 30, 40];
console.log(first); // Outputs: 10
console.log(restOfItems); // Outputs: [20, 30, 40]
3. Destructuring Object Properties:
It can also be used in collecting all remaining own enumerable property keys that are not already picked off by the destructuring pattern.
Example 1:
const { a, ...rest } = { a: 1, b: 2, c: 3 }; // rest = { b: 2, c: 3 }
Example 2:
const { firstItem, ...restOfItems } = { firstItem: 'apple', secondItem: 'banana', thirdItem: 'cherry' };
console.log(firstItem); // Outputs: 'apple'
console.log(restOfItems); // Outputs: { secondItem: 'banana', thirdItem: 'cherry' }
