How to clone an object using spread operator in JavaScript?

Front End Technology Javascript Object Oriented Programming

The spread operator, which was first introduced in ES6, is used to unpack the elements of an iterable like an array. Cloning and merging the array is simple thanks to the spread operator. The spread operator could not be used with objects when it was first introduced in ES6. The spread operator was eventually extended to objects in ES2018.

You'll learn how to use the JavaScript object spread (...) to clone an object or merge two objects into one in this article. In areas where 0+ arguments are expected, the spread operator allows an iterable to extend.

This is most frequently used in variable arrays where more than one value is required. It provides us with the ability to get a list of parameters from an array. The Spread operator has the same syntax as the Rest argument, but it has the exact opposite effect.

When all elements from an object or array must be included in a list of some sort, spread syntax could be used.

Syntax

Following is the syntax of spread operator

var myVariable = [...value];

Example 1

To unpack elements of an array, you use the spread operator (...) in this example. When cloning an array, the spread operator comes very helpful.


<!DOCTYPE html>
<html>
   <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <div id="result">
   </div>
   <script>
      let team = ['India', 'Australia', 'England', 'New Zealand'];
      let cricket = [...team];
      document.getElementById("result").innerHTML =cricket;
   </script>
</body>
</html>

Example 2

In his example the spread operator (...) unpacks elements from the team array and sets them in a new array cricket in this example. To combine two or more arrays into one, use the spread operator (...).


<!DOCTYPE html>
<html>
   <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <div id="result">
   </div>
   <script>
      let cricket = ['India', 'Australia', 'England', 'New Zealand'];
      let bcci= ['West Indies', 'Ireland', 'Kenya', 'Bangladesh'];
      let merge = [...cricket, ...bcci];
      document.getElementById("result").innerHTML =merge;
   </script>
</body>
</html>

Example 3

In this example, you'll learn how to utilise the JavaScript Object spread operator to clone an object's own enumerable properties −


<!DOCTYPE html>
<html>
   <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <script>
      const cricket = {
         team: 14
      };
      const clonedCricket = {...cricket};
      document.write(clonedCricket.team);
   </script>
</body>
</html>

Example 4

Merging objects: In this example, you'll learn how the spread operator (...) can be used to merge two objects similarly to arrays.


<!DOCTYPE html>
<html>
   <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <div id="result1"></div>
   <div id="result2"></div>
   <script>
      const cricket = {
         team: 12
      };
      const style = {
         backgroundColor: "blue"
      };
      const solidCircle = {
         ...cricket,
         ...style
      };
      
      document.getElementById("result1").innerHTML =solidCircle.team;
      document.getElementById("result2").innerHTML =solidCircle.backgroundColor;
      console.log(solidCircle);
   </script>
</body>
</html>

Example 5

The tutpoint1 object is being shared. The tutpoint1 object's key-value pairs are copied to the clonedUser object. Let's take a look at another example of merging two objects with the spread operator − mergedUsers is a clone of both tutpoint1 and tutpoint2. Each countless property on the objects will be copied to the mergedUsers object in fact. The spread operator is really a shortcut for the Object.assign() function, however there are several variations.


<!DOCTYPE html>
<html>
   <title>How to clone an object using spread operator in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <script>
      const tutpoint1 = {
         country: 'India',
         tutorial: 'Tutorialspoint',
      };
      const tutpoint2 = {
         name: "JavaScript",
         framework: "React JS"
      };
      
      const mergedUsers = {...tutpoint1, ...tutpoint2};
      console.log(mergedUsers)
   </script>
</body>
</html>

In Brief

The spread operator, the rest operator, and the Object.assign() function are all acceptable ways to clone objects in JavaScript. In addition to cloning objects, object spread and Object.assign() allow you to add or edit properties as the clone is being created.

You can clone an object while adding, updating, or skipping properties from being cloned by combining the object spread and rest in a same line. The spread operator creates new properties whereas Object.assign() assigns them when merging objects.