DEV Community

loading...
Cover image for ...Spread and ...Rest Operator

...Spread and ...Rest Operator

marlonry profile image marlonry Updated on ・2 min read

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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"] 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

Thank you for reading!😃 and let me know what other cool things the Spread and Rest operator can do. Happy Coding!!

Discussion (2)

pic
Editor guide
Collapse
devfullstacker profile image
devfullstacker

Thanks for sharing ur thoughts

Collapse
marlonry profile image
marlonry Author

:D thank you.