How to Merge Properties of Two JavaScript Objects Dynamically

In the given tutorial, we are going to show you some fast-solutions to merging the properties of two objects dynamically in JavaScript.

Watch a video course JavaScript -The Complete Guide (Beginner + Advanced)

Solution 1 . Spread Operator

The first solution considers using the spread operator. It helps an iterable to expand in places where 0+ arguments are expected. Mostly you can use it in the variable array, in which more than one value is expected. With the help of it, the privilege obtains a list of parameters from an array.

Objects in JavaScript are key-value paired dictionaries. So, different objects can be merged into one applying the spread (…) operator.

The spread syntax looks as follows:

object1 = { ...object2,	...object3,	...}

Let’s take a look at an example:

Javascript object spread operator

let obj1 = { name: "W3Docs", }; let obj2 = { domain: "https://www.w3docs.com/" }; let Sites = { ...obj1, ...obj2 }; console.log(Sites)

In the second example, let’s suppose that the objects obtain the same key. In such a scenario, it is required to use the value of the key of the object appearing later in the distribution.

It is demonstrated here:

Javascript object spread operator

let obj1 = { name: "W3Docs", }; let obj2 = { name: "Javascript" }; let Sites = { ...obj1, ...obj2 }; console.log(Sites)

Solution 2. Object.assign()

As an alternative solution, you can use the Object.assign() method. As a rule, this method is applied for copying the values of all properties from a single and more source objects to a target object. As a consequence, the target object will be returned.

The first example is the following:

Javascript object assign method

let target = { a: "object", b: "array" }; let source = { c: "js", d: "w3docs" }; let returnTarget = Object.assign(target, source); console.log(JSON.stringify(target)); console.log(JSON.stringify(returnTarget));

Its output will look like this:

{"a":"object","b":"array","c":"js","d":"w3docs"}
{"a":"object","b":"array","c":"js","d":"w3docs"}

Also, in this case, the value of the key of the object appearing later in the distribution will be copied. In our following example, you can notice that there are the same keys with different values.

The second example is the following:

Javascript object assign method

let target = { a: "object", b: "array" }; let source = { b: "js", d: "w3docs" }; let returnTarget = Object.assign(target, source); console.log(JSON.stringify(target)); console.log("</br>"); console.log(JSON.stringify(returnTarget));

And its output is here:

{"a":"object","b":"js","d":"w3docs"}
{"a":"object","b":"js","d":"w3docs"}

Solution 3. jQuery

jQuery also offers a rational solution to this issue.

You can merge objects using the code below:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  </head>
  <body>
    <div id="div"></div>
    <script>
      let obj1 = {
        banana: {
          weight: 25,
          price: 200
        },
        cherry: 97
      };
      let obj2 = {
        banana: {
          price: 100
        },
        durian: 800
      };
      // Merge obj2 into obj1
      $.extend(obj1, obj2);
      // Assuming JSON.stringify
      $("#div").append(JSON.stringify(obj1));
    </script>
  </body>
</html>

Try it Yourself »

Defining the Spread Syntax

The spread syntax gives an array or a string an opportunity of expanding where zero or more elements and arguments are expected. In other words, if you have an array, a string, or an object, intending to apply the overall values, you can spread them into new objects, function calls, or new arrays applying a short syntax.

Although the spread syntax is similar to the rest parameters, also using three dots …, it does the opposite.

If you use ...arr in the function call, it will expand an iterable object arr to the list of arguments.

Defining the Object.assign() Method

The Object.assign() method is one of the constructor methods. It is used for copying values and properties from a single or more source objects to a target one. It runs getters and setters as it uses both [[Get]] on the source and [[Set]] on the target.

It returns the target object that obtains properties and values copied from the target object. Object.assign() may not throw on undefined or null source values.