ref – https://codeburst.io/javascript-the-spread-operator-a867a71668ca
The spread operator allows an expression to be expanded in places where multiple elements/variables/arguments are expected
Doing things in immutable way:
Say you have an object
|
1 2 3 4 |
const meal = { id: 1, description: 'breakfast' } |
You want to update it (add a property). Keep everything immutable.
So you’d create another literal object just like meal and add your property.
|
1 2 3 4 5 |
const updatedMeal = { id: 1, description: 'breakfast', calories: 680, // add this here } |
But this is a lot of typing and too much work if it has many properties.
In order to remedy this, we’d use the spread operator.
|
1 2 3 4 5 |
const updatedMeal = { ...meal, // adds all properties to this object description: 'Brunch', // can over-ride original property calories: 680 } |
Now, let’s say we want to use it.
|
1 2 |
const description = updatedMeal.description; const calories = updatedMeal.calories; |
This is rather tedious and too wordy.
Let’s use Destructuring to get what we need.
|
1 |
const { description, calories } = updatedMeal; |
How to remove or delete field. Let’s delete id by using rest syntax.
|
1 2 3 |
// rest syntax const { id, ...mealWithoutId } = updatedMeal; console.log(mealWithoutId); |
Now mealWithoutId will have all properties of updatedMeal, without the id.
|
1 2 3 4 5 6 |
const meals = [ {id: 1, description: 'breakfast', calories: 420}, {id: 2, description: 'lunch', calories: 520} ] const meal = {id: 3, description: 'dinner', calories: 620}; |
|
1 |
const updatedMeals = [...meals, meal]; |
now updatedMeals will have the third meal.
But say we want to update lunch?
array.map(fn) returns a new new array with the updated changes
|
1 2 3 4 5 6 7 8 9 10 11 |
function updateDescription(meal) { // make the update here if (meal.id === 2) { return { ...meal, description: 'Early Lunch', } } } const updatedMealsDescription = updatedMeals.map(updateDescription); |
Use Array.filter to remove items from array immutably.
|
1 2 3 |
const filteredMeals = updatedMeals.filter(function(meal) { return meal.id !== 1; }); |
Various Usages
given…normally, the middle reference in arr would reference var middle. This makes it so that its an array inside of an array. Its not what we want.
|
1 2 3 4 |
var middle = [3, 4]; var arr = [1, 2, middle, 5, 6]; console.log(arr); // [1, 2, [3, 4], 5, 6] |
What we can do is to expand middle’s elements into arr like so:
|
1 2 3 4 |
var middle = [3, 4]; var arr = [1, 2, ...middle, 5, 6]; console.log(arr); // [1, 2, 3, 4, 5, 6] |
Remember the spread operator definition you just read above? Here’s where it comes into play. As you can see, when we create the arr array and use the spread operator on the middle array, instead of just being inserted, the middle array expands. Each element in the middle array is inserted into the arr array. This means that instead of nested arrays, we are left with a simple array of numbers ranging from 1 to 6.
Copying arrays
Voila! We have a copied array. The array values in arr expanded to become individual letters which were then assigned to arr2. We can now change the arr2 array as much as we’d like with no consequences on the original arr array.
|
1 2 3 4 |
var arr = ['a', 'b', 'c']; var arr2 = [...arr]; console.log(arr2); // ['a', 'b', 'c'] |
Appending Arrays
|
1 2 3 4 5 |
var arr = ['a', 'b', 'c']; var arr2 = ['d', 'e', 'f']; arr = [...arr, ...arr2]; console.log(arr); // ['a', 'b', 'c', 'd', 'e', 'f'] |
String to Array
Bonus example: Use the spread operator to simply convert a string to an array of characters
|
1 2 3 4 |
var str = "hello"; var chars = [...str]; console.log(chars); // ['h', 'e',' l',' l', 'o'] |
No need to use ‘call’
|
1 2 3 4 5 6 7 8 9 10 |
function doStuff (x, y, z) { } var args = [0, 1, 2]; // Call the function, passing args doStuff.apply(null, args); // With the spread operator we can avoid apply all together and // simply call the function with the spread operator before the array: doStuff(...args); |