...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 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!!

Comments

[devfullstacker]

Thanks for sharing ur thoughts

[marlonry]

:D thank you.