Sunny Raj's Blog

Spread Operator

Sunny Raj's photo
Sunny Raj
·

3 min read

Spread means spreading or expanding. And the spread operator in JavaScript is denoted by three dots.

This spread operator has many different uses. Let's see them one by one.

Let's say we have two arrays and we want to merge them.

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]

let array3 = array1.concat(array2);
console.log(array3)

We are getting the combination of both arrays, which are array1 and array2.

But there is an easier way to do this:

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]

let array3 = [...array1, ...array2]
console.log(array3)

In this case, we are using the spread operator to merge both arrays.

Let's imagine another use case where we have to insert array1 between the elements of array2.

For example, we want to insert array2 between the second and third element of array1.

So, how do we do that? We can do something like this:

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, ...array1, 8, 9, 10]

console.log(array2);

Now, let's merge two objects together using the spread operator.

let object1 = {
    firstName: "Nishant",
    age: 24, 
    salary: 300,
}

let object2 = {
    lastName: "Kumar",
    height: '20 meters',
    weight: '70 KG'
}

We have two objects here. One contains firstName, age, and salary. The second one contains lastName, height, and weight.

Let's merge them together.

let object1 = {
    firstName: "Nishant",
    age: 24, 
    salary: 300,
}

let object2 = {
    lastName: "Kumar",
    height: '20 meters',
    weight: '70 KG'
}

let object3 = {...object1, ...object2}
console.log(object3);

We have now merged both objects using the spread operator, and we've logged the value in the console.

How Does the Rest Operator Work in a Function?

In JavaScript functions, rest gets used as a prefix of the function’s last parameter.

// Define a function with two regular parameters and one rest parameter:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

The rest operator (...) instructs the computer to add whatever otherInfo (arguments) supplied by the user into an array. Then, assign that array to the otherInfo parameter.

As such, we call ...otherInfo a rest parameter.

Note: Arguments are optional values you may pass to a function’s parameter through an invocator.

// Define a function with two regular parameters and one rest parameter:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

// Invoke myBio function while passing five arguments to its parameters:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

// The invocation above will return:
["CodeSweetly", "Web Developer", "Male"]

In the snippet above, notice that myBio’s invocation passed five arguments to the function.

In other words, "Oluwatobi" and "Sofela" got assigned to the firstName and lastName parameters.

At the same time, the rest operator added the remaining arguments ( "CodeSweetly", "Web Developer", and "Male") into an array and assign that array to the otherInfo parameter.

Therefore, myBio() function correctly returned ["CodeSweetly", "Web Developer", "Male"] as the content of the otherInfo rest parameter.

JavaScript