Spread Operator And Its Use Cases In JavaScript

Introduction

In this article, we are going to see about what spread operator in JavaScript is and its use cases.

Spread Operator

The spread operator lets you access the contents of iterable objects(Ex. Array). Syntax of spread operator is a set of three dots followed by name of the iterable object.

Example : [...value] or {...value}

Use Cases

String to Array

Convert all characters in a string to an Array. Each character of the string will be placed in the element of an array.

const string = "Test" ;
const array = [...string];
// array = ['T', 'e', 's', 't'];

Expand Array

If we want to expand an array into another array with extra values then we can use the spread operator.

const array1 = ['T', 'e', 's', 't'];
const array2 = [...array1 , 'W','o','r','l','d'];
// array2 = ['T', 'e', 's', 't', 'W','o','r','l','d'];

Merging/Concatenating Arrays

Merge the two or arrays into a single array using a spread operator.

const array1 = [1,2,3,4];
const array2 = [5,6,7,8];
const mergedArray = [ ...array1, ...array2]
// mergedArray  = [1,2,3,4,5,6,7,8]

Cloning/Copying an Array

We can clone the array using the spread operator. If you are assigned the array to another variable then the original array will be affected whenever the changes happened in the copied array. But we can avoid this issue by cloning the array using a spread operator.

// Without spread operator
const array1 = [1, 2, 3, 4];
const array2 = array1;
array2[0] = 5;
// array1 = [5,2,3,4] and array2 = [5,2,3,4]
// With spread operator
const array1 = [1, 2, 3, 4];
const array2 = [...array1];
array2[0] = 5;
// array1 = [1,2,3,4] and array2 = [5,2,3,4]

Find Min and Max from Array

We can find the minimum and maximum from the array without any loop.

const array = [1,2,3,4];
Math.min(...array); // Returns 1
Math.max(...array); // Returns 4

Spread operator with objects

 The spread operator is used to create a copy of existing objects with new or updated values or make a copy of an object with more properties.

//Example 1:
const user1 = {
    name: 'Test',
    age: 10
};
const user2 = {
    ...user1
};
console.log(user2); // user2 = {name: 'Test', age: 10};
//Example 2:
const user1 = {
    name: 'Test',
    age: 10
};
const user2 = {
    name: 'New Test',
    location: 'India'
};
const user3 = {
    ...user1,
    ...user2
};
console.log(user3) // user3 = {name: 'New Test', age: 10, location: 'India' };

Array to arguments

Instead of pass each element in the array as an argument in the function call, we can pass the array element as an individual argument using the spread operator.

function add(number1, number2, number3) {
    console.log(number1 + number2 + number3);
}
let numbers = [1, 2, 3];
// Without spread operator
add(numbers[0], numbers[1], numbers[2]);
// With spread operator
add(...numbers);

Summary

  • The spread operator is denoted by three dots (…).
  • The spread operator is allowed to access the elements of iterable objects such as arrays, sets, and strings and it is used to clone, merge the iterable objects.

I hope you liked this, and learned about the spread operator and how to use it.