JavaScript ES6 (ECMAScript 2015) introduced many powerful features, and one of the most useful is the spread operator. The spread operator makes it easier to work with arrays, objects, and function arguments by allowing you to “spread out” elements in a clean and readable way.
Syntax
The spread operator is written using three dots (...).
const arr = [1, 2, 3];
const newArr = [...arr]; // Spread operator used here
1. Spreading Arrays
The most common use of the spread operator is with arrays. It helps in copying, merging, and passing elements.
Copying an Array
const original = [10, 20, 30];
const copy = [...original];
console.log(copy); // [10, 20, 30]
Here, we create a shallow copy of the array without affecting the original.
Merging Arrays
const fruits = ['apple', 'banana'];
const veggies = ['carrot', 'spinach'];
const food = [...fruits, ...veggies];
console.log(food); // ['apple', 'banana', 'carrot', 'spinach']
Instead of using .concat(), the spread operator merges arrays in a cleaner way.
Inserting Elements
const numbers = [1, 2, 5];
const updated = [0, ...numbers, 6];
console.log(updated); // [0, 1, 2, 5, 6]
2. Using Spread with Objects
ES2018 extended the spread operator to work with objects, too.
Cloning an Object
const user = { name: 'Kirti', age: 22 };
const userClone = { ...user };
console.log(userClone); // { name: 'Kirti', age: 22 }
This is useful when you want to copy an object without affecting the original.
Merging Objects
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }
Note: If keys are the same, the later one (obj2) will overwrite the earlier (obj1) value.
3. Spread in Function Arguments
The spread operator is also helpful when passing array elements as arguments to a function.
Example:
function sum(a, b, c) {
return a + b + c;
}
const nums = [10, 20, 30];
console.log(sum(...nums)); // 60
Instead of writing sum(nums[0], nums[1], nums[2]), we simply spread the array.
4. Difference Between Spread and Rest
The spread operator (...) expands elements, while the rest parameter (...) collects them.
Spread:
const arr = [1, 2, 3];
const copy = [...arr]; // Expands elements
Rest:
function show(...args) {
console.log(args); // Collects multiple arguments into an array
}
show(1, 2, 3); // [1, 2, 3]
They look the same but behave differently based on where they are used:
- Spread: right side of
=, inside function call - Rest: function parameters
5. Real-World Uses of Spread Operator
React State Updates
setState(prev => ({
...prev,
newKey: 'newValue'
}));
Avoiding Mutation
const todos = ['task1', 'task2'];
const newTodos = [...todos, 'task3'];
Conclusion
The spread operator (...) is a simple yet powerful feature in ES6 that makes your code cleaner and more efficient. Whether you are dealing with arrays, objects, or function arguments, the spread operator helps you write less code with more clarity.
Use it to:
- Copy arrays or objects
- Merge them
- Pass values easily to functions
Start using it in your JavaScript projects, and you’ll notice how much smoother your code becomes!