Spread Operator and Rest Parameter

 

Spread Operator

---

The Spread operator in JavaScript was introduced in ES6 (2015). Many new features were introduced in JavaScript. The syntax of the spread operator is 3 dots (…). The spread operator allows us to spread out the elements of an iterable object such as an Array, Map, or Set. By the use of a spread operator, we can merge arrays, extract elements from an array, split a string from characters, copy array items, etc…

 

Concatenate arrays

We can concatenate arrays by the concat method but we can also do the same with the spread operator. An example is given below.

let arr1 = [1, 2, 3]
let arr2 = [7, 8, 9] 
let newArr = [...arr1, ...arr2] 
console.log(newArr)

OUTPUT

[1, 2, 3, 7, 8, 9]

 

Extract elements from an array

The spread operator can also be used to extract elements from an array. we can extract elements by index numbers but we can also extract array items by the below example,

// WITH SPREAD OPERATOR
let arr = [10, 15, 18, 19]
let [a, b, c] = [...arr]
console.log(a, b, c) // 10 15 18


// WITHOUT SPREAD OPERATOR
let arr = [10, 15, 18, 19]
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log(a, b, c) // 10 15 18

 

Split string by characters

To split a string character by character we can use the split method on the string but we can also do the same by spread operator. The below example will give us an array of characters.

let str = "Hello World"
let splitted = [...str]

console.log(splitted)

OUTPUT

["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

 

Copy array items

To copy an array to another variable we can do it by spread operator. Without a spread operator, we can not do this.

let arr1  = [1, 2, 3]
let arr2 = [...arr1]
arr1.push(4)

console.log(arr1, arr2)

OUTPUT

[ 1, 2, 3, 4 ] [ 1, 2, 3 ]

 

---

Rest Parameter

The rest parameter in javascript was introduced in ECMA Script 6 in 2015. This feature allows us to handle multiple parameters in any function. We can pass an indefinite number of parameters to any function. By the use of the rest parameter, we can call a function with any number of arguments.

The rest parameter is used by 3 dots(…). The syntax of the rest parameter is similar to the spread operator.

Here is an example of a sum function that accepts a limited number of parameters.

function findSum(a, b, c){
    return a + b + c;
}

console.log(findSum(2, 4, 6))

OUTPUT

12

Now we are creating the same function that accepts indefinite number of parameters.

Example 1:

function findSum(...args) {
    return args.reduce(function (prev, curr) {
        return prev + curr
    }, 0)
}

console.log(findSum(2, 4, 6))

OUTPUT

12

 

Example 2:

function myFunc(type, ...args) {
    if(type === 'multiply'){
        return args.reduce(function(prev, curr){
            return prev * curr
        }, 1)
    }
    else if(type === 'sum'){
        return args.reduce(function(prev, curr){
            return prev + curr
        }, 0)
    }
}

console.log(myFunc('sum', 1, 2, 3, 4, 5))
console.log(myFunc('multiply', 3, 4, 8))

OUTPUT

15
96

 

Example 3:

function sum(...args){
    return args.reduce((prev, curr) => prev + curr, 0);
}

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [5, 6, 7, 8]

console.log(sum(...arr1, ...arr2));

OUTPUT

41

 

---

MUST READ

Arrow Functions in JavaScript