Hello, today I will be talking about the Spread and Rest operator, and give sample situations where they are most commonly used. As a beginner is hard to tell which one is the right operator since they share the same syntax. However, these operators are complete opposites in the way they behave.
The first thing to understand about each of these operators is that the ...
Spread operator expands arrays, strings, and objects into single elements, and the ...
Rest operator combines elements into an array. This can be better understood in practice so let's dive right into each context where they are presented.
In the following examples, I will show where the Spread and Rest operators are used and show a reminder of how each of the following situations used to be done before the operators were implemented.
Spread Operator
Concatenate Arrays
const names = ["Wade", "Samantha"];
const moreNames = ["Daito", "Helen"];
const allNames = [...names, ...moreNames];
console.log(allNames); // ["Wade", "Samantha", "Daito", "Helen"]
Arrays can also be concatenated with
Array.prototype.concat()
.
Copy Arrays
const actions = ["run", "climb", "walk"];
const actionsCopy = [...actions];
console.log(actions); // ["run", "climb", "walk"]
console.log(actionsCopy); // ["run", "climb", "walk"]
There are multiple ways to copy arrays like using the
Array.prototype.slice()
method.
Merge Objects
const food = { dish: 'Sushi'};
const description = {type: "Japanese", servings: 8};
const dishInfo = {...food, ...description}; // fix
console.log(dishInfo); // {dish: "Sushi", type: "Japanese", servings: 8}
Objects can also be merged or copied with
Object.assign()
.
Expand Strings into Single Elements
const place = "The Oasis"
const elements = [...place];
console.log(elements) // ["T", "h", "e", " ", "O", "a", "s", "i", "s"]
Strings can also be split with
String.prototype.split()
.
Pass elements as arguments to a function
const numbers = [10, 6, 3];
const multiplyNumber = (a, b, c) => {
console.log(a*b*c);
};
multiplyNumber(...numbers); // 180
Passing elements as arguments to a function can also be done with
Function.prototype.apply()
.
Rest Operator
Pass an indefinite amount of arguments to a function
const getTotal = (...rest) => {
console.log(rest); // [4, 5, 1, 8, 10]
const total = rest.reduce((acc, currentValue) => {
return acc + currentValue;
}, 0);
console.log(total); // 28
};
getTotal(4, 5, 1, 8, 10);
The
arguments
object can also be used when passing an indefinite amount of arguments to a function.
Using rest with Destructuring
Arrays
const [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7];
console.log(rest); // Output: [3, 4, 5, 6, 7]
Objects
const { a, b, ...rest } = { a: 12, b: 43, c: 67, d: 17 };
console.log(a); // 12
console.log(b); // 43
console.log(rest); // {c: 67, d: 17}
Thank you for reading!😃 and let me know what other cool things the Spread and Rest operator can do. Happy Coding!!
Top comments (2)
Thanks for sharing ur thoughts
:D thank you.