Spread vs rest operators

👩‍💻 <h2>Hello, fellas</h2>

Hope you are doing well. Today I will explain you how to deal with “…” functionality and get its difference; usually it’s used as a **spread operator** or as a **rest parameter**. Let’s take a look at examples:

Rest parameters

function add(num1, num2) {
return num1 + num2;
}

add(1, 2, 4, 5) // returns 3

Bang 🤔, it sucks.. pure JS doesn’t cope with a task properly. Let’s userest parameters and try to gather many arguments into an array.

function add(…args) {
let sum = 0;
for( let arg of args) sum += arg;

return sum
}
add(1, 2) // 3
add(1, 2, 3, 4) //10

We did it 😍

PAY ATTENTION: Rest parameters have to be at the last argument.

Spread operators

This tool helps us to spread expand elements. Let’s see:

const fruits = [‘apple’, ‘banana’, ‘lemon’];
const meal =[…fruits, ‘onion’, ‘bread’];
console.log(meal) // ‘apple’, ‘banana’, ‘lemon’, ‘onion’, ‘bread’

Notice that you can use the spread operator as the first argument unlike rest parameters. Also you can easily copy the an array:

const arr1 = [‘chocolate’, ‘lolipop’];
const arr2 = […arr1];
console.log(arr2) // ‘chocolate’, ‘lolipop’

Awesome !!!

The last hack I’d rather share with you: you can pass an array as a list of arguments into a function:

function add(a, b, c) {
return a + b + c;
}
const nums = [1, 2, 3];

add(…nums) // 6

Hope this article helped you to simplify understanding spread and rest operators ❤ and its difference.