…Spread and …Rest Operator

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 ar…


This content originally appeared on DEV Community and was authored by marlonry

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.

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


This content originally appeared on DEV Community and was authored by marlonry


Print Share Comment Cite Upload Translate Updates
APA

marlonry | Sciencx (2021-02-18T02:49:55+00:00) …Spread and …Rest Operator. Retrieved from https://www.scien.cx/2021/02/18/spread-and-rest-operator/

MLA
" » …Spread and …Rest Operator." marlonry | Sciencx - Thursday February 18, 2021, https://www.scien.cx/2021/02/18/spread-and-rest-operator/
HARVARD
marlonry | Sciencx Thursday February 18, 2021 » …Spread and …Rest Operator., viewed ,<https://www.scien.cx/2021/02/18/spread-and-rest-operator/>
VANCOUVER
marlonry | Sciencx - » …Spread and …Rest Operator. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/18/spread-and-rest-operator/
CHICAGO
" » …Spread and …Rest Operator." marlonry | Sciencx - Accessed . https://www.scien.cx/2021/02/18/spread-and-rest-operator/
IEEE
" » …Spread and …Rest Operator." marlonry | Sciencx [Online]. Available: https://www.scien.cx/2021/02/18/spread-and-rest-operator/. [Accessed: ]
rf:citation
» …Spread and …Rest Operator | marlonry | Sciencx | https://www.scien.cx/2021/02/18/spread-and-rest-operator/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts