In this article, we cover JavaScript Spread operator examples and detailed explanations. Learn everything about Javascript ES6 Spread Operator in detail. ES6 operator with code examples and ES6 spread operator use cases in detail
ES6 introduced a powerful operator called the “spread operator”, denoted by three consecutive dots (...).
This operator allows us to expand iterable objects into multiple elements.
In this article, we will explore the syntax of the spread operator and some code examples to help you understand its usage.
Syntax of the Spread Operator
The spread operator can be used with any iterable object, such as arrays, strings, sets, and maps.
Here’s the basic syntax:
[...iterableObject]The spread operator takes the iterable object and expands it into multiple elements.
These elements can then be used in various ways, such as passing them as arguments to a function, merging them with other arrays or objects, or copying them into a new array.
Spread Operator with Arrays
Let’s start with a simple example of using the spread operator with arrays. Suppose we have two arrays arr1 and arr2:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];1. Merge Arrays with Spread Operator Example
We can use the spread operator to merge these two arrays into a new array:
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]2. Copy an Array using Spread Operator
We can also use the spread operator to copy an array:
const copiedArray = [...arr1];
console.log(copiedArray); // [1, 2, 3]Spread Operator with Strings
The spread operator can also be used with strings. When used with a string, the spread operator separates each character into individual elements:
const str = "Hello";
const chars = [...str];
console.log(chars); // ["H", "e", "l", "l", "o"]Spread Operator with Objects
The spread operator can also be used with objects, but with some limitations.
We can use it to copy the properties of an object into a new object:
const obj1 = { foo: "bar", baz: "qux" };
const obj2 = { ...obj1 };
console.log(obj2); // { foo: "bar", baz: "qux" }Merge Objects with Spread Operator
We can also use the spread operator to merge two objects into a new object:
const obj3 = { quux: "corge", ...obj1 };
console.log(obj3); // { quux: "corge", foo: "bar", baz: "qux" }Limitations of the Spread Operator
While the spread operator is a powerful feature, it does have some limitations.
One limitation is that it cannot be used with non-iterable objects, such as numbers, booleans, or null. Attempting to do so will result in a TypeError.
Another limitation is that it cannot be used to spread an object into an array. Attempting to do so will result in a TypeError.
Final Words on Spread Operator
The spread operator is a powerful feature of ES6 that allows us to expand iterable objects into multiple elements. It can be used with arrays, strings, sets, maps, and objects. By using the spread operator in your JavaScript code, you can create more efficient and readable applications.