In Javascript, using spread syntax we can expand iterables such as arrays into its contents where zero or more elements are required.
Syntax
The spread syntax is similar to the rest parameter(...rest). But instead of composing arguments into an array, the spread syntax is used to expand iterables into its contents in the required places.
[...iterableObject]
{...obj}
func(...iterableObject)
We will go through each of the above examples in detail in this article. Let's work with some examples and scenarios where the spread is useful.
Using spread in function calls
Let's consider the greeting function we wrote in the article Rest Parameter in ES6.
function greetings(...names){
for(let name of names){
console.log(`Hello, ${name}!`);
}
}
Suppose we have a list of 100 people in an array to whom we need to greet using the above function. To achieve that, we need to pass person names as arguments to the greeting function.
This can be achieved using the spread syntax, which will expand the array into its elements at the place of the call.
let namesArr = ['John Doe', 'Harry Potter', 'Dr. Strange'];
// For simplicity we are considering only 3 names
greetings(...namesArr);
//Output:
// Hello John Doe!
// Hello, Harry Potter!
// Hello, Dr. Strange!
Using spread in arrays
we can use the spread to do a lot of things with an array. Let's discuss some of the common use cases.
Adding elements in an array
We can use the spread syntax to add new elements in an array. Always remember that the spread returns a new array and does not modify the existing arrays.
let fruits = ["orange", "kiwi", "watermelon"];
//Add a new fruit at start of the array.
let newStartFruits = ["banana", ...fruits];
console.log(newStartFruits);
// ["banana", "orange", "kiwi", "watermelon"]
//Add a new fruit at end of the array.
let newEndFruits = [...fruits, "banana"];
console.log(newEndFruits);
// ["orange", "kiwi", "watermelon", "banana"]
Cloning an array
let fruitArr = ["orange", "apple", "kiwi"];
let fruitArrClone = [...fruitArr];
console.log(fruitArrClone);
// ["orange", "apple", "kiwi"]
console.log(fruitArr === fruitArrClone);
// false
Concatenating arrays
let fruitArr = ["orange", "apple", "kiwi"];
let vegetableArr = ["carrot", "tomato"];
let fruitAndVegArr = [...fruitArr, ...vegetableArr];
console.log(fruitAndVegArr);
// ["orange", "apple", "kiwi", "carrot", "tomato"]
Using spread in objects
The spread syntax is added to objects in ES 2018. Using Spread syntax you can now shallow clone the object and also merge objects.
Shallow Clone Object
let orange = {name:"orange", type:"fruit"};
let newOrange = {...orange};
// creates a new object with properties of orange object.
// {name: "orange", type: "fruit"}
Merging Objects
let orange = {name:"orange", type:"fruit"};
let color = {color: "orange"};
let newOrange = {...orange, ...color};
// creates a new object by merging properties of
// orange and color objects.
// {name: "orange", type: "fruit", color: "orange"}
This article is first published on hackinbits.com
Top comments (0)